تبدأ استعلامات الحاوية في الوصول إلى متصفحات مستقرة، بينما يتم تحديث 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 أو الإصدارات الأحدث
• 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، أضف علامة النص البرمجي هذه إلى رأس المستند:

<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 (لم تعُد هناك مشكلة في وضع التعليقات في أي مكان تكون فيه تركيبة المحتوى صالحة).
• أوضاع الكتابة العمودية (من خلال 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() أو الدوالّ الحسابية الأخرى في شروط طلبات البحث إلى الآن.
• لا تعمل رموز polyfill هذه إلا مع CSS المضمّنة والمصدر نفسه. لا تتوافق أوراق الأنماط وأوراق الأنماط من مصادر متعددة في إطارات iframe (ما لم يتم تحميل رمز polyfill يدويًا).
• يتطلب احتواء layout وstyle دعم المتصفح الأساسي:
  • Safari 15.4 أو أحدث
  • لا يتيح Firefox حاليًا ميزة "حصر الأنماط"، ولكنّنا نعمل على توفيرها.

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

• لتجنّب التأثير في FID وCLS، لا تقدّم تقنية الملء اللاحق أي ضمانات بشأن وقت ظهور التنسيق الأول، حتى إذا تم تحميله بشكل متزامن، باستثناء أنّها ستحاول تجنّب تأخير 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