שאילתות קונטיינרים ו- :has() הן התאמה שמתבצעת בגן עדן עם יכולת תגובה. למרבה המזל, שתי התכונות האלה נוחתות יחד ב-Chromium 105. זוהי גרסה ענקית שכוללת שתי תכונות מבוקשות לממשקים רספונסיביים!
שאילתות מאגר: סיכום קצר
שאילתות קונטיינר מאפשרות למפתחים לשלוח שאילתות בבורר הורה לגבי פרטי הגודל והסגנון שלו. כך, לרכיב צאצא יש אפשרות להשתלט על הלוגיקה של העיצוב הרספונסיבי, ללא קשר למיקום שלו בדף אינטרנט.
במקום להסתמך על אזור התצוגה לקלט הסגנון, כמו השטח הזמין, מפתחים יכולים עכשיו גם להריץ שאילתות לגבי גודל הרכיבים בדף. המשמעות של היכולת הזו היא שרכיב הוא הבעלים של לוגיקת הסגנון הרספונסיבית שלו. כך הרכיב עמיד יותר, כי לוגיקת העיצוב מצורפת אליו, לא משנה איפה הוא מופיע בדף.
שימוש בשאילתות לגבי מאגרי תגים
כדי לפתח גרסת build עם שאילתות קונטיינר, קודם צריך להגדיר השהיה על רכיב הורה. כדי לעשות זאת, מגדירים container-type במאגר ההורה. יכול להיות שיש לכם כרטיס עם תמונה ותוכן טקסט מסוים שנראה כך:
כדי ליצור שאילתה במאגר, מגדירים את container-type במאגר של הכרטיס:
.card-container {
container-type: inline-size;
}
אם המדיניות container-type מוגדרת לערך inline-size, נשלחת שאילתה לגודל הכיוון המוטבע של תבנית ההורה. בשפות לטיניות כמו אנגלית, זה יהיה רוחב הכרטיס, כי הטקסט עובר בתוך שורה משמאל לימין.
עכשיו אנחנו יכולים להשתמש במאגר הזה כדי להחיל סגנונות על כל אחד מהצאצאים שלו באמצעות @container:
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
בורר ההורה :has()
פסאודו המחלקה :has() של שירות ה-CSS מאפשר למפתחים לבדוק אם רכיב הורה מכיל צאצאים עם פרמטרים ספציפיים.
לדוגמה, p:has(span) מציין בורר פסקאות (p) שבתוכו יש span. אפשר להשתמש באפשרות הזו כדי לעצב את פסקה ההורה עצמה, או לעצב את כל מה שנכלל בה. אחת הדוגמאות השימושיות היא figure:has(figcaption) כדי לעצב רכיב figure שמכיל כיתוב. אפשר לקרוא מידע נוסף על :has() במאמר הזה של ג'יי טומפקינס.
שאילתות קונטיינרים ו-:has()
אפשר לשלב את כוחות הבחירה ברמה העליונה של :has() עם יכולות ההורה לשאילתות של שאילתות בקונטיינרים, וכך ליצור כמה סגנונות מהותיים ודינמיים באמת.
עכשיו נרחיב על הדוגמה הראשונה עם כרטיס הטיל. מה היה קורה אילו כרטיס היה ללא תמונה? אולי תרצו להגדיל את הכותרת ולהתאים את פריסת הרשת לעמודה אחת כדי שהיא תיראה מכוונת יותר בלי התמונה.
בדוגמה הזו, לכרטיס עם תמונה יש תבנית רשת של שתי עמודות, ולכרטיס בלי התמונה פריסה של עמודה אחת. בנוסף, לכותרת של הכרטיס ללא התמונה יש כותרת גדולה יותר. כדי לכתוב את ההודעה הזו באמצעות :has() צריך להשתמש בשירות ה-CSS הבא.
.card:has(.visual) {
grid-template-columns: 1fr 1fr;
}
ניסית למצוא רכיב עם מחלקה של visual כדי להחיל את סגנון שתי העמודות שלמעלה. פונקציית CSS מסודרת נוספת היא :not(). זה חלק מאותו מפרט כמו :has(), אבל הוא קיים כבר הרבה יותר זמן ויש בו תמיכה טובה יותר בדפדפנים. אפשר אפילו לשלב בין :has() לבין :not(), כך:
.card:not(:has(.visual)) h1 {
font-size: 4rem;
}
בקוד שלמעלה, אתם כותבים בורר שמסדיר h1 בתוך כרטיס שלא מכיל מחלקה visual. כך ניתן לשנות באופן ברור מאוד את גודל הגופן.
סיכום של כל המידע
ההדגמה שלמעלה מראה שילוב של :has(), :not() ו-@container, אבל שאילתות קונטיינרים מרשימות מאוד כשאפשר לראות את אותו רכיב במספר מקומות. בואו נוסיף עיצוב ונציג את הכרטיסים האלה ברשת אחת לצד השנייה.
עכשיו אפשר לראות באמת את העוצמה של CSS מודרני. אנחנו יכולים לכתוב סגנונות ברורים באמצעות סגנונות מטורגטים שיוצרים לוגיקה על בסיס לוגיקה ויוצרים רכיבים חזקים במיוחד. שתי התכונות העוצמתיות האלה מובילות ל-Chromium 105 וצוברות מומנטום של תמיכה בדפדפנים שונים, ולכן ממש מרגש להיות מפתח של ממשק המשתמש!