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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

:has() هو جزء من إصدار المرجع متوفّر حديثًا.

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

بازار السياسات

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

الرمز

يستخدم الكود التالي أدوات اختيار وأدوات إنشاء 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 وواجهة المستخدم الجديدة مثل التمرير والرسوم المتحركة وعرض الانتقالات وطلبات البحث المنبثقة والحاويات.

• ما سبب أهمية إمكانات واجهة مستخدم الويب بالنسبة إلى موقع التجارة الإلكترونية الخاص بك؟
• دراسات حالة حول الصور المتحركة المستندة إلى التمرير
• الاطّلاع على دراسات حالة حول عمليات النقل
• دراسات الحالة الخاصة بالنوافذ المنبثقة
• دراسات حالة لطلبات البحث في الحاويات