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

Swetha Gopalakrishnan

Saurabh Rajpal

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

طلبات البحث الخاصة بالحاويات هي جزء من المقياس المرجعي متوفّر حديثًا.

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

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

.

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

redBus

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

الرمز

في المثال التالي، .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

تحتوي صفحات تفاصيل المنتجات في 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 وواجهة المستخدم الجديدة، مثل الصور المتحركة المستندة إلى التمرير والنوافذ المنبثقة وطلبات البحث عن الحاويات وأداة اختيار has().

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