تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

دعم المتصفح

المصدر

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

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

صورة توضّح كيفية عمل الأنواع المختلفة من الأنماط معًا — web.dev: الإصدار الجديد سريع الاستجابة

هذه المقالة جزء من سلسلة تناقش كيف يمكن لشركات التجارة الإلكترونية تحسين مواقع الويب باستخدام ميزات 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;
   }
}

التأثير

	قبل (قاعدة رموز متعددة)	بعد (قاعدة رموز فردية)
البنية الأساسية	بنية أساسية منفصلة (تكلفة عالية).	البنية الأساسية نفسها (انخفاض في التكلفة).
التصميم	واجهة مستخدم منفصلة ولكن اتساقها ضعيف.	هناك صعوبة في الحل ولكنه ممكن.
الأداء	سهولة التعامل لأن النظام منفصل ولكنه يكرر الجهود المبذولة لتحسين الأداء.	هذه صفحة وميزات محدّدة، ولكن نتيجة PageSpeedInsights في redBus أعلى من 80.
تطوير	الفصل بين فِرق المطوّرين	تقليل الوقت بنسبة 30٪ - 40٪.

Tokopedia

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

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

قبل

قبل تنفيذ استعلامات الحاوية، ينبغي أن تبدأ الكلمات "ISKU 10 في 1 Obeng ساتو.." في أعلى يمين الشاشة مقطوعة للشاشات الأصغر حجمًا.

بعد

يؤدي تنفيذ طلبات بحث الحاوية إلى ضبط التنسيق مع إبقاء النص داخل إطار العرض.

الرمز

يطلب الرمز التالي حجم الحاوية الرئيسية المسماة 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().