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

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

Una Kravets

الاحتفال: ميزة الويب هذه متاحة الآن في محرّكات المتصفحات الرئيسية الثلاثة.

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

دعم المتصفح

• 105
• 105
• 110
• 16

المصدر

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

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

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