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

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

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

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

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

بازار سیاست

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

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

پیاده‌سازی :has() برای استایل‌دهی به عنصر والد و فرزندانش به منظور ایجاد قابلیت انتخاب بر اساس دسته‌بندی.

کد

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

.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.
قبل و بعد از استفاده از :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 مانند انیمیشن‌های Scroll-driven، انتقال‌های نمایش، نمایش‌های popover و نمایش‌های کانتینر صحبت می‌کنند.