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

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

أونا كرافيتس

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

باستخدام طلبات البحث عن الحاويات، يمكنك إنشاء طلبات بحث عن معلومات نمط عنصر رئيسي، مثل 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 بين هاتين القيمتَين، سيتقلّص النص وسينمو وفقًا لذلك.

طلب بحث في حاوية عيد الحب

واحتفالاً بقبول طلب البحث هذا عن الحاوية، صمّمنا عيد حب لك للاستمتاع به جميعًا، بغض النظر عن المتصفح الثابت (أحدث إصدار) الذي تشاهده فيه!

جزء من سلسلة الألعاب القابلة للتشغيل التفاعلي مؤخرًا