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

Una Kravets

Gerald Monaco

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

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

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

طلبات البحث في الحاوية هي ميزة 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 لطلب الحاوية

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

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

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

• طلبات البحث المنفصلة (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 (لم تعُد هناك أي مشكلة في وضع التعليقات في أي مكان تكون فيه بنية 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

إذا كنت تستخدم دالة 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 غير polyfill، وبالتالي، يقترب معدّل النجاح من 70% عمدًا.
• :where() الحل مطلوب لنسبة 2.23% من مستخدمي المتصفحات الأقدم من:
  • الإصدار 14 من Safari
  • Chromium 88
  • حافة 88
  • الإنترنت 15 لأجهزة Samsung
  • الإصدار 78 من متصفّح Firefox