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

Swetha Gopalakrishnan

Saurabh Rajpal

توفر طلبات بحث الحاويات نهجًا ديناميكيًا ومرنًا للغاية للتصميم سريع الاستجابة. تستخدم طلبات بحث الحاوية القاعدة @container في القاعدة. يتم تنفيذ هذا الإجراء بالطريقة نفسها التي يتم بها استخدام الاستعلام عن الوسائط باستخدام @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;
   }
}

التأثير

توكوبيديا

تحتوي صفحات تفاصيل المنتج (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.

المراجع:

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

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

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