:has() دراسات حالة

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X LinkedIn
Saurabh Rajpal
Saurabh Rajpal
X LinkedIn

من المعروف أنّ لغة CSS لم تكن تتيح طريقة لاختيار عنصر رئيسي بشكل مباشر استنادًا إلى عناصره الفرعية. وقد كان هذا الطلب من أهم الطلبات التي يقدّمها المطوّرون منذ سنوات عديدة. ويحلّ هذا المشكلة أداة الاختيار ‎:has() التي تتوافق الآن مع جميع المتصفحات الرئيسية. قبل توفّر أداة الاختيار ‎:has()، كان عليك غالبًا ربط أدوات اختيار طويلة أو إضافة فئات لربط الأنماط. يمكنك الآن تطبيق الأنماط استنادًا إلى علاقة عنصر بعناصره التابعة. يمكنك قراءة المزيد عن أداة الاختيار :has()في مقالة CSS Wrapped 2023 و 5 مقتطفات CSS ضرورية لجميع مطوّري الواجهات الأمامية.

على الرغم من أنّ أداة الاختيار هذه تبدو صغيرة، يمكنها تفعيل عدد كبير من حالات الاستخدام. تعرض هذه المقالة بعض حالات الاستخدام التي أتاحتها شركات التجارة الإلكترونية باستخدام أداة الاختيار ‎:has().

يمكنك الاطّلاع على الـ سلسلة الكاملة التي تنتمي إليها هذه المقالة، والتي تناقش كيف حسّنت شركات التجارة الإلكترونية مواقعها الإلكترونية باستخدام ميزات جديدة في CSS وواجهة المستخدم.

Policybazaar

باستخدام أداة الاختيار :has()، تمكّنا من إزالة عملية التحقّق المستندة إلى JavaScript من اختيار المستخدِم واستبدالها بحلّ CSS يعمل بسلاسة ويقدّم لنا التجربة نفسها كما في السابق.‫—أمان سوني، رئيس الفريق التقني في 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;
 }
}

Tokopedia

استخدمت Tokopedia أداة الاختيار ‎:has() لإنشاء صورة تراكب إذا كانت الصورة المصغّرة للمنتج تحتوي على فيديو. إذا كانت الصورة المصغّرة للمنتج تحتوي على فئة .playIcon، تتم إضافة تراكب CSS. هنا، يتم استخدام أداة الاختيار ‎ :has()‎ مع أداة اختيار التداخل & ضمن الفئة الشاملة .thumbnailWrapper التي تنطبق على جميع الصور المصغّرة. يؤدي ذلك إلى إنشاء CSS أكثر نمطية وقابلية للقراءة.

لقطة شاشة لصفحة Tokopedia قبل استخدام أداة الاختيار 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(): the family selector.

المصادر:

يمكنك استكشاف المقالات الأخرى في هذه السلسلة التي تتناول كيف استفادت شركات التجارة الإلكترونية من استخدام ميزات جديدة في CSS وواجهة المستخدم، مثل الرسوم المتحركة المستندة إلى التمرير وعمليات الانتقال بين طرق العرض وعناصر النافذة المنبثقة وطلبات البحث عن الحاويات.