שאילתות קונטיינרים מגיעות בדפדפנים יציבים

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

Una Kravets

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

באמצעות שאילתות מאגרים אפשר לשלוח שאילתות לגבי פרטי העיצוב של רכיב הורה, כמו inline-size שלו. באמצעות שאילתות מדיה, אפשר לשלוח שאילתות לגבי גודל אזור התצוגה. שאילתות של קונטיינרים מאפשרות להשתמש ברכיבים שיכולים להשתנות בהתאם למיקום שלהם בממשק המשתמש.

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

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

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

.card-container {
  container: card / inline-size;
}

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

עכשיו אפשר להשתמש במאגר הזה כדי להחיל סגנונות על כל אחד מהצאצאים שלו באמצעות @container:

.card-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
 .card-child {
  grid-template-columns: 1fr;
 }
}

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

.card-child h2 {
  font-size: clamp(2rem, 15cqi, 4rem);
}

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

שאילתת קונטיינר לוולנטיין

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