התאמה של רכיבים סמנטיים

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

לדוגמה, כלל section.featured { --surface: featured } יכול לסמן הקשר, ודף נחיתה יכול גם להגדיר אותו כברירת מחדל באמצעות main { --surface: featured }. הרכיבים מגיבים ל---surface: featured: בכרטיס מופיע תג קידום מכירות, כפתור מוגדר כברירת מחדל לגרסה המלאה שלו וכן הלאה.

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

מתי כדאי להשתמש במדריך הזה

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

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

בחירת הכלי המתאים

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

• בוררים של צאצאים (.toolbar .button): קשר קבוע וחד-פעמי שלא ניתן לשימוש חוזר או להרחבה. העיקרון YAGNI חל – אל תוסיפו הפניה עקיפה שלא תשתמשו בה.
• שאילתות גודל (@container (min-width: …)): שינויים בפריסה ובצפיפות שנובעים מהמקום הפנוי, ולא מהמצב הסמנטי.
• שאילתות סגנון (@container style(…)): מצב סמנטי – מה רכיב צריך לעבד, לסדר או להציג בהקשר נתון.

הוראות להטמעה

1. מגדירים דגל הקשר סמנטי באמצעות מאפיין CSS מותאם אישית בקונטיינר.
2. אל תגדירו את container-type לשאילתות סגנון. הן שולחות שאילתות למאפיינים מותאמים אישית שעברו בירושה מהרכיב הקרוב ביותר, ולא דורשות הקשר הכלה מפורש.
3. חובה: משתמשים ב-@container style(--property: value) כדי להחיל עיצוב מותנה על רכיבים צאצאים. שאילתות סגנון לא יכולות להתאים לרכיב שהמאפיין מוגדר בו, אלא רק לרכיבים הצאצאים שלו.
4. מומלץ להעדיף שאילתות סגנון על פני בוררי צאצאים כשהקשר צריך להישאר ניתן להרחבה או לחצות גבולות של רכיבים או של Shadow DOM (ראו בחירת הכלי המתאים למעלה) – אבל כדאי להשאיר בוררי צאצאים לקשרים קבועים וחד-פעמיים שבהם ההפניה העקיפה לא מועילה.

דוגמה להטמעה

/* 1. Set the context on a layout container */
.featured {
  --surface: featured; /* Semantic context flag for children */
}

/* 2. Component reacts to inherited flag */
.button {
  /* Default: Outlined informational style */
  background: transparent;
  border: 1px solid currentColor;
}

.badge {
  /* Default: Hidden — only revealed in featured surfaces */
  display: none;
}

@container style(--surface: featured) {
  .button {
    /* Automatic switch to Filled promotional style */
    background: var(--brand-accent);
    color: white;
    border: none;
  }

  .badge {
    /* Reveal decorative elements only in featured context */
    display: block;
  }
}

שיטות חלופיות

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

/* Default styles — work everywhere */
.button {
  background: transparent;
  border: 1px solid currentColor;
}

.badge {
  display: none;
}

/* Selector-based contextual styles — broad browser support */
:where(.featured) .button {
  background: var(--brand-accent);
  color: white;
  border: none;
}

:where(.featured) .badge {
  display: block;
}

/* Progressive enhancement: style queries override when supported */
@container style(--surface: featured) {
  .button {
    background: var(--brand-accent);
    color: white;
    border: none;
  }

  .badge {
    display: block;
  }
}

הסלקטור החלופי מקשר את הסגנון לפי ההקשר לשם של מחלקה, שמקשרת את הרכיב למיקום שלו ב-DOM. אחרי ששאילתות סגנון ייתמכו באופן נרחב, אפשר יהיה להסיר את הכלל :where().