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