استعلامات الحاوية و :has() هي تطابق تتم في سماء سريعة الاستجابة. لحسن الحظ، هاتان الميزتان تتوفّران معًا في Chromium 105. هذا إصدار ضخم يضم ميزتين مطلوبتين بشدة للواجهات المتجاوبة مع مختلف الأجهزة.
استعلامات الحاوية: ملخص سريع
تتيح طلبات البحث الخاصة بالحاويات للمطوّرين إرسال طلبات بحث إلى أداة اختيار رئيسية لمعرفة حجمها ونمطها، ما يتيح للعنصر الفرعي امتلاك منطقه للنمط سريع الاستجابة، بغض النظر عن مكان ظهوره على صفحة الويب.
أصبح بإمكان المطوّرين الآن الاستعلام عن حجم العناصر في الصفحة بدلاً من الاعتماد على إطار العرض لتحديد نمط إدخال، مثل المساحة المتاحة. تعني هذه الإمكانية أن المكون يمتلك منطق التصميم سريع الاستجابة. وهذا يجعل المكون أكثر مرونة إلى حد كبير، حيث يتم ربط منطق التصميم به، بغض النظر عن مكان ظهوره على الصفحة.
استخدام طلبات الحاوية
للإنشاء باستخدام استعلامات الحاوية، يجب عليك أولاً تعيين الاحتواء على عنصر رئيسي. يمكنك إجراء ذلك من خلال ضبط container-type في الحاوية الرئيسية. قد يكون لديك بطاقة تشتمل على صورة ومحتوى نصي على النحو التالي:
لإنشاء طلب بحث حاوية، اضبط container-type في حاوية البطاقة:
.card-container {
container-type: inline-size;
}
يؤدي ضبط container-type على inline-size إلى إرسال طلبات بحث إلى حجم الاتجاه المضمّن للعنصر الرئيسي. في اللغات اللاتينية مثل الإنجليزية، سيكون هذا هو عرض البطاقة، نظرًا لأن النص يتدفق من اليسار إلى اليمين.
والآن، يمكننا استخدام تلك الحاوية لتطبيق الأنماط على أي من عناصرها الثانوية باستخدام @container:
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
محدد الأصل :has()
من خلال الفئة الصورية :has() في CSS، يمكن للمطوّرين التحقّق ممّا إذا كان العنصر الرئيسي يحتوي على عناصر فرعية لها معلَمات معيّنة.
على سبيل المثال، تشير السمة p:has(span) إلى أداة اختيار الفقرة (p) التي تتضمّن علامة span بداخلها. يمكنك استخدام هذا لاختيار نمط للفقرة الرئيسية نفسها، أو نمط أي شيء داخلها. وأحد الأمثلة المفيدة هو figure:has(figcaption) لتصميم عنصر figure يحتوي على شرح. يمكنك الاطّلاع على مزيد من المعلومات حول ":has()" في هذه المقالة من تأليف "جاي تومبكينز".
طلبات البحث عن الحاوية و:has()
يمكنك دمج قوى التحديد الرئيسي لـ :has() مع صلاحيات الاستعلام الرئيسي لطلبات الحاوية لإنشاء بعض الأنماط الأساسية الديناميكية فعلاً.
دعنا نتوسع في المثال الأول باستخدام بطاقة الصاروخ. ماذا لو كان لديك بطاقة بدون صورة؟ ربما ترغب في زيادة حجم العنوان وضبط تخطيط الشبكة إلى عمود واحد بحيث يبدو أكثر تحديدًا بدون الصورة.
في هذا المثال، تحتوي البطاقة التي تحتوي على صورة على قالب شبكة من عمودين، في حين أن البطاقة التي لا تحتوي على الصورة لها تخطيط أحادي العمود. بالإضافة إلى ذلك، يكون للبطاقة التي لا تحتوي على الصورة عنوان أكبر. لكتابة هذا باستخدام :has()، استخدم لغة CSS التالية.
.card:has(.visual) {
grid-template-columns: 1fr 1fr;
}
أنت تبحث عن عنصر بفئة visual لتطبيق نمط العمودَين أعلاه. هناك دالة CSS أخرى أنيقة هي :not(). هذا جزء من مواصفات :has() نفسها ولكنه متاح منذ فترة أطول ويتوافق مع المتصفّح بشكل أفضل. يمكنك أيضًا الجمع بين :has() و:not()، كما يلي:
.card:not(:has(.visual)) h1 {
font-size: 4rem;
}
في الرمز البرمجي أعلاه، أنت تكتب أداة اختيار تحدّد نمط h1 داخل بطاقة لا تحتوي على فئة visual. وهذه هي طريقة ضبط حجم الخط بوضوح شديد.
خلاصة ما سبق ذكره
يعرض العرض التوضيحي أعلاه مزيجًا من :has() و:not() و@container، ولكن طلبات البحث المتعلّقة بالحاويات تظهر بوضوح عندما تتمكّن من رؤية العنصر نفسه المستخدَم في أماكن متعددة. لنضيف لمسة من التصميم ونعرض هذه البطاقات في شبكة جنبًا إلى جنب.
يمكنك الآن معرفة مدى فعالية صفحات الأنماط المتتالية (CSS) الحديثة. بإمكاننا كتابة أنماط واضحة باستخدام أنماط موجَّهة تستند إلى المنطق وتنشئ مكونات قوية للغاية. مع دخول هاتين الميزتين الفعالتين إلى الإصدار 105 من Chromium وزخم الدعم عبر المتصفحات، حان الوقت لتصبح مطوّر واجهة مستخدم رائعة.