توفر طلبات بحث الحاويات نهجًا ديناميكيًا ومرنًا للغاية للتصميم سريع الاستجابة. تستخدم طلبات بحث الحاوية القاعدة @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;
}
}
التأثير
قبل (قاعدة رموز متعددة) | بعد (قاعدة رمز واحد) | |
---|---|---|
البنية الأساسية | بنية أساسية منفصلة (تكلفة عالية). | نفس البنية الأساسية (تكلفة مخفضة). |
التصميم | واجهة مستخدم منفصلة لكن الاتساق ضعيف. | يصعب حلها، ولكنها ممكنة. |
عروض أداء | يسهل التعامل معها، حيث إن النظام منفصل وفي الوقت ذاته يكرر الجهد المبذول لتحسين الأداء. | هذه الصفحة مخصّصة للصفحة والميزات، لكن نتيجة PageSpeedInsights لشركة RedBus أعلى من 80. |
تطوير | فِرق المطوِّرين المنفصلة. | تقليل الوقت بنسبة تتراوح بين %30 و% 40. |
توكوبيديا
تحتوي صفحات تفاصيل المنتج (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()
.