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

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

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

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

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

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

  • کروم: 105.
  • لبه: 105.
  • فایرفاکس: 121.
  • سافاری: 15.4.

منبع

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

بازار سیاست

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

تیم سرمایه گذاری Policybazaar هوشمندانه از انتخابگر :has() استفاده کرد تا یک نشانه بصری واضح برای کاربرانی که برنامه ها را مقایسه می کنند ارائه دهد. تصویر زیر دو نوع پلان را در رابط کاربری مقایسه نشان می دهد (زرد و آبی). هر طرح را فقط می توان با نوع خود مقایسه کرد. با استفاده از :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() برای بررسی وضعیت چک باکس سؤال استفاده می کنند تا ببینند آیا به سؤال پاسخ داده شده است یا خیر. اگر چنین بود، یک انیمیشن برای انتقال به سوال بعدی اعمال می شود.

health.policybazaar.com/

کد

در مثال مقایسه پلان، :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;
 }
}

توکوپدیا

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

اسکرین شات از صفحه توکوپدیا قبل و بعد از استفاده از دارای انتخابگر.
قبل و بعد از استفاده از :has() .

کد

کد زیر از انتخاب‌کننده‌ها و ترکیب‌کننده‌های 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 و UI مانند انیمیشن‌های اسکرول‌محور، انتقال‌های مشاهده، popover و جستجوهای کانتینر سود می‌برند، صحبت کنید.