فحص طلبات حاوية CSS وتصحيح الأخطاء فيها

يوضِّح لك هذا الدليل كيفية فحص طلبات البحث في حاوية CSS وتصحيح الأخطاء فيها في لوحة العناصر ضمن "أدوات مطوري البرامج في Chrome".

تسمح لك استعلامات حاوية CSS بمعالجة أنماط العنصر بناءً على خصائص الحاوية الرئيسية. تعمل هذه الإمكانية على تغيير مفهوم تصميم الويب السريع الاستجابة من المستند إلى الصفحة إلى المستند إلى الحاوية.

إنّ لقطات الشاشة الواردة في هذا الدليل مأخوذة من صفحة العرض التوضيحي هذه.

استكشاف الحاويات والعناصر التابعة لها

يظهر بجانب كل عنصر تم تحديده كحاوية طلب بحث شارة container في لوحة العناصر. تبدِّل الشارة بين تركيب خط منقط للحاوية وعناصرها التابعة.

لتبديل التراكب:

1. افتح "أدوات مطوري البرامج".
2. في لوحة العناصر، انقر على شارة 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" الأول:

1. في لوحة العناصر، اضبط عرض الحاوية على 500px. يظهر العنصر p.

2. اختيار العنصر p في جزء الأنماط، يمكنك الاطّلاع على بيان @container مع رابط يؤدّي إلى الحاوية الرئيسية article.card.

   

3. اضبط العرض على قيمة أكبر من 600px، ثم اختَر أيًّا من العناصر المتأثرة. يجب الالتزام ببيانات @container التي تستخدم تنسيقًا أفقيًا.

   

العثور على عناصر الحاوية

للعثور على عنصر حاوية أدّى إلى تنفيذ طلب البحث واختياره، مرِّر مؤشر الماوس فوق اسم العنصر وانقر عليه أعلى إعلان @container.

عند تمرير المؤشر فوقها، يتحول الاسم إلى رابط إلى العنصر في لوحة العناصر وتعرض لوحة الأنماط الخاصية التي تم الاستعلام عنها وقيمتها الحالية.

تعديل طلبات بحث الحاويات

لتصحيح أخطاء طلب بحث، يمكنك تعديله كأي تعريف CSS آخر في لوحة الأنماط كما هو موضَّح في عرض CSS وتغييرها.

في هذا المثال، يبلغ عرض الحاوية 500px. يظهر عنصر الفقرة (p) على الصفحة.

1. اختيار العنصر p في لوحة الأنماط. يمكنك الاطّلاع على بيان "@container (inline-size > 400px)".
2. تغيير inline-size من 400px إلى 520px
3. اختفاء عنصر الفقرة (p) من الصفحة لأنّه لم يستوفِ معايير طلب البحث.