استعلامات حاوية CSS: إحداث ثورة في التصميم المستجيب

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

استعلامات الحاويات مقابل استعلامات الوسائط في العرض

يعتمد التصميم التقليدي المستجيب للمنفذ على نقاط التوقف المرتبطة بأحجام الأجهزة المبسطة (الجوال ، الكمبيوتر اللوحي ، سطح المكتب) ، وغالبًا ما يقترن بشبكة تخطيط. هذا النهج يكافح مع القدرة على التكيف المكون الفردي ؛ قد تتكيف العناصر الكبيرة بشكل منفصل ، ولكن بشكل عام تتبع نقاط التوقف العالمية.

تقدم استفسارات الحاويات حلاً متفوقًا. توضح الصورة التالية مكون بطاقة مصممة مع استعلامات الحاويات ، مستقلة تمامًا عن حجم منفذ العرض. يتكيف مظهر البطاقة ديناميكيًا مع مساحتها المتاحة.

ملاحظة: يوجد دعم متصفح واسع لاستفسارات الحاويات منذ Firefox 110. تتوفر polyfills للمتصفحات القديمة.

تحديد استعلامات الحاوية

لاستخدام استعلامات الحاويات ، أعلن أولاً عن عنصر كحاوية باستخدام خاصية

من نوع الحاوية . inline-size (تعادل العرض في أوضاع الكتابة الأفقية) هي القيمة الأكثر شيوعًا ودعمًا على نطاق واسع:

.container {
  container-type: inline-size;
}

التالي ، استخدم

@Container at-rule لتحديد الاستعلام. يضع المثال التالي اللون H2 إلى اللون الأزرق عندما تكون حاويةها 40CH أو أكبر:

@container (min-width: 40ch) {
  h2 {
    color: blue;
  }
}

للحصول على توافق أوسع عبر أوضاع الكتابة ، استخدم الخصائص المنطقية:

@container (inline-size > 40ch) {
  h2 {
    color: blue;
  }
}

ما وراء

inline-size ، تشمل الخيارات block-size و راجع المواصفات الرسمية لمزيد من التفاصيل.

ترقية مكون بطاقة: مثال عملي

بدون استفسارات الحاويات ، فإن اختلافات البطاقات تتضمن عادة فئات تعديل مرتبطة بعرض نقاط توقف المنفذ. تعرض الصورة أدناه ثلاثة أحجام بطاقات وفئاتها المقابلة.

[CodePen Demo: Viewport Media Query Cards] (رابط إلى CodePen)

باستخدام استعلامات الحاويات ، نحافظ على نمط البطاقة الافتراضي (للمتصفحات غير المدعومة) ونحدد أنماطًا إضافية بناءً على عرض الحاوية:

350px أو أكبر: التصميم الأفقي

• 600px أو أكبر: صورة كخلفية

[CodePen Demo: استعلامات الحاويات للبطاقات] (رابط إلى CodePen)

هذا المقتطف هو من

يطلقون قوة CSS: التقنيات المتقدمة لواجهات المستخدم المستجيبة

، متوفرة على قسط SitePoint.

مفتاح الوجبات السريعة:

توفر استعلامات الحاويات استجابة على مستوى المكونات.

• يتم تعريفها باستخدام
نوع الحاوية
• و @Container . الخصائص المنطقية تعزز توافق وضع الكتابة المتقاطعة.
• أنها توفر مقاربة أكثر مرونة وحبيبية للتصميم المستجيب من استفسارات وسائط العرض.

(ملاحظة: استبدال "الرابط إلى CodePen" مع روابط CodePen الفعلية إذا كان ذلك متاحًا.)