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

Una Kravets

Gerald Monaco

طلبات البحث عن الحاويات متوفّرة الآن

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

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

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

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

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

لنفترض أنّ لديك بعض علامات 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;
  }
}

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

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

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

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

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

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

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

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

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

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

• الإصدار 69 من Firefox أو الإصدارات الأحدث
• الإصدار 79 من Chrome والإصدارات الأحدث
• الإصدار 79 من Edge والإصدارات الأحدث
• الإصدار 13.4 من Safari أو الإصدارات اللاحقة

يبلغ حجمه أقل من 9 كيلوبايت عند ضغطه، ويستخدم ResizeObserver مع MutationObserver لتتوافق مع بنية طلب البحث الكاملة في @container المتوفّرة حاليًا في المتصفّحات الثابتة:

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

استخدام العنصر البديل لطلب الحاوية

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

حدود تقنية Polyfill والتحذيرات بشأنها

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

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

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

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