דף זה תורגם על ידי Cloud Translation API.

שאילתות לגבי קונטיינרים מתחילות להגיע לדפדפנים יציבים בזמן שה-Polyfill מקבל עדכון גדול

Una Kravets

Gerald Monaco

שאילתות בקונטיינרים זמינות עכשיו!

חדשות מרגשות: אחד מהפיצ'רים למפתחים שהכי התבקשו התחיל להופיע בדפדפני אינטרנט! החל מגרסה Chromium 105 וגרסה Safari 16, אפשר ליצור בדפדפנים האלה שאילתות מאגר שמבוססות על גודל ולהשתמש בערכים של יחידות שאילתות מאגר. כדי להקל עוד יותר על השימוש בשאילתות קונטיינר מבוססות-גודל וביחידות cq, צוות Aurora ב-Chrome עבד קשה כדי לעדכן את ה-Polyfill של שאילתות קונטיינר כך שיתמוך בדפדפנים ובתרחישים לדוגמה נוספים. כך תוכלו להשתמש בתכונה החזקה הזו כבר היום בראש שקט.

מהן שאילתות של מאגרים?

שאילתות של קונטיינרים הן תכונת CSS שמאפשרת לכתוב לוגיקת עיצוב שמטרגטת תכונות של רכיב הורה כדי לעצב את הצאצאים שלו. כדי ליצור עיצוב רספונסיבי באמת שמבוסס על רכיבים, אפשר להריץ שאילתות לגבי הגודל של הורה. זה מידע מפורט ושימושי הרבה יותר מאשר שאילתות מדיה שמספקות רק מידע על הגודל של אזור התצוגה.

ALT_TEXT_HERE

שאילתות למאגרים מאפשרים לכם לכתוב רכיבים לשימוש חוזר שעשויים להופיע באופן שונה, בהתאם למיקום שלהם בדף. כך הם עמידים ורספונסיביים יותר בדפים ובתבניות.

שימוש בשאילתות של קונטיינרים

נניח שיש לכם קוד HTML:

<!-- card parent -->
<div class=”card-parent”>
  <div class=”card>
     <!-- card contents -->
      …
  </div>
</div>

כדי להשתמש בשאילתת מאגר, קודם צריך להגדיר מאגר ברכיב ההורה שרוצים לעקוב אחריו. כדי לעשות זאת, מגדירים את המאפיין container-type או משתמשים בקיצור container כדי להגדיר את סוג הקונטיינר ואת שם הקונטיינר בו-זמנית.

.card-parent {
  /* query the inline-direction size of this parent */
  container-type: inline-size;
}

עכשיו אפשר להשתמש בכלל @container כדי להגדיר סגנונות על סמך ההורה הקרוב ביותר. לעיצוב כמו בתמונה שלמעלה, שבו כרטיס יכול לעבור מעמודה אחת לשתי עמודות, כותבים משהו כמו:

@container (min-width: 300px) {
  .card {
    /* styles to apply when the card container (.card-parent in this case) is >= 300px */
    /* I.e. shift from 1-column to 2-column layout: */
    grid-template-columns: 1fr 1fr;
  }
}

כדי שהקוד יהיה מסודר וברור יותר, נותנים שם למאגר הרכיבים ההורה:

.card-parent {
  container-type: inline-size;
  /* set name here, or write this in one line using the container shorthand */
  container-name: card-container;
}

לאחר מכן צריך לשכתב את הקוד הקודם כך:

@container card-container (min-width: 300px) {
  .card {
    grid-template-columns: 1fr 1fr;
  }
}

יחידות שאילתות של קונטיינרים

כדי לשפר את התועלת של שאילתות מאגר, אפשר להשתמש גם בערכי יחידות שמבוססים על מאגרים. בטבלה הבאה מוצגים הערכים האפשריים של יחידת הקונטיינר ואופן ההתאמה שלהם לגודל הקונטיינר:

יחידה	ביחס ל-
`cqw`	1% מהרוחב של מאגר השאילתות
`cqh`	1% מהגובה של מאגר השאילתות
`cqi`	1% מהגודל המוטבע של מאגר של שאילתות
`cqb`	1% מגודל הבלוק של מאגר שאילתות
`cqmin`	הערך הקטן מבין cqi או cqb
`cqmax`	הערך הגדול יותר של cqi או cqb

דוגמה אחת לאופן השימוש ביחידות מבוססות-קונטיינרים היא טיפוגרפיה רספונסיבית. אפשר להשתמש ביחידות שמבוססות על אזור התצוגה (כמו vh, vb, vw ו-vi) כדי לשנות את הגודל של כל רכיב במסך.

.card h2 {
  font-size: 15cqi;
}

הקוד הזה יגדיר את גודל הגופן כ-15% מהגודל בתוך השורה של המאגר, כלומר הוא יגדל ככל שהגודל בתוך השורה (הרוחב) יגדל, או יקטן ככל שהוא יקטן. כדי להרחיב את האפשרויות, אפשר להשתמש בפונקציה clamp() כדי להגדיר מגבלת גודל מינימלית ומקסימלית לטיפוגרפיה, ולהגדיר את הגודל שלה באופן דינמי על סמך גודל הקונטיינר:

.card h2 {
  font-size: clamp(1.5rem, 15cqi, 3rem);
}

עכשיו הכותרת אף פעם לא תהיה גדולה מ-3rem או קטנה מ-.5rem, אבל היא תיקח 15% מהגודל בתוך השורה של מאגר התגים בכל מקום אחר.

הדגמה הזו ממשיכה את התהליך ומעדכנת את הכרטיסים הרחבים כך שיהיה להם טווח גודל קטן יותר, כי הם מוצגים בתצוגה של 2 עמודות.

שאילתת המאגר – polyfill

שאילתות בקונטיינרים הן תכונה חזקה מאוד, ולכן אנחנו רוצים שתוכלו לשלב אותן בפרויקטים שלכם בבטחה. תמיכת הדפדפן היא חלק חשוב מהעניין. לכן, עבדנו על שיפורים בPolyfill של שאילתות בקונטיינרים. ל-polyfill הזה יש תמיכה כללית ב:

Firefox בגרסה 69 ומעלה
Chrome בגרסה 79 ומעלה
Edge מגרסה 79 ואילך
Safari 13.4 ואילך

הגודל שלו קטן מ-9kb אחרי דחיסה, והוא משתמש ב-ResizeObserver עם MutationObserver כדי לתמוך בתחביר השאילתה המלא של @container שזמין כרגע בדפדפנים יציבים:

שאילתות נפרדות (width: 300px ו-min-width: 300px).
שאילתות טווח (200px < width < 400px ו-width < 400px).
יחידות האורך היחסי של הקונטיינר (cqw, cqh, cqi, cqb, cqmin ו-cqmax) במאפיינים ובתמונות מפתח.

שימוש ב-polyfill של שאילתות בקונטיינרים

כדי להשתמש ב-polyfill, מוסיפים את תג הסקריפט הבא לראש המסמך: :

<script type="module">
  if (!("container" in document.documentElement.style)) {
    import("https://unpkg.com/container-query-polyfill@^0.2.0");
  }
</script>

אפשר גם להשתמש בשירות כדי להעביר את ה-polyfill באופן מותנה על סמך User-Agent, או לארח אותו בעצמכם במקור שלכם.

כדי שחוויית המשתמש תהיה הטובה ביותר, מומלץ להשתמש ב-polyfill רק בתוכן שמופיע בחלק העליון של המסך, ולהשתמש בשאילתות @supports כדי להחליף אותו באופן זמני במדד טעינה עד שה-polyfill יהיה מוכן להציג אותו:

@supports not (container-type: inline-size) {
  .container,
  footer {
    display: none;
  }

  .loader {
    display: flex;
  }
}

ברשתות ובמכשירים מהירים מספיק, או במכשירים שתומכים באופן מקורי בשאילתות בקונטיינרים, אינדיקטור הטעינה הזה לא יוצג אף פעם.

תכונות חדשות של Polyfill

הגרסה המעודכנת של polyfill תומכת:

@container כללים מקוננים.
אפשר להטמיע כללים של @container בשאילתות @supports ו-@media ולהפך.
CSS מותנה, כמו @supports (container-type: inline-size), יעבור אחרי טעינת ה-polyfill.
תמיכה מלאה בתחביר CSS (אין יותר בעיה בהוספת תגובות בכל מקום שבו הן תקינות מבחינה תחבירית).
מצבי כתיבה אנכיים (באמצעות writing-mode).
יש תמיכה ביחידות יחסיות של מאגר (cqw,‏ cqh וכו') בתנאי שאילתות, בהצהרות על נכסים ובפריימים מרכזיים של אנימציה. הפרמטרים rem ו-em נתמכים בתנאי השאילתות.
תחביר שאילתת מאגר מורחב:
- תחביר של טווח (לדוגמה (200px < width < 400px)).
- שאילתות שוויון (לדוגמה, (width = 200px)).
רכיבים פסאודו כמו ::before ו-::after.
דפדפנים ללא :is(...)/:where(...) נתמכים דרך פתרון זמני אופציונלי
שאילתות לגבי התכונות orientation ו-aspect-ratio.
סינון שאילתות בצורה נכונה על סמך תכונות (לדוגמה, אסור לשלוח שאילתות ל-height ב-container: inline-size במצב כתיבה אופקי).
מוטציה של DOM (לדוגמה, רכיבי <style> ו-<link> מוסרים בזמן הריצה).

הערה: ה-polyfill המעודכן של שאילתות הקונטיינר לא תומך יותר בסינטקס מיושן של שאילתות גודל, שבו המשתמש צריך לעטוף את שאילתות הגודל ב-size() (כלומר size(width >= 200px)).

מגבלות ואזהרות של Polyfill

אם אתם משתמשים ב-polyfill של שאילתות בקונטיינר, יש כמה תכונות חסרות שכדאי לשים לב אליהן:

ה-DOM של Shadow לא נתמך עדיין.
יחידות יחסיות של קונטיינר (לדוגמה, cqw ו-cqh) לא נתמכות בתנאי השאילתה של @media.
- Safari: אין תמיכה ביחידות יחסיות של מאגרים בפריימים מרכזיים של אנימציה בגרסאות קודמות ל-15.4.
עדיין אין תמיכה בתנאי שאילתות עם פונקציות מתמטיות כמו calc(),‏ min(),‏ max() וכו'.
ה-polyfill הזה פועל רק עם CSS מוטבע ועם אותו מקור. אין תמיכה בגיליונות סגנונות ממקורות שונים ובגיליונות סגנונות במסגרות iframe (אלא אם נטען polyfill באופן ידני).
גבול layout ו-style דורש תמיכה בדפדפן הבסיסי:
- Safari בגרסה 15.4 ואילך
- בשלב זה אין תמיכה ב-Firefox ביכולת להכיל סגנונות, אבל אנחנו עובדים על כך.

אזהרות

כדי למנוע השפעה על FID ו-CLS, ה-polyfill לא מבטיח מתי הפריסה הראשונה תתרחש, גם אם היא נטענת באופן סינכרוני. עם זאת, הוא ינסה למנוע עיכובים לא סבירים ב-LCP. במילים אחרות, אסור אף פעם להסתמך עליו כהצגת תמונה ראשונה.
הפונקציה יוצרת את ResizeObserver Loop Errors. גם הפוליפיל המקורי עושה זאת, אבל כדאי לציין את זה. הסיבה לכך היא שגודל הבלוק של container-type: inline-size צפוי להשתנות אחרי הערכת השאילתה, אבל ל-ResizeObserver אין דרך לומר לו שאנחנו לא מתעניינים בשינויים בגודל הבלוק.
ה-polyfill הזה נבדק באמצעות בדיקות Web Platform Tests והגיע ל-70% יעילות, כי תכונות מסוימות כמו ממשקי API של JavaScript לא עברו פוליפילינג, ולכן שיעור ההצלחה קרוב יותר ל-70% באופן מכוון.
הפתרון של :where() נדרש ל-2.23% מהמשתמשים בדפדפנים ישנים יותר:
- Safari 14
- Chromium 88
- Edge 88
- Samsung אינטרנט 15
- Firefox 78