שילובים של סלקטורים וכללי @‎

הבעיה

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

לדוגמה, שילוב של (prefers-color-scheme: dark) עם בורר שמטרגט שינויים בערכת הצבעים (למשל :root:has(> head > meta[name="color-scheme"][content="dark"]) או :root.dark) כדי להחיל סגנונות מסוימים במצב בהיר או כהה, בלי קשר לאופן שבו ערכת הצבעים הוגדרה.

הגישה הנאיבית מובילה לקוד משוכפל:

/* Light mode styles */
.card.featured {
  font-weight: 400;
}

#logo-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  /* Dark mode styles */
  :root:not(.light) {
    .card.featured {
      font-weight: 300;
    }

    #logo-dark {
      display: inline;
    }

    #logo {
      display: none;
    }
  }
}

/* Dark mode styles, again */
:root.dark {
  .card.featured {
    font-weight: 300;
  }

  #logo-dark {
    display: inline;
  }

  #logo {
    display: none;
  }
}

מה לעשות במקום זאת

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

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

1. הפרדת הלוגיקה של הבחירה מהכללים שהוחלו

:root {
  --color-scheme: light;

  @media (prefers-color-scheme: dark) {
    --color-scheme: dark;
  }

  &:has(> head > meta[name="color-scheme"][content="dark"]) {
    --color-scheme: dark;
  }

  &:has(> head > meta[name="color-scheme"][content="light"]) {
    --color-scheme: light;
  }
}

2. מפתח במאפיין המותאם אישית לכללים שהוחלו

@container not style(--color-scheme: dark) {
  .card.featured {
    font-weight: 400;
  }

  #logo-dark {
    display: none;
  }
}

@container style(--color-scheme: dark) {
  .card.featured {
    font-weight: 300;
  }

  #logo {
    display: none;
  }
}

3. אופציונלי: מחלקות שירות להחלפת מצב החשיפה

מקרה נפוץ מאוד הוא החלפת מצב החשיפה על סמך התאמה לקריטריונים. מחלקות של כלי שירות צריכות לנצח סגנונות של רכיבים שרירותיים (לכן !important) וה-display המוצג שלהן לא ידוע, כך שהן לא יכולות להשתמש בשינויים – צריך להגביל אותן באמצעות not style(...):

@container not style(--color-scheme: dark) {
  .if-dark {
    display: none !important;
  }
}

@container not style(--color-scheme: light) {
  .if-light {
    display: none !important;
  }
}

חלופות

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

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

#logo-dark {
  display: none;
}

@container style(--color-scheme: dark) {
  #logo-dark {
    display: inline; /* override */
  }

  #logo {
    display: none;
  }
}