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

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

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

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

הגדרת שאילתת מאגר תגים

בניגוד לשאילתות מדיה, שאילתות קונטיינר מוגדרות בשני חלקים:

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

הגדרת קונטיינר

אפשר להגדיר קונטיינר באמצעות המאפיין container-type.

.my-container-element {
  container-type: inline-size;
}

ה-container-type של inline-size מאפשר לכם לשלוח שאילתה לציר המוטבע של מאגר התגים.

כדי להריץ שאילתה על הצירים inline ו-block, משתמשים ב-container-type: size.

main,
.my-component {
  container-type: size;
}

שני הערכים של container-type מייצגים סוגים שונים של הגבלת גודל. המאפיין Inline-size containment ברכיב מונע מהצאצאים שלו להשפיע על גודל השורה שלו.

רכיב עם size containment מונע מהצאצאים שלו להשפיע על הגודל שלו גם בציר הבלוק וגם בציר ה-inline.

בדוגמה הזו אפשר לראות איך הגבלת הגודל יכולה להשפיע על הרכיב שמוגדרת לו הגבלה.

מכיוון שהגודל של הקונטיינר לא יוגדר לפי הגודל של רכיבי הבן שלו (הרכיב <p>), הוא יתכווץ אלא אם יוגדר לו גודל מפורש על ידי הגדרת המימדים שלו (כלומר, inline-size, ‏ block-size, ‏ aspect-ratio) או על ידי הצבתו בפריסה עם גודל מפורש.

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

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

• תכונת מידה: width,‏ height,‏ inline-size,‏ block-size,‏ aspect-ratio או orientation,
• אופרטור השוואה (כלומר, >, ‏ <, ‏ =, ‏ >=),
• וערך אורך.

.my-container-element {
  container-type: inline-size;
}

@container (inline-size > 30em) {
  .my-child-element {
    /* styles to apply when .my-container-element is wider than 30em */
  }
}

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

@container (orientation: landscape) {
  /*...*/
}

@container (min-width: 300px) {
  /*...*/
}

אפשר גם לשלב כמה תנאים באמצעות מילות מפתח כמו and ו-or, או לשרשר כמה תנאים באמצעות אופרטורים.

@container (inline-size > 40em) and (orientation: landscape)  {
  /*...*/
}

@container (height > 25vh) or (orientation: portrait) {
  /*...*/
}

@container ( 10em <= width <= 500px) {
  /*...*/
}

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

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

.sidebar {
  container-name: main-sidebar;
  container-type: inline-size;
}

@container main-sidebar (inline-size > 20em)  {
  .button-group {
    display: flex;
    padding-inline: 1.25em;
  }
}

המאגר עם השם חייב להיות עדיין רכיב אב של הרכיבים שמוגדרים להם סגנונות.

שימוש בקיצור דרך במאפיין container

המאפיין container מאפשר להשתמש בתחביר מקוצר כדי להגדיר מאגר ולציין את סוג המאגר.

.sidebar {
  container: main-sidebar / inline-size;
}

השם של הקונטיינר מופיע לפני הקו הנטוי, וסוג הקונטיינר מופיע אחריו.

יחידות של שאילתות בנוגע למאגר

בתוך מאגרי התגים יש לכם גם גישה ליחידות אורך יחסיות של מאגר התגים. כך יש יותר גמישות לרכיבים שיכולים להיות במיכלים שונים, כי האורכים היחסיים ישתנו בהתאם לממדים של המיכל.

כאן נעשה שימוש ביחידת האורך של מאגר התגים cqi (1% מהגודל של מאגר תגים מוטבע בשאילתה) לריווח הפנימי של הלחצן.

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

.one {
  inline-size: 30vw;
}

.two {
  inline-size: 50vw;
}

button {
  padding: 2cqi 5cqi;
}

לשני הלחצנים מוחלות אותן יחידות יחסיות, אבל מכיוון שהיחידות יחסיות לגודל של רכיב ה-container, ללחצן השני יש יותר ריווח פנימי כי רכיב ה-container שלו גדול יותר.

קינון של שאילתות בנוגע למאגר

אפשר להטמיע שאילתות של קונטיינרים בתוך סלקטורים.

.my-element {
  display: grid;
  padding: 1em 2em;

  @container my-container (min-inline-size: 22em) {
    /* styles to apply when element's container is wider than 22em */
  }
}

/* equivalent to */
.my-element {
  display: grid;
  padding: 1em 2em;
}

@container my-container (min-inline-size: 22em) {
  .my-element {
     /* styles to apply when element's is wider than 22em */
  }
}

אפשר גם להשתמש בהן בתוך שאילתות אחרות של גורמים מכילים או בתוך כללי at.

@container my-container (min-inline-size: 22em) {
  .my-element {
      /* styles to apply when element's is wider than 22em */
  }
}

@layer base {
  @container my-container (min-inline-size: 22em) {
    .my-element {
    /* styles to apply */
    }
  }
}

בדיקת ההבנה