طلبات بحث الحاوية تصل في المتصفّحات الثابتة

في عيد الحب هذا العام، نحتفل بطرح طلبات البحث عن حاويات الحجم ووحدات طلبات البحث عن الحاويات في جميع المتصفّحات الثابتة.

Una Kravets

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

باستخدام طلبات البحث عن الحاويات، يمكنك طلب معلومات التصميم لعنصر رئيسي، مثل inline-size. باستخدام طلبات البحث عن الوسائط، يمكنك طلب حجم نافذة العرض، وطلبات البحث عن الحاوية تتيح المكونات التي يمكن أن تتغيّر استنادًا إلى مكانها في واجهة المستخدم.

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

استخدام طلبات بحث الحاويات

لاستخدام استعلامات الحاوية، قم أولاً بتعيين الاحتواء على عنصر رئيسي. يمكنك إجراء ذلك من خلال ضبط container-type على الحاوية الرئيسية، أو استخدام الاختصار container لمنحها نوعًا واسمًا في الوقت نفسه:

.card-container {
  container: card / inline-size;
}

يؤدي ضبط container-type على inline-size إلى طلب حجم الاتجاه المضمّن للعنصر الرئيسي. في اللغات اللاتينية مثل الإنجليزية، سيكون هذا هو عرض البطاقة، لأنّ النص يتدفق مضمّنًا من اليسار إلى اليمين.

يمكنك الآن استخدام هذه الحاوية لتطبيق الأنماط على أيّ من عناصرها باستخدام @container:

.card-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
 .card-child {
  grid-template-columns: 1fr;
 }
}

بالإضافة إلى ذلك، يمكنك استخدام قيم وحدات طول استعلامات الحاوية بالطريقة نفسها التي تستخدم بها قيم الوحدات المستندة إلى مساحة العرض. والفرق هو أنّ وحدات الحاوية تتوافق مع الحاوية بدلاً من إطار العرض. يوضّح المثال التالي الطباعة المتجاوبة باستخدام وحدات طلب الحاوية والدالة clamp() لتقديم قيمة الحد الأدنى والحد الأقصى للحجم:

.card-child h2 {
  font-size: clamp(2rem, 15cqi, 4rem);
}

يشير الرمز 15cqi أعلاه إلى% 15 من الحجم المضمّن للحاوية. تحدّد الدالة clamp() الحدّ الأدنى لهذه القيمة بـ 2rem والحدّ الأقصى بـ 4rem. في الوقت الحالي، إذا كانت القيمة 15cqi بين هاتين القيمتَين، سيتقلّص النص ويتضخّم وفقًا لذلك.

طلب بحث حاوية عن "عيد الحب"

احتفالًا بعيد الحب هذا العام، أنشأنا رسالة إلكترونية رومانسية يمكنكم الاطّلاع عليها باستخدام أي متصفّح ثابت (أحدث إصدار).