שאילתות מאגר ו- :has() הן התאמה שמותאמת לגן עדן עם יכולת תגובה. למרבה המזל, שתי התכונות האלה נוחתות יחד ב-Chromium 105. זוהי גרסה ענקית עם שתי תכונות מבוקשות במיוחד לממשקים רספונסיביים!
שאילתות מאגר: סיכום מהיר
שאילתות מאגר מאפשרות למפתחים לשלוח שאילתה לבורר הורה בנוגע לגודל ולפרטי הסגנון שלו. כך, רכיב צאצא יכול לנהל את לוגיקת הסגנון הרספונסיבית שלו, לא משנה איפה הוא נמצא בדף אינטרנט.
במקום להסתמך על אזור התצוגה להזנת קלט של עיצוב, כמו השטח הזמין, עכשיו המפתחים יכולים להריץ שאילתות גם לגבי גודל הרכיבים בדף. המשמעות של היכולת הזו היא שהרכיב הוא הבעלים של לוגיקת הסגנון הרספונסיבית שלו. זה הופך את הרכיב לעמיד הרבה יותר, מכיוון שלוגיקת הסגנון מחוברת אליו, לא משנה היכן הוא מופיע בדף.
שימוש בשאילתות של מאגרי תגים
כדי ליצור באמצעות שאילתות מאגר, קודם צריך להגדיר הגבלה ברכיב הורה. כדי לעשות זאת, מגדירים 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()
פסאודו-סיווג של CSS :has() מאפשר למפתחים לבדוק אם רכיב הורה מכיל צאצאים עם פרמטרים ספציפיים.
לדוגמה, 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 וצוברות מומנטום לתמיכה בדפדפנים שונים, וזו תקופה מרגשת מאוד להיות מפתח של ממשק משתמש!