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