يوضِّح لك هذا الدليل كيفية فحص طلبات البحث في حاوية CSS وتصحيح الأخطاء فيها في لوحة العناصر ضمن "أدوات مطوري البرامج في Chrome".
تسمح لك استعلامات حاوية CSS بمعالجة أنماط العنصر بناءً على خصائص الحاوية الرئيسية. تعمل هذه الإمكانية على تغيير مفهوم تصميم الويب السريع الاستجابة من المستند إلى الصفحة إلى المستند إلى الحاوية.
إنّ لقطات الشاشة الواردة في هذا الدليل مأخوذة من صفحة العرض التوضيحي هذه.
استكشاف الحاويات والعناصر التابعة لها
يظهر بجانب كل عنصر تم تحديده كحاوية طلب بحث شارة container
في لوحة العناصر. تبدِّل الشارة بين تركيب خط منقط للحاوية وعناصرها التابعة.
لتبديل التراكب:
- افتح "أدوات مطوري البرامج".
- في لوحة العناصر، انقر على شارة
container
بجانب العنصر المعرَّف كحاوية.
في هذا المثال، تُحدِّد السمة container-type: inline-size
عنصر الحاوية. يمكن للعناصر التابعة الاستعلام عن البُعد المضمّن (المحور الأفقي) وتغيير أنماطها استنادًا إلى عرض الحاوية.
فحص طلبات بحث الحاويات
تعرض لوحة العناصر عدد @container
من إعلانات طلب البحث عند تطبيقها على عنصر تابع، أي عندما تستوفي الحاوية شرط طلب البحث.
لمعرفة متى يمكنك فحص بيانات @container
في هذه الصفحة التجريبية، يمكنك فحص الرمز البرمجي التالي:
@container (inline-size > 400px) {
.coffee p {
display: block;
}
}
@container (inline-size > 600px) {
.coffee {
display: grid;
grid-template-columns: 280px auto;
}
.coffee h1 {
grid-column: 1/3;
}
.coffee img {
grid-row: 2/4;
}
في هذا المثال، إذا تجاوز عرض الحاوية عدد وحدات البكسل التالي، يتم تطبيق الأنماط المتوافقة:
- أكثر من
400px
: يظهر عنصر الفقرة (p
) على الصفحة ككتلة، ويبدأ في سطر جديد ويشغل العرض الكامل. - أكثر من
600px
: تستخدم الوحدات التابعة تنسيق شبكة أفقيًا مع العنوان (h1
) في الأعلى والصورة (img
) على اليسار.
لفحص بيان "@container
" الأول:
- في لوحة العناصر، اضبط عرض الحاوية على
500px
. يظهر العنصرp
. اختيار العنصر
p
في جزء الأنماط، يمكنك الاطّلاع على بيان@container
مع رابط يؤدّي إلى الحاوية الرئيسيةarticle.card
.اضبط العرض على قيمة أكبر من
600px
، ثم اختَر أيًّا من العناصر المتأثرة. يجب الالتزام ببيانات@container
التي تستخدم تنسيقًا أفقيًا.
العثور على عناصر الحاوية
للعثور على عنصر حاوية أدّى إلى تنفيذ طلب البحث واختياره، مرِّر مؤشر الماوس فوق اسم العنصر وانقر عليه أعلى إعلان @container
.
عند تمرير المؤشر فوقها، يتحول الاسم إلى رابط إلى العنصر في لوحة العناصر وتعرض لوحة الأنماط الخاصية التي تم الاستعلام عنها وقيمتها الحالية.
تعديل طلبات بحث الحاويات
لتصحيح أخطاء طلب بحث، يمكنك تعديله كأي تعريف CSS آخر في لوحة الأنماط كما هو موضَّح في عرض CSS وتغييرها.
في هذا المثال، يبلغ عرض الحاوية 500px
. يظهر عنصر الفقرة (p
) على الصفحة.
- اختيار العنصر
p
في لوحة الأنماط. يمكنك الاطّلاع على بيان "@container (inline-size > 400px)
". - تغيير
inline-size
من400px
إلى520px
- اختفاء عنصر الفقرة (
p
) من الصفحة لأنّه لم يستوفِ معايير طلب البحث.