بدء استخدام استعلامات الأنماط

Una Kravets

أصبحت إمكانية طلب بيانات الحجم المضمّن للعنصر الرئيسي وقيم وحدة طلب بيانات الحاوية متاحة مؤخرًا بشكل ثابت في جميع محرّكات المتصفّحات الحديثة.

ومع ذلك، تتضمن مواصفات الاحتواء أكثر من مجرد طلبات بحث الحجم، وإنما يمكّن أيضًا الاستعلام عن قيم النمط الأصل. بدءًا من Chromium 111، ستتمكن من تطبيق احتواء النمط على قيم الخصائص المخصصة والاستعلام عن عنصر رئيسي لقيمة خاصية مخصصة.

وهذا يعني أن لدينا مزيدًا من التحكم المنطقي في الأنماط في CSS، ويتيح فصلاً أفضل لمنطق التطبيق وطبقة البيانات عن أنماطه.

تسمح مواصفات المستوى 3 لوحدة احتواء CSS، التي تغطي طلبات البحث المتعلقة بالحجم والنمط، بأي أنماط من خلال نموذج رئيسي، بما في ذلك أزواج الخصائص والقيمة مثل font-weight: 800. ومع ذلك، في مرحلة طرح هذه الميزة، لا تعمل طلبات البحث عن الأنماط حاليًا إلا مع قيم السمات المخصّصة في CSS. لا يزال هذا مفيدًا جدًا لدمج الأنماط وفصل البيانات عن التصميم. لنلقِ نظرة على كيفية استخدام طلبات الأنماط مع السمات المخصّصة لتنسيق CSS:

بدء استخدام طلبات البحث عن الأنماط

لنفترض أنّ لدينا رمز HTML التالي:

<ul class="card-list">
  <li class="card-container">
    <div class="card">
      ...
    </div>
  </li>
</ul>

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

طلب معلومات من الحسابات الرئيسية

على عكس طلبات البحث عن الأنماط، لا تحتاج إلى تطبيق الحصر باستخدام السمة container-type أو container على .card-container لكي يتمكّن .card من طلب الأنماط من العنصر الرئيسي المباشر. مع ذلك، علينا تطبيق الأنماط (قيم السمات المخصّصة في هذه الحالة) على حاوية (.card-container في هذه الحالة) أو أي عنصر يحتوي على العنصر المطلوب تصميمه في DOM. لا يمكننا تطبيق الأنماط التي نستفسر عنها على العنصر المباشر الذي نصممه باستخدام هذا الاستعلام لأن هذا قد يتسبب في تكرارات لانهائية.

للاستعلام عن أحد الوالدين مباشرةً، يمكنك كتابة:

/* styling .card based on the value of --theme on .card-container */
@container style(--theme: warm) {
  .card {
    background-color: wheat;
    border-color: brown; 
    ...
  }
}

ربما لاحظت أنّ طلب البحث عن الأسلوب يحيط بالطلب بـ style(). الهدف من ذلك هو إزالة غموض قيم المقاس من الأنماط. على سبيل المثال، يمكنك كتابة طلب بحث عن عرض الحاوية كـ @container (min-width: 200px) { … }. وسيؤدي هذا إلى تطبيق الأنماط إذا كان عرض الحاوية الرئيسية لا يقل عن 200 بكسل. ومع ذلك، يمكن أن تكون min-width أيضًا سمة CSS، ويمكنك إجراء طلب بحث عن قيمة CSS للسمة min-width باستخدام استعلامات الأنماط. لهذا السبب، يمكنك استخدام عنصر التغليف style() لتوضيح الفرق: @container style(min-width: 200px) { … }.

تصميم العناصر الرئيسية غير المباشرة

إذا كنت تريد طلب الأنماط لأي عنصر ليس عنصرًا رئيسيًا مباشرًا، عليك منح هذا العنصر container-name. على سبيل المثال، يمكننا تطبيق أنماط على .card استنادًا إلى أنماط .card-list من خلال منح .card-list container-name والإشارة إليها في طلب الأنماط.

/* styling .card based on the value of --moreGlobalVar on .card-list */
@container cards style(--moreGlobalVar: value) {
  .card {
    ...
  }
}

من أفضل الممارسات بشكل عام إعطاء أسماء حاوياتك لتوضيح ما تبحث عنه وإتاحة إمكانية الوصول إلى تلك الحاويات بسهولة أكبر. من الأمثلة على الحالات التي يكون فيها ذلك مفيدًا هو إذا كنت تريد تصميم عناصر داخل .card مباشرةً. بدون حاوية مُسمّاة على .card-container، لا يمكنهم طلب البحث عنها مباشرةً.

لكن كل هذا له معنى أكبر في الممارسة العملية. لنلقِ نظرة على بعض الأمثلة:

أمثلة على طلبات البحث عن الأنماط

تكون استعلامات الأنماط مفيدة بشكل خاص عندما يكون لديك مكوِّن قابل لإعادة الاستخدام بأشكال متعددة، أو عندما لا تكون لديك القدرة على التحكم في جميع الأنماط ولكن تحتاج إلى تطبيق تغييرات في حالات معينة. يعرض هذا المثال مجموعة من بطاقات المنتجات التي تتشارك مكوّن البطاقة نفسه. تحتوي بعض بطاقات المنتجات على تفاصيل/ملاحظات إضافية، مثل "جديد" أو "مخزون منخفض"، يتم تشغيلها من خلال سمة مخصّصة باسم --detail. بالإضافة إلى ذلك، إذا كان المنتج "متوفّر بكميات محدودة"، يظهر له خلفية حدودها حمراء داكنة. من المرجّح أن يتم عرض هذا النوع من المعلومات من خلال الخادم، ويمكن تطبيقه على البطاقات من خلال الأنماط المضمّنة على النحو التالي:

 <div class="product-list">
  <div class="product-card-container" style="--detail: new">
    <div class="product-card">
      <div class="media">
        <img .../>
      <div class="comment-block"></div>
    </div>
  </div>
  <div class="meta">
    ...
  </div>
  </div>
  <div class="product-card-container" style="--detail: low-stock">
    ...
  </div>
  <div class="product-card-container">
    ...
  </div>
  ...
</div>

بناءً على هذه البيانات المنظَّمة، يمكنك تمرير القيم إلى --detail واستخدام هذه السمة المخصّصة في CSS لتطبيق الأنماط:

@container style(--detail: new) {
  .comment-block {
    display: block;
  }
  
  .comment-block::after {
    content: 'New';
    border: 1px solid currentColor;
    background: white;
    ...
  }
}

@container style(--detail: low-stock) {
  .comment-block {
    display: block;
  }
  
  .comment-block::after {
    content: 'Low Stock';
    border: 1px solid currentColor;
    background: white;
    ...
  }
  
  .media-img {
    border: 2px solid brickred;
  }
}

يسمح لنا الرمز أعلاه بتطبيق شريحة على --detail: low-stock و--detail: new، ولكن قد تكون لاحظت بعض التكرار في كتلة الرمز. وفي الوقت الحالي، ليست هناك طريقة لطلب البحث فقط عن وجود --detail باستخدام @container style(--detail)، ما يسمح بمشاركة أفضل للأنماط وتقليل التكرار. هذه الميزة قيد المناقشة حاليًا في مجموعة العمل.

بطاقات الطقس

استخدم المثال السابق خاصية مخصصة واحدة تضم عدة قيم محتملة لتطبيق الأنماط. ولكن يمكنك مزجها باستخدام مواقع مخصصة متعددة والاستعلام عنها أيضًا. خذ مثال بطاقة الطقس هذا:

لتصميم تدرّجات الخلفية والرموز لهذه البطاقات، ابحث عن خصائص الطقس، مثل "غائم" أو "مطر" أو "مشمس":

@container style(--sunny: true) {
  .weather-card {
    background: linear-gradient(-30deg, yellow, orange);
  }
  
  .weather-card:after {
    content: url(<data-uri-for-demo-brevity>);
    background: gold;
  }
}

بهذه الطريقة، يمكنك تصميم كل بطاقة استنادًا إلى خصائصها الفريدة. ويمكنك أيضًا وضع نماذج لمجموعات الخصائص (الخاصية المخصّصة) باستخدام أداة التجميع and بالطريقة نفسها المستخدَمة في طلبات البحث عن الوسائط. على سبيل المثال، قد يبدو يوم غائم ومشمس على النحو التالي:

@container style(--sunny: true) and style(--cloudy: true) {
    .weather-card {
      background: linear-gradient(24deg, pink, violet);
    }
  
  .weather-card:after {
      content: url(<data-uri-for-demo-brevity>);
      background: violet;
  }
}

فصل البيانات عن التصميم

وفي كلا العرضَين التجريبيَين، هناك فائدة بنيوية لفصل طبقة البيانات (نموذج كائن المستند (DOM) الذي سيتم عرضه على الصفحة) عن الأنماط المطبَّقة. تتم كتابة الأنماط بوصفها متغيرات محتملة تعيش ضمن نمط المكونات، بينما يمكن لنقطة النهاية إرسال البيانات التي ستستخدمها بعد ذلك لتصميم المكون من خلالها. يمكنك استخدام قيمة واحدة، مثل الحالة الأولى، أو تعديل قيمة --detail، أو متغيّرات متعدّدة، مثل الحالة الثانية (ضبط --rainy أو --cloudy أو --sunny). وأفضل ما في الأمر هو أنه يمكنك دمج هذه القيم أيضًا، إذ يمكن أن يظهر نمط غائم جزئيًا عند البحث عن كل من --sunny و--cloudy.

يمكن تعديل قيم السمات المخصّصة من خلال JavaScript بسلاسة، إمّا أثناء إعداد نموذج نموذج العناصر في المستند (DOM) (أي أثناء إنشاء المكوِّن في إطار عمل) أو في أي وقت باستخدام <parentElem>.style.setProperty('--myProperty’, <value>). I

في ما يلي عرض توضيحي، في بضعة أسطر من الرموز البرمجية، يتم تعديل --theme للزر، وتطبيق الأنماط باستخدام طلبات البحث الخاصة بالأنماط وتلك السمة المخصّصة (--theme):

يمكنك تصميم البطاقة باستخدام طلبات بحث الأنماط، وإليك رمز JavaScript المستخدَم لتعديل قيم السمات المخصّصة:

const themePicker = document.querySelector('#theme-picker')
const btnParent = document.querySelector('.btn-section');

themePicker.addEventListener('input', (e) => {
  btnParent.style.setProperty('--theme', e.target.value);
})

إنّ الميزات الموضّحة بالتفصيل في هذه المقالة ليست سوى البداية. يمكنك أن تتوقع المزيد من العناصر من طلبات البحث في الحاويات لمساعدتك في إنشاء واجهات ديناميكية وسريعة الاستجابة. وبالنسبة إلى طلبات البحث المتعلّقة بالأنماط على وجه التحديد، لا تزال هناك بعض المشاكل المفتوحة. الأول هو تنفيذ طلبات بحث الأنماط لأنماط CSS بخلاف الخصائص المخصصة. هذه الميزة جزء من مستوى المواصفات الحالي، ولكن لم يتم تنفيذها بعد في أي متصفّحات. من المتوقّع أن تتم إضافة تقييم السياق المنطقي إلى مستوى المواصفات الحالي بعد حلّ المشكلة العالقة، بينما يتم التخطيط لإجراء البحث عن النطاق للانتقال إلى المستوى التالي من المواصفات.