תגובתיות של טוקן עיצוב

רקע וסקירה כללית

לעיתים קרובות, יוצר התוכן צריך לבצע שינויים בהקשר של עיצוב הרכיב. בעבר, יוצרים היו צריכים להשתמש בבוררים כדי להחיל שינויים כאלה. לכן, לעיתים קרובות, בעוד שרבים מהאסימונים לעיצוב יכולים להתקיים כמאפיינים מותאמים אישית, אסימונים לעיצוב מסדר גבוה יותר יכולים להיות מקודדים רק כתבנית בורר (כלומר, באמצעות שם מחלקה או מוסכמה של מאפיינים) או כמאפיינים/הקשר ב-JavaScript framework.

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

איך מטמיעים

הטמעה של אסימון עיצוב תגובתי באמצעות שאילתת סגנון של מאגר היא די פשוטה:

1. מגדירים את אסימון העיצוב מסדר גבוה יותר כמאפיין מותאם אישית במאגר. המאפיין הזה לא חייב להיות מאפיין מותאם אישית רשום.
2. משתמשים בכלל @container style() כדי לשלוח שאילתה לגבי הערך של המאפיין המותאם אישית הזה.
3. מחילים את הסגנונות המתאימים על רכיב צאצא בתוך מאגר התגים.

כמה דברים שחשוב לזכור:

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

הדוגמה הבסיסית הבאה ממחישה את שלבי ההטמעה שצוינו למעלה.

<div class="features">
  <div class="card"></div>
  <div class="card"></div>
</div>
<div class="bugs">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

.features {
  --density: spacious;
}

.bugs {
  --density: compact;
}

@container style(--density: compact) {
  .card {
    padding: 8px;
  }
}

@container style(--density: spacious) {
  .card {
    padding: 24px;
  }
}

אסטרטגיות חלופיות

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

שימוש בבוררים במקום זאת

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

<div class="features" data-density="spacious">
  <div class="card"></div>
  <div class="card"></div>
</div>
<div class="bugs" data-density="compact">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

/* This example uses `:where()` to avoid increasing specificity */
:where([data-density="compact"]) .card {
  padding: var(--card-padding-compact);
}

:where([data-density="spacious"]) .card {
  padding: var(--card-padding-spacious);
}

מגבלה משמעותית של הגישה החלופית הזו היא שהיא לא תומכת ברכיבי הטמעה עם קבוצת המאפיינים data-density. מכיוון שהספציפיות של הסלקטור זהה, סדר ההופעה ישמש לקביעת הסגנונות (כלומר, ל-[data-density="spacious"] תמיד תהיה עדיפות על פני [data-density="compact"]).

שימוש בשאילתות סגנון כשיפור הדרגתי (progressive enhancement)

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

.card {
  --card-padding-compact: 8px;
  --card-padding-spacious: 24px;
}

:where([data-density="compact"]) .card {
  padding: var(--card-padding-compact);
}

:where([data-density="spacious"]) .card {
  padding: var(--card-padding-spacious);
}

/* Use style queries as a progressive enhancement: same specificity, so order of appearance is used */

@container style(--density: compact) {
  .card {
    padding: var(--card-padding-compact);
  }
}

@container style(--density: spacious) {
  .card {
    padding: var(--card-padding-spacious);
  }
}

בדיקת תכונות באמצעות CSS בלבד

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

:root {
  --style-queries-supported: check;
}

.density-toggle {
  display: none;
}

@container style(--style-queries-supported) {
  .density-toggle {
    display: revert;
  }
}

בדיקת תכונות באמצעות JavaScript

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

בדוגמה הזו נעשה שימוש במאפיין מותאם אישית כי לא תהיה לו השפעה חזותית:

:root {
  --style-queries-supported: check;
}

@container style(--style-queries-supported: check) {
  body {
    --style-queries-supported: yes;
  }
}

לאחר מכן בודקים את הערך המחושב ב-JavaScript באופן הבא:

if (getComputedStyle(document.body).getPropertyValue("--style-queries-supported") === "yes") {
  // Use container style queries
} else {
  // Use fallback strategy
}