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

Sofia Emelianova

Jecelyn Yeen

يوضِّح لك هذا الدليل كيفية فحص طلبات البحث في حاويات 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) من الصفحة لأنه لم يستوفِ معايير طلب البحث.