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

Una Kravets

Gerald Monaco

שאילתות מאגרים כבר כאן!

חדשות מרגשות - אחת מהתכונות המבוקשות ביותר למפתחים התחילה להגיע לדפדפני אינטרנט! החל מ-Chromium 105 ומ-Safari 16, אפשר עכשיו ליצור שאילתות של קונטיינרים לפי גודל ולהשתמש בערכים של יחידות שאילתות בקונטיינרים בדפדפנים האלה. כדי שיהיה לכם קל יותר להשתמש בשאילתות של קונטיינרים וביחידות cq, הצוות של Aurora ב-Chrome השקיע מאמצים רבים בעדכון 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 של שאילתת הקונטיינר

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

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

כשהדוח דחוס, גודלו קטן מ-9kb, והוא משתמש ב-sizeObserver עם 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
  • כרום 88
  • Edge בגרסה 88
  • Samsung אינטרנט 15
  • Firefox 78