دراسات الحالة لطلبات البحث في الحاويات

Swetha Gopalakrishnan

Saurabh Rajpal

توفّر استعلامات الحاويات طريقة ديناميكية ومرنة للغاية لتصميم متجاوب. تستخدم طلبات البحث في الحاويات قاعدة @container at-rule. تعمل هذه الميزة بطريقة مشابهة لاستعلام الوسائط مع @media، ولكن بدلاً من ذلك، يطلب @container من الحاوية الرئيسية معلومات التنسيق بدلاً من إطار العرض ووكيل المستخدم.

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

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

هذه المقالة هي جزء من سلسلة تناقش كيف حسّنت شركات التجارة الإلكترونية مواقعها الإلكترونية باستخدام ميزات جديدة في CSS وواجهة المستخدم. في هذا المقال، سنتعمّق في كيفية استخدام بعض الشركات لاستعلامات الحاويات والاستفادة منها.

redBus

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

الرمز

في المثال التالي، .bpdpCardWrapper هو الحاوية الرئيسية، واسمها bpdpSection.

إذا كان الحد الأدنى لعرض الحاوية bpdpSection هو 744 بكسل، سيتم تعديل font-size وline-height للمكوّنات التي تم اختيارها بواسطة .bpdpCardContainer و.subTxt, .bpdpAddress.

//Code for Container Queries
.bpdpCardWrapper {
   container-type: inline-size;
   container-name: bpdpSection;
}
@container bpdpSection (min-width: 744px){
   .bpdpCardContainer{
      font-size: 1rem;
      line-height: 1.5rem;
   }

   .subTxt, .bpdpAddress{
       font-size: 0.875rem;
       line-height: 1.25rem;
   }
}

التأثير

Tokopedia

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

لحلّ مشكلة التصميم هذه، استخدموا طلبات البحث عن الحاويات بسهولة وسرعة. بعد تنفيذ هذه الخطوة، تمكّنوا من الحصول على تصميم مرن يظهر فيه اسم المنتج دائمًا بشكل كامل (راجِع الفيديو التالي "بعد").

قبل

بعد

الرمز

يستعلم الرمز التالي عن حجم الحاوية الرئيسية التي تحمل الاسم infowrapper. إذا كان الحد الأقصى لعرض infowrapper هو 360 بكسل، سيتم تعديل المكوّنات الفرعية width وmargin, وpadding.

يؤدي ضبط container-type على inline-size إلى طلب حجم الاتجاه المضمّن للعنصر الرئيسي. في اللغات اللاتينية، مثل الإنجليزية، سيكون هذا هو عرض الحاوية الرئيسية، لأنّ النص يتدفق بشكل مضمّن من اليسار إلى اليمين.

export const styCredibilityContainer = css`
  container-name: infowrapper;
  container-type: inline-size;
`;

export const styBtnShopFollow = css`
  margin-left: auto;
  width: 98px;
  @container infowrapper (max-width: 360px) {
    width: 100%;
    margin-top: 2px;
    margin-bottom: 8px;
    padding-left: 60px;
  }
`;

export const styBottomRow = css`
  margin-top: 4px;
  padding-left: 60px;
  display: flex;
  align-items: center;

  @container infowrapper (max-width: 360px) {
    padding-left: 0px;
  }

  > div {
    text-align: left;
    margin-top: 0 !important;
  }
`;

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

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

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

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

المصادر:

• طلبات الحاويات متاحة في المتصفّحات الثابتة
• استعلامات الحاويات: التصميم في المتصفّح
• عروض توضيحية لطلبات البحث في الحاويات
• عرض توضيحي: بطاقات طلبات البحث في الحاويات
• فيديو: الميزات الجديدة في واجهة مستخدم الويب - مؤتمر I/O لعام 2023
• هل تريد الإبلاغ عن خطأ أو طلب ميزة جديدة؟ يهمنا أن نعرف رأيك.

يمكنك الاطّلاع على المقالات الأخرى في هذه السلسلة التي تتناول كيفية استفادة شركات التجارة الإلكترونية من استخدام ميزات جديدة في CSS وواجهة المستخدم، مثل الرسوم المتحركة المستندة إلى التمرير، وPopover، وContainer Queries، والمحدّد has().

• لماذا تُعدّ إمكانات واجهة مستخدم الويب مهمة لموقع ويب للتجارة الإلكترونية؟
• دراسات حالة حول الصور المتحركة المستندة إلى التمرير
• الاطّلاع على دراسات حالة حول "عمليات الانتقال"
• دراسات حالة حول النوافذ المنبثقة
• دراسات حالة حول أداة الاختيار ‎:has()‎