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

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

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

• עדיין אין תמיכה ב-Shadow DOM.
• אין תמיכה ביחידות יחסיות של מאגר (לדוגמה, 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. גם הפוליפיל המקורי עושה זאת, אבל כדאי לציין את זה. הסיבה לכך היא שסביר להניח שגודל הבלוק של container-type: inline-size ישתנה אחרי הערכת שאילתה, אבל ל-ResizeObserver אין דרך להראות שלא חשובים לנו שינויים בגודל הבלוק.
• ה-polyfill הזה נבדק מול 'בדיקות פלטפורמת האינטרנט' ועבר 70% מעבר, כי תכונות מסוימות, כמו ממשקי API של JavaScript לא מולאו, ולכן שיעור המעבר קרוב יותר ל-70%.
• הפתרון החלופי של :where() נדרש ל-2.23% מהמשתמשים בדפדפנים ישנים יותר מהדפדפנים הבאים:
  • Safari 14
  • Chromium 88
  • Edge 88
  • Samsung Internet 15
  • Firefox 78