استعلامات الحاوية و :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()
تتيح الفئة الزائفة في CSS :has() للمطوّرين التحقّق مما إذا كان العنصر الرئيسي يحتوي على عناصر ثانوية بمَعلمات معيّنة.
على سبيل المثال، تشير السمة p:has(span) إلى أداة اختيار الفقرة (p)، التي تحتوي على span داخلها. يمكنك استخدام هذا لاختيار نمط للفقرة الرئيسية نفسها، أو تصميم أي نمط داخلها. من الأمثلة المفيدة استخدام figure:has(figcaption) لتصميم عنصر figure يحتوي على شرح. يمكنك معرفة المزيد حول :has() في هذه المقالة بقلم Jhey Tompkins.
طلبات البحث عن الحاويات و:has()
يمكنك الجمع بين إمكانات التحديد الرئيسية لـ :has() وإمكانيات الاستعلام الرئيسية لطلبات بحث الحاويات لإنشاء بعض الأنماط الأساسية الديناميكية حقًا.
دعنا نتوسع في المثال الأول المتعلق ببطاقة الصاروخ. ماذا لو كانت لديك بطاقة بدون صورة؟ ربما ترغب في زيادة حجم العنوان وضبط تخطيط الشبكة على عمود واحد بحيث يبدو أكثر تعمدًا بدون الصورة.
في هذا المثال، تحتوي البطاقة التي تحتوي على صورة على نموذج شبكة من عمودين، في حين أن البطاقة التي لا تحتوي على صورة لها تخطيط أحادي العمود. بالإضافة إلى ذلك، يكون عنوان البطاقة التي لا تتضمّن صورة أكبر. لكتابة هذا باستخدام :has()، استخدم CSS التالية.
.card:has(.visual) {
grid-template-columns: 1fr 1fr;
}
أنت تبحث عن عنصر بفئة visual لتطبيق النمط المكوَّن من عمودين أعلاه. تعد :not() دالة CSS أنيقة أخرى. هذه الميزة جزء من نفس مواصفات :has()، ولكنها موجودة منذ وقت أطول وتتوفر فيها متوافق أفضل مع المتصفحات. يمكنك أيضًا دمج :has() و:not()، كما يلي:
.card:not(:has(.visual)) h1 {
font-size: 4rem;
}
في الرمز البرمجي أعلاه، أنت تكتب محدِّدًا يصمّم h1 داخل بطاقة لا تحتوي على فئة visual. هذه هي الطريقة التي يمكنك من خلالها ضبط حجم الخط بوضوح.
خلاصة ما سبق ذكره
يعرض العرض التوضيحي السابق مجموعة من :has() و:not() و@container، إلا أنّ طلبات البحث عن الحاويات تتألق عندما يكون بإمكانك الاطّلاع على العنصر نفسه المستخدَم في أماكن متعدّدة. لنضيف لمسة من التصميم ونعرض هذه البطاقات على شكل شبكة بجانب بعضها البعض.
يمكنك الآن معرفة مدى فعالية CSS الحديث. يمكننا كتابة أنماط واضحة باستخدام أنماط مستهدفة تبني المنطق في أعلى المنطق وتنشئ مكونات قوية حقًا. مع هاتين الميزتين القويتين عند وصولهما إلى Chromium 105 واكتساب زخم من الدعم عبر المتصفحات، فإن هذا وقت مثير أن تكون مطورًا لواجهة المستخدم!