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

سوئتا گوپالاکریشنان
Swetha Gopalakrishnan
ساوراب راجپال
Saurabh Rajpal

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

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

پشتیبانی مرورگر

  • کروم: 105.
  • لبه: 105.
  • فایرفاکس: 110.
  • سافاری: 16.

منبع

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

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

تصویر نشان می دهد که چگونه انواع مختلف یک ظاهر طراحی شده با هم کار می کنند.
web.dev - پاسخگوی جدید.

این مقاله بخشی از مجموعه‌ای است که در مورد چگونگی بهبود وب‌سایت‌های شرکت‌های تجارت الکترونیک با استفاده از ویژگی‌های جدید 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;
   }
}

تاثیر

قبل (پایه کد چندگانه) بعد از (تک کد پایه)
زیرساخت زیرساخت جداگانه (هزینه بالا). زیرساخت یکسان (کاهش هزینه).
طراحی رابط کاربری مجزا اما سازگاری ضعیف. حل چالش برانگیز اما ممکن است.
عملکرد به راحتی قابل کنترل است زیرا سیستم مجزا است اما تلاش برای بهبود عملکرد را تکرار می کند. این صفحه و ویژگی خاص است اما امتیاز redBus PageSpeedInsights بالای 80 است.
توسعه تیم های توسعه دهنده را جدا کنید. 30٪ - 40٪ کاهش در زمان.

توکوپدیا

صفحات جزئیات محصول توکوپدیا (PDP) حاوی چندین برگه برای اطلاعات فروشگاه و محصول است. قبلاً، طرح‌بندی این صفحه به سه ستون تقسیم می‌شد و گاهی اوقات نام محصول در سمت چپ برای اندازه‌های صفحه نمایش کوچک‌تر قطع می‌شد (به ویدیوی «قبل» زیر مراجعه کنید).

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

قبل از

قبل از اجرای جستجوهای کانتینر، کلمات "ISKU 10 in 1 Obeng satu.." در بالا سمت چپ برای اندازه های صفحه نمایش کوچکتر قطع می شوند.

بعد از

پیاده سازی پرس و جوهای کانتینر، چیدمان را تنظیم می کند و متن را در پنجره دید نگه می دارد.

کد

کد زیر اندازه کانتینر اصلی به نام 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 را بهبود بخشید.

منابع:

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