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

Una Kravets

Gerald Monaco

שאילתות הקונטיינרים כבר כאן!

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

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

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

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

שימוש בשאילתות לגבי מאגרי תגים

נניח שיש לכם קוד 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;
  }
}

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

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

דוגמה אחת לאופן השימוש ביחידות מבוססות-קונטיינרים היא טיפוגרפיה רספונסיבית. אפשר להשתמש ביחידות שמבוססות על אזור התצוגה (כמו 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

מכיוון ששאילתות קונטיינרים הן תכונה כל כך חזקה, חשוב לנו שתהיה לכם אפשרות לשלב אותן בפרויקטים שלכם ולדעת שתמיכה בדפדפן היא חלק גדול מהתהליך. לכן אנחנו פועלים כדי לבצע שיפורים ב-Container Query 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 (כבר אין בעיה להציב תגובות במקומות שבהם הן תקפות מבחינה תחבירית).
• מצבי כתיבה אנכיים (באמצעות מצב כתיבה).
• יחידות יחסיות של קונטיינרים (cqw, cqh וכו') נתמכות בתנאי שאילתה, בהצהרות מאפיינים ובתמונות מפתח של אנימציה. הפרמטרים rem ו-em נתמכים בתנאי השאילתות.
• תחביר שאילתת מאגר מורחב:
  • תחביר של טווח (לדוגמה (200px < width < 400px)).
  • שאילתות שוויון (לדוגמה, (width = 200px)).
• פסאודו אלמנטים כמו ::before ו-::after.
• דפדפנים ללא :is(...)/:where(...) נתמכים דרך פתרון זמני אופציונלי
• שאילתות לגבי התכונות orientation ו-aspect-ratio.
• סינון נכון של שאילתות בהתבסס על תכונות (לדוגמה, שליחת שאילתות על height ב-container: inline-size אסורה באופן תקין במצב כתיבה אופקית).
• מוטציה של DOM (לדוגמה, רכיבי <style> ו-<link> מוסרים בזמן הריצה).

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

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

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

אזהרות

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