تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

تبدأ استعلامات الحاوية في الوصول إلى متصفحات مستقرة، بينما يتم تحديث polyfill بشكل كبير

Una Kravets

Gerald Monaco

تتوفّر طلبات البحث عن الحاويات.

نحمل لك خبرًا سارًّا - بدأت إحدى أكثر ميزات المطوّرين طلبًا في متصفِّح الويب. بدءًا من Chromium 105 وSafari 16، يمكنك الآن إنشاء طلبات بحث للحاويات مستندة إلى الحجم واستخدام قيم وحدات طلبات بحث الحاوية في هذه المتصفّحات. لتسهيل استخدام طلبات البحث عن الحاويات المستندة إلى الحجم وcq، بذل فريق Aurora في Chrome جهدًا كبيرًا في تحديث ميزة Container Query Polyfill لإتاحة استخدام المزيد من المتصفّحات وحالات الاستخدام لتشعر بالثقة عند استخدام هذه الميزة الفعّالة اليوم.

ما هي طلبات البحث عن الحاويات؟

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

ALT_TEXT_HERE

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

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

لنفترض أن لديك بعض HTML:

<!-- card parent -->
<div class=”card-parent”>
  <div class=”card>
     <!-- card contents -->
      …
  </div>
</div>

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

.card-parent {
  /* query the inline-direction size of this parent */
  container-type: inline-size;
}

يمكنك الآن استخدام القاعدة @container لضبط الأنماط استنادًا إلى أقرب عنصر رئيسي. بالنسبة لتصميم مثل الصورة أعلاه، حيث يمكن أن تنتقل البطاقة من عمود واحد إلى عمودين، اكتب شيئًا مثل:

@container (min-width: 300px) {
  .card {
    /* styles to apply when the card container (.card-parent in this case) is >= 300px */
    /* I.e. shift from 1-column to 2-column layout: */
    grid-template-columns: 1fr 1fr;
  }
}

لتكون أكثر تنظيمًا ووضوحًا، امنح حاوية العنصر الرئيسي اسمًا:

.card-parent {
  container-type: inline-size;
  /* set name here, or write this in one line using the container shorthand */
  container-name: card-container;
}

ثم أعد كتابة التعليمة البرمجية السابقة على النحو التالي:

@container card-container (min-width: 300px) {
  .card {
    grid-template-columns: 1fr 1fr;
  }
}

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

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

الوحدة	نسبةً إلى
`cqw`	1% من عرض حاوية طلب البحث
`cqh`	1% من ارتفاع حاوية طلب البحث
`cqi`	1% من الحجم المضمّن لحاوية طلب البحث
`cqb`	1% من حجم كتلة حاوية طلب البحث
`cqmin`	القيمة الأصغر لـ cqi أو cqb
`cqmax`	القيمة الأكبر لـ cqi أو cqb

أحد الأمثلة على كيفية استخدام الوحدات المستندة إلى الحاويات هو أسلوب الخط سريع الاستجابة. يمكن استخدام الوحدات التي تستند إلى إطار العرض (مثل vh وvb وvw وvi) لتحديد حجم أي عنصر على الشاشة.

.card h2 {
  font-size: 15cqi;
}

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

.card h2 {
  font-size: clamp(1.5rem, 15cqi, 3rem);
}

والآن، لن يزيد حجم العنوان مطلقًا عن 3rem أو أصغر من .5rem، ولكنه سيستغرِق 15% من الحجم المضمّن للحاوية في أي مكان بينهما.

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

polyfill لطلب بحث الحاوية

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

Firefox 69+
Chrome 79 والإصدارات الأحدث
Edge 79+
Safari 13.4 أو أحدث

يصل حجمه إلى أقل من 9 كيلوبايت عند ضغطه، ويستخدم أداة ResizeMonitorer مع MutationMonitorer لدعم بنية طلب البحث الحاوية @الكاملة المتاحة حاليًا في المتصفّحات الثابتة:

طلبات البحث المنفصلة (width: 300px وmin-width: 300px)
طلبات البحث للنطاق (200px < width < 400px وwidth < 400px)
وحدات الطول النسبي للحاويات (cqw وcqh وcqi وcqb وcqmin وcqmax) في المواقع الإلكترونية والإطارات الرئيسية.

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

لاستخدام polyfill، أضف علامة النص البرمجي هذه إلى رأس المستند:

<script type="module">
  if (!("container" in document.documentElement.style)) {
    import("https://unpkg.com/container-query-polyfill@^0.2.0");
  }
</script>

يمكنك أيضًا استخدام خدمة لتسليم رمز polyfill بشكل مشروط استنادًا إلى User-Agent أو استضافته ذاتيًا من خلال مصدرك الخاص.

لتقديم أفضل تجربة للمستخدم، ننصح في البداية باستخدام رمز polyfill للمحتوى في الجزء السفلي غير المرئي من الصفحة فقط واستخدام طلبات البحث @supports لاستبداله مؤقتًا بمؤشر تحميل إلى أن تصبح رموز polyfill جاهزة للعرض.

@supports not (container-type: inline-size) {
  .container,
  footer {
    display: none;
  }

  .loader {
    display: flex;
  }
}

لن يتم عرض مؤشر التحميل هذا مطلقًا على الشبكات والأجهزة السريعة بما فيه الكفاية أو الأجهزة التي تتوافق في الأصل مع طلبات البحث عن الحاويات.

ميزات Polyfill الجديدة

يدعم polyfill المحدّث ما يلي:

قواعد @container مدمجة
يمكن دمج قواعد @container ضمن طلبَي البحث @supports و@media والعكس صحيح.
ستنتقل CSS الشرطية مثل @supports (container-type: inline-size) بعد تحميل رموز polyfill.
التوافق الكامل مع بنية CSS (لم تعُد هناك أي مشكلة تتعلق بوضع التعليقات في أي مكان تكون فيها صالحة من ناحية البنية).
أوضاع الكتابة بالوضع العمودي (عبر وضع الكتابة)
يمكن استخدام الوحدات النسبية للحاويات (cqw وcqh وما إلى ذلك) ضمن شروط طلب البحث وإعلانات المواقع والإطارات الرئيسية للصور المتحركة. يمكن استخدام rem وem في شروط طلب البحث.
بنية طلب بحث الحاوية الموسّعة:
- بنية النطاق (على سبيل المثال (200px < width < 400px))
- طلبات البحث عن المساواة (على سبيل المثال، (width = 200px))
عناصر زائفة مثل ::before و::after
يمكن استخدام المتصفّحات التي لا تتضمّن :is(...)/:where(...) من خلال حل بديل اختياري.
طلب البحث عن الميزتَين orientation وaspect-ratio
فلترة طلبات البحث بشكل صحيح استنادًا إلى الميزات (على سبيل المثال، طلب البحث عن height على container: inline-size غير مسموح به بشكل صحيح في حال استخدام وضع الكتابة الأفقية)
تغيُّر نموذج العناصر في المستند (DOM) (على سبيل المثال، إزالة عناصر <style> و<link> في وقت التشغيل)

ملاحظة: لم يعُد رمز polyfill المعدَّل لطلب البحث للحاوية يتيح استخدام بنية طلب البحث القديمة ذات الحجم القديم، حيث على المستخدم لف طلبات البحث الخاصة بالحجم في size() (أي size(width >= 200px)).

القيود والتحذيرات بشأن الملء التلقائي

إذا كنت تستخدم رموز polyfill لطلب الحاوية، هناك بعض الميزات المفقودة التي يجب الانتباه إليها:

لا يمكن بعد استخدام Shadow DOM.
الوحدات النسبية للحاويات (مثل cqw وcqh) غير متاحة في شروط طلب البحث @media.
- Safari: لا يتم دعم الوحدات النسبية للحاويات في الإطارات الرئيسية للصور المتحركة التي تسبق الإصدار 15.4.
لا تتوفّر إلى الآن دالة calc() أو min() أو max() أو دوال حسابية أخرى في شروط طلبات البحث.
لا يعمل رمز polyfill هذا إلا مع لغة CSS المضمّنة والمصدر نفسه. لا تتوفّر أوراق الأنماط من مصادر متعددة وأوراق الأنماط في إطارات iframe (ما لم يتم تحميل رمز polyfill يدويًا).
يتطلّب احتواء layout وstyle توفُّر توافق أساسي مع المتصفّح:
- Safari 15.4 أو أحدث
- لا يدعم Firefox احتواء النمط في الوقت الحالي، ولكنه يعمل على ذلك.

تتضمّن تحذيرات

لمنع تأثير رموز FID وCLS، لا تقدّم رموز polyfill أي ضمانات بشأن وقت حدوث التنسيق الأول، حتى إذا تم تحميلها بشكل متزامن، إلا أنّها ستحاول تجنُّب حدوث تأخير غير معقول في سرعة LCP. بمعنى آخر، يجب ألا تعتمد عليها أبدًا في الطلاء الأول.
يتم إنشاء ResizeObserver Loop Errors. تقوم أداة polyfill الأصلية بذلك أيضًا، ولكن الأمر يستحق الذِكر. ويحدث ذلك لأنّه من المحتمل أن يتغيّر حجم حظر container-type: inline-size بعد تقييم طلب بحث، ولكن ليس لدى ResizeObserver أي وسيلة لإعلامه بأنّنا لا نهتم بتغييرات حجم الحظر.
تم اختبار رمز polyfill هذا مقابل اختبارات النظام الأساسي للويب ونجح في اجتياز 70% لأنّ بعض الميزات مثل واجهات برمجة تطبيقات JavaScript لا يتم ملؤها بشكل تلقائي، وبالتالي يكون معدّل النجاح قريبًا من %70.
لحلّ :where() البديل، يجب أن يحصل مستخدمو المتصفحات الأقدم من% 2.23 على ما يلي:
- الإصدار 14 من Safari
- Chromium 88
- حافة 88
- جهاز Samsung Internet 15
- Firefox 78