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

Swetha Gopalakrishnan

Saurabh Rajpal

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

جستجوهای کانتینر بخشی از Baseline Newly Available هستند.

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

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

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

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

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

قبل از

بعد از

کد

کد زیر اندازه کانتینر اصلی به نام infowrapper را جستجو می کند. اگر حداکثر عرض infowrapper 360px باشد، 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;
  }
`;

مواردی که باید هنگام استفاده از پرس و جوهای کانتینر در نظر بگیرید

توکوپدیا مورد استفاده خود را با جستجوی بیضی متن در سایت خود پیدا کرد. این نشان دهنده ظروف است که ممکن است خیلی کوچک باشند و باعث قطع شدن محتوا برای کاربر شود.

یکی دیگر از موارد استفاده خوب برای درخواست های کانتینر برای سایت های تجارت الکترونیک، توجه به اجزای استفاده مجدد است. به عنوان مثال، دکمه افزودن به سبد خرید ممکن است بر اساس ظرف اصلی متفاوت نشان داده شود (به عنوان مثال، فقط نماد اگر در کارت محصول باشد و نماد همراه با متن اگر CTA اصلی در صفحه است). دکمه می تواند کاندیدای خوبی برای پرس و جوهای کانتینر باشد.

شما می توانید انتخاب کنید که بهبودهای تدریجی در سایت خود انجام دهید. به عنوان مثال، می توانید با موارد استفاده کوچکتر مانند مثال بیضی از Tokopedia شروع کنید و پرس و جوهای کانتینر را در آنجا پیاده سازی کنید. سپس، به تدریج موارد بیشتری را پیدا کنید و CSS را بهبود بخشید.

منابع:

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

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

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