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

Sofia Emelianova

Jecelyn Yeen

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

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

تم أخذ لقطات الشاشة الواردة في هذا الدليل من هذه الصفحة التجريبية.

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

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

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

1. افتح "أدوات مطوري البرامج".
2. في لوحة Elements، انقر على شارة container بجانب العنصر المحدّد كحاوية.

في هذا المثال، تحدد السمة container-type: inline-size عنصر الحاوية. يمكن للعناصر التابعة الاستعلام عن البُعد المضمّن (المحور الأفقي) وتغيير أنماطها بناءً على عرض الحاوية.

فحص طلبات الحاويات

تعرض لوحة Elements تعريفات @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. في لوحة Elements، اضبط عرض الحاوية على 500px. سيظهر العنصر p.

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

   

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

   

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

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

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

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

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

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

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