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