طلبات البحث عن الحاويات

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

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

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

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

على عكس استعلامات الوسائط، يتم إنشاء استعلامات الحاويات في جزأين:

1. حدِّد حاوية.
2. اكتب أنماطًا لعنصر ثانوي ليتم تطبيقها عندما تطابق حاوية رئيسية شروط طلب البحث.

تحديد حاوية

يمكنك تحديد حاوية باستخدام السمة container-type.

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

يتيح لك container-type inline-size طلب البحث عن المحور المضمّن للحاوية.

للاستعلام عن كل من المحورين inline وblock، استخدِم container-type: size.

main,
.my-component {
  container-type: size;
}

تطبّق كلتا القيمتَين container-type أنواعًا مختلفة من احتواء الحجم. يمنع احتواء Inline-size في أحد العناصر العناصر التابعة له من التأثير في حجمه المضمّن.

يمنع عنصر يحتوي على size العناصر التابعة له من التأثير في حجمه على مستوى كلّ من المحورين الأفقي والعمودي.

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

وبما أنّه لن يتم تحديد حجمه استنادًا إلى حجم العناصر الفرعية (العنصر <p>)، سيتم تصغير الحاوية ما لم يتم تحديد حجمها بشكل صريح من خلال ضبط أبعادها (أي inline-size وblock-size وaspect-ratio) أو وضعها في تخطيط محدّد الحجم بشكل صريح.

شروط طلبات الحاوية

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

• سمة المقاس: width أو height أو inline-size أو block-size أو aspect-ratio أو orientation
• عامل مقارنة (أي > أو < أو = أو >=)
• وقيمة الطول.

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

@container (inline-size > 30em) {
  .my-child-element {
    /* styles to apply when .my-container-element is wider than 30em */
  }
}

يمكن أيضًا كتابة شروط ميزة الحجم باستخدام نقطتَين وقيمة واحدة لاختبارها.

@container (orientation: landscape) {
  /*...*/
}

@container (min-width: 300px) {
  /*...*/
}

يمكنك أيضًا الجمع بين شروط متعددة باستخدام كلمات رئيسية مثل and وor، أو ربط شروط متعددة معًا باستخدام عوامل التشغيل.

@container (inline-size > 40em) and (orientation: landscape)  {
  /*...*/
}

@container (height > 25vh) or (orientation: portrait) {
  /*...*/
}

@container ( 10em <= width <= 500px) {
  /*...*/
}

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

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

.sidebar {
  container-name: main-sidebar;
  container-type: inline-size;
}

@container main-sidebar (inline-size > 20em)  {
  .button-group {
    display: flex;
    padding-inline: 1.25em;
  }
}

يجب أن تظل الحاوية المسماة عنصرًا رئيسيًا للعناصر التي يتم تنسيقها.

استخدام صيغة مختصرة مع السمة container

تتيح لك السمة container استخدام صيغة مختصرة لتحديد الحاوية وتحديد نوعها.

.sidebar {
  container: main-sidebar / inline-size;
}

يظهر اسم الحاوية قبل الشرطة المائلة، ويظهر نوع الحاوية بعدها.

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

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

في هذا المثال، يتم استخدام وحدة طول الحاوية cqi (‫1% من الحجم المضمّن لحاوية طلب البحث) في مساحة العرض الداخلية للزر.

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

.one {
  inline-size: 30vw;
}

.two {
  inline-size: 50vw;
}

button {
  padding: 2cqi 5cqi;
}

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

تداخل طلبات الحاوية

يمكنك تضمين استعلامات الحاويات داخل أدوات الاختيار.

.my-element {
  display: grid;
  padding: 1em 2em;

  @container my-container (min-inline-size: 22em) {
    /* styles to apply when element's container is wider than 22em */
  }
}

/* equivalent to */
.my-element {
  display: grid;
  padding: 1em 2em;
}

@container my-container (min-inline-size: 22em) {
  .my-element {
     /* styles to apply when element's is wider than 22em */
  }
}

أو يمكنك تضمينها داخل استعلامات حاوية أخرى أو قواعد at-rules.

@container my-container (min-inline-size: 22em) {
  .my-element {
      /* styles to apply when element's is wider than 22em */
  }
}

@layer base {
  @container my-container (min-inline-size: 22em) {
    .my-element {
    /* styles to apply */
    }
  }
}

التحقّق من فهمك