تكييف المكوّنات الدلالية

استخدِم طلبات البحث عن الأنماط (@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. يُفضَّل استخدام طلبات البحث عن الأنماط بدلاً من أدوات اختيار العناصر التابعة عندما يجب أن تظل العلاقة قابلة للتوسيع أو تتجاوز حدود المكوّنات أو نموذج العناصر في المستند (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;
  }
}

الاستراتيجيات الاحتياطية

إلى أن تصبح طلبات البحث عن نمط الحاوية متاحة على نطاق واسع، يمكنك استخدامها كتحسين تدريجي: يمكنك توفير خيار تلقائي يستند إلى أداة الاختيار ويعمل في كل مكان، والسماح لطلب البحث عن النمط بإلغائه عندما يكون متاحًا. استخدِم :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().