مجموعات المحدّدات وقواعد @-rule

المشكلة

غالبًا ما نحتاج إلى دمج معايير فلترة من أنواع مختلفة، مثل أدوات الاختيار والاستعلامات عن الوسائط، والاستعلامات عن الوسائط والاستعلامات عن الحاويات، وما إلى ذلك.

على سبيل المثال، يمكنك دمج (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;
  }
}