مطالعات موردی پرس و جوهای کانتینری

Swetha Gopalakrishnan

Saurabh Rajpal

کوئری‌های کانتینر رویکردی بسیار پویا و انعطاف‌پذیر برای طراحی واکنش‌گرا ارائه می‌دهند. کوئری‌های کانتینر از @container at-rule استفاده می‌کنند. این روش مشابه کوئری مدیا با @media عمل می‌کند، اما در عوض، @container به جای viewport و user agent، برای اطلاعات استایل‌بندی به یک کانتینر والد کوئری می‌زند.

با پاسخ به اندازه کانتینر، کوئری‌های کانتینر به کامپوننت‌ها اجازه می‌دهند تا با موقعیت خود در رابط سازگار شوند. به عنوان مثال، یک کامپوننت کارت می‌تواند اندازه و سبک‌های خود را با توجه به کانتینری که در آن قرار می‌گیرد، چه یک نوار کناری، بخش قهرمان یا یک شبکه در بدنه اصلی صفحه، تطبیق دهد.

همانطور که در تصویر زیر نشان داده شده است، می‌توانید کوئری‌های رسانه‌ای را برای طرح‌بندی‌های ماکرو، کوئری‌های کانتینر را برای طرح‌بندی‌های میکرو، و کوئری‌های رسانه‌ای مبتنی بر ترجیح کاربر را برای ایجاد یک سیستم طراحی واکنش‌گرای قدرتمند ترکیب کنید. درباره کوئری‌های کانتینر و طراحی واکنش‌گرای جدید بیشتر بخوانید.

این مقاله بخشی از مجموعه‌ای است که در مورد چگونگی بهبود وب‌سایت‌های شرکت‌های تجارت الکترونیک با استفاده از ویژگی‌های جدید CSS و UI بحث می‌کند. این بار، ما به بررسی نحوه استفاده و بهره‌مندی برخی از شرکت‌ها از کوئری‌های کانتینر می‌پردازیم.

ردباس

redBus کدهای متفاوتی را برای نسخه‌های موبایل و دسکتاپ خود نگهداری و ارائه می‌دهد. پس از پیاده‌سازی کوئری‌های کانتینر در صفحات Things-to-do و cargo ، آنها توانستند این کد را در یک پایگاه کد واحد برای این سایت‌ها متحد کنند. این امر باعث واکنش‌گرا شدن آنها و صرفه‌جویی در زمان توسعه شد. مثال زیر این موضوع را با استفاده از صفحه cargo نشان می‌دهد:

کد

در مثال زیر، .bpdpCardWrapper کانتینر والد است که bpdpSection نام دارد.

اگر bpdpSection ظرف حداقل عرض ۷۴۴ پیکسل داشته باشد، 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) توکوپدیا شامل چندین تب برای فروشگاه و اطلاعات محصول است. پیش از این، طرح‌بندی این صفحه به سه ستون تقسیم می‌شد و گاهی اوقات نام محصول در سمت چپ برای اندازه‌های کوچک‌تر صفحه نمایش حذف می‌شد (به ویدیوی «قبل» در ادامه مراجعه کنید).

برای حل این مشکل طرح‌بندی، آنها به راحتی و به سرعت از پرس‌وجوهای کانتینر استفاده کردند. پس از این پیاده‌سازی، آنها توانستند یک طرح‌بندی انعطاف‌پذیر داشته باشند که در آن نام محصول همیشه به طور کامل قابل مشاهده بود (به ویدیوی "بعد از" در ادامه مراجعه کنید).

قبل از

بعد از

کد

کد زیر اندازه کانتینر والد به نام infowrapper را پرس‌وجو می‌کند. اگر حداکثر عرض infowrapper برابر با 360 پیکسل باشد، width ، margin, و padding کامپوننت‌های فرزند تنظیم می‌شوند.

تنظیم مقدار container-type روی inline-size اندازه inline-direction والد را نمایش می‌دهد. در زبان‌های لاتین مانند انگلیسی، این مقدار، عرض والد خواهد بود، زیرا متن به صورت درون خطی از چپ به راست جریان می‌یابد.

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 شروع کنید و کوئری‌های کانتینر را در آنجا پیاده‌سازی کنید. سپس، به تدریج موارد بیشتری پیدا کنید و CSS را بهبود بخشید.

منابع:

• کوئری‌های کانتینر در مرورگرهای پایدار قرار می‌گیرند
• کوئری‌های کانتینر - طراحی در مرورگر
• دموهای کوئری کانتینر
• نسخه آزمایشی: کارت‌های استعلام کانتینر
• ویدیو: چه چیزهایی در رابط کاربری وب جدید است - I/O 2023
• آیا می‌خواهید یک اشکال را گزارش دهید یا ویژگی جدیدی را درخواست کنید؟ ما مشتاق شنیدن نظرات شما هستیم .

مقالات دیگر این مجموعه را که در مورد چگونگی بهره‌مندی شرکت‌های تجارت الکترونیک از ویژگی‌های جدید CSS و UI مانند انیمیشن‌های Scroll-driven، popover، کوئری‌های container و انتخابگر has() صحبت می‌کنند، بررسی کنید.

• چرا قابلیت‌های رابط کاربری وب برای سایت تجارت الکترونیک شما اهمیت دارد؟
• مطالعات موردی انیمیشن‌های اسکرول‌محور
• مطالعات موردی انتقال را مشاهده کنید
• مطالعات موردی پاپ‌اوور
• مطالعات موردی انتخابگر has() :