:has() مطالعات موردی

Swetha Gopalakrishnan

Saurabh Rajpal

CSS به طور مشهور راهی برای انتخاب مستقیم عنصر والد بر اساس فرزندان خود ندارد. این یکی از درخواست های اصلی توسعه دهندگان برای چندین سال بوده است. انتخابگر :has() که اکنون توسط همه مرورگرهای اصلی پشتیبانی می شود، این مشکل را حل می کند. قبل از :has() ، اغلب انتخابگرهای طولانی را زنجیره می‌کردید یا کلاس‌هایی را برای قلاب‌های استایل اضافه می‌کردید. اکنون می توانید بر اساس رابطه یک عنصر با فرزندان آن استایل دهید. در مورد انتخابگر :has() در CSS Wrapped 2023 و 5 قطعه CSS که هر توسعه دهنده frontend باید بداند بیشتر بخوانید.

اگرچه این انتخابگر کوچک به نظر می رسد، اما می تواند تعداد زیادی از موارد استفاده را فعال کند. این مقاله موارد استفاده ای را نشان می دهد که شرکت های تجارت الکترونیک با انتخابگر :has() آن را باز کرده اند.

:has() بخشی از Baseline Newly Available است.

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

بازار سیاست

با انتخابگر :has() توانستیم اعتبارسنجی انتخاب کاربر مبتنی بر جاوا اسکریپت را حذف کنیم و آن را با یک راه حل CSS جایگزین کنیم که با همان تجربه قبلی برای ما یکپارچه کار می کند.— Aman Soni ، مدیر فنی، Policybazaar

تیم سرمایه گذاری Policybazaar هوشمندانه از انتخابگر :has() استفاده کرد تا یک نشانه بصری واضح برای کاربرانی که برنامه ها را مقایسه می کنند ارائه دهد. تصویر زیر دو نوع پلان را در رابط کاربری مقایسه نشان می دهد (زرد و آبی). هر طرح را فقط می توان با نوع خود مقایسه کرد. با استفاده از :has() وقتی یک کاربر یک نوع طرح را انتخاب می کند، نوع دیگر پلن قابل انتخاب نیست.

کد

:has() به شما امکان دسترسی به عناصر والد سبک و فرزندان آنها را می دهد. کد زیر بررسی می‌کند که آیا یک کانتینر والد دارای مجموعه کلاس .disabled-group است یا خیر. در این صورت، کارت خاکستری می‌شود و دکمه «افزودن» با تنظیم pointer-events روی none از واکنش به کلیک‌ها جلوگیری می‌کند.

.plan-group-container:has(.disabled-group) {
  opacity: 0.5;
  filter: grayscale(100%);
}

.plan-group-container:has(.disabled-section) .button {
  pointer-events: none;
  border-color: #B5B5B5;
  color: var(--text-primary-38-color);
  background: var(--input-border-color);
}

تیم سلامت در Policybazaar یک مورد استفاده کمی متفاوت را اجرا کرد. آنها یک آزمون درون خطی برای کاربر دارند و از :has() برای بررسی وضعیت چک باکس سؤال استفاده می کنند تا ببینند آیا به سؤال پاسخ داده شده است یا خیر. اگر چنین بود، یک انیمیشن برای انتقال به سوال بعدی اعمال می شود.

کد

در مثال مقایسه پلان، :has() برای بررسی حضور یک کلاس استفاده شد. همچنین می توانید وضعیت یک عنصر ورودی مانند یک چک باکس را با استفاده از :has(input:checked) بررسی کنید. در تصویری که مسابقه را نشان می‌دهد، هر سؤال در بنر بنفش یک چک باکس است. Policybazaar بررسی می کند که آیا به سؤال با استفاده از :has(input:checked) پاسخ داده شده است یا خیر و اگر پاسخ داده است، انیمیشنی را با استفاده از animation: quesSlideOut 0.3s 0.3s linear forwards راه اندازی می کند تا به سؤال بعدی اسلاید شود. نحوه کار این کار را در کد زیر مشاهده کنید.

.segment_banner__wrap__questions {
 position: relative;
 animation: quesSlideIn 0.3s linear forwards;
}

.segment_banner__wrap__questions:has(input:checked) {
 animation: quesSlideOut 0.3s 0.3s linear forwards;
}


@keyframes quesSlideIn {
 from {
   transform: translateX(50px);
   opacity: 0;
 }
 to {
   transform: translateX(0px);
   opacity: 1;
 }
}

@keyframes quesSlideOut {
 from {
   transform: translateX(0px);
   opacity: 1;
 }
 to {
   transform: translateX(-50px);
   opacity: 0;
 }
}

توکوپدیا

اگر تصویر کوچک محصول حاوی یک ویدیو باشد، Tokopedia از :has() برای ایجاد یک تصویر همپوشانی استفاده می کند. اگر تصویر کوچک محصول شامل یک کلاس .playIcon باشد، یک پوشش CSS اضافه می شود. در اینجا، انتخابگر :has() همراه با انتخابگر & تودرتو در کلاس .thumbnailWrapper فراگیر استفاده می شود که برای همه تصاویر کوچک اعمال می شود. این باعث ایجاد CSS ماژولار و قابل خواندن بیشتر می شود.

کد

کد زیر از انتخابگرها و ترکیب‌کننده‌های CSS ( & و > ) و تودرتو با :has() برای استایل دادن به تصویر کوچک استفاده می‌کند. برای مرورگرهایی که پشتیبانی نمی‌کنند، قانون کلاس CSS اضافی به‌عنوان بازگشتی استفاده می‌شود. قانون @supports selector(:has(*)) نیز برای بررسی پشتیبانی مرورگر استفاده می شود. بنابراین، تجربه کلی در نسخه های مرورگر یکسان است.

export const thumbnailWrapper = css`
  padding: 0;
  margin-right: 7px;
  border: none;
  outline: none;
  background: transparent;

  > div {
    width: 64px;
    height: 64px;
    overflow: hidden;
    cursor: pointer;
    border-color: ;
    position: relative;
    border: 2px solid ${NN0};
    border-radius: 8px;
    transition: border-color 0.25s;

    &.active {
      border-color: ${GN500};
    }

    @supports selector(:has(*)) {
      &:has(.playIcon) {
        &::after {
          content: '';
          display: block;
          background: rgba(0, 0, 0, 0.2);
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
      }
    }

    & > .playIcon {
      position: absolute;
      top: 25%;
      left: 25%;
      width: 50%;
      height: 50%;
      text-align: center;
      z-index: 1;
    }
  }
`;

مواردی که باید در هنگام استفاده :has() در نظر گرفت

:has() با انتخابگرهای دیگر ترکیب کنید تا شرایط پیچیده تری ایجاد کنید. چند نمونه را در has() انتخابگر خانواده بررسی کنید.

منابع:

• CSS بسته بندی شده 2023
• :has(): انتخابگر خانواده
• نسخه ی نمایشی :has()
• آیا می خواهید یک اشکال را گزارش کنید یا یک ویژگی جدید درخواست کنید؟ ما می خواهیم از شما بشنویم !

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

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