تفاعلية رموز التصميم

معلومات أساسية ونظرة عامة

غالبًا ما يحتاج المؤلّف إلى إجراء تغييرات سياقية على تصميم أحد المكوّنات. في السابق، كان على المؤلفين استخدام أدوات الاختيار لتطبيق هذه التغييرات. وهذا يعني في كثير من الأحيان أنه على الرغم من أن العديد من رموز التصميم الخاصة بهم يمكن أن توجد كخصائص مخصصة، إلا أن رموز التصميم ذات الترتيب الأعلى لا يمكن ترميزها إلا كنمط محدد (أي باستخدام اسم فئة أو سمة) أو كخصائص/سياق في إطار عمل JavaScript.

تتيح طلبات البحث عن نمط الحاوية للمؤلفين تصميم العناصر استنادًا إلى قيمة السمة المخصّصة المحسوبة لعنصر سابق. هذا يعني أنّه يمكن للمؤلفين كتابة قيم رموز تصميم مفيدة ضمن أوراق الأنماط بدلاً من الاعتماد على الترميز أو 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"]).

استخدام طلبات البحث عن الأنماط كتحسين تدريجي

على الرغم من أنّنا لا ننصح بذلك، إذا أردت استخدام طلبات البحث عن الأنماط كتحسين تدريجي لميزة أساسية، يمكنك إنشاء بعض الخصائص المخصّصة لتجنُّب التكرار، ثم تضمين طلبات البحث عن الأنماط بعد ذلك. تأكَّد من أنّ النهج الاحتياطي يستخدم :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
}