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

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

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

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

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