: has مُحدِّد لا يرحم

حدث شيء بسيط في الطريق لنشر ملف CSS :has() منتقى إلى التقويم الأول. كنت قد وصفت في الأصل :has() كمحدد "متسامح" ، الفكرة هي أن أي شيء في حجته يتم تقييمه ، حتى لو كان عنصرًا واحدًا أو أكثر غير صالح.

/* Example: Do not use! */
article:has(h2, ul, ::-scoobydoo) { }

يرى ::scoobydoo هناك؟ هذا غير صحيح تمامًا. تتجاهل قائمة المحدد المتسامحة هذا المحدد الزائف وتستمر في تقييم بقية العناصر كما لو كانت مكتوبة على النحو التالي:

article:has(h2, ul) { }

:has() كان حقًا محددًا متسامحًا في مسودة سابقة بتاريخ 7 مايو 2022. لكن هذا تغير بعد الإبلاغ عن مشكلة أن الطبيعة المتسامحة تتعارض مع jQuery when :has() يحتوي على محدد معقد (على سبيل المثال header h2 + p). هبطت W3C على قرار ل جعل :has() محدد "لا يرحم" قبل بضعة أسابيع فقط.

إذن ، مثالنا السابق؟ قائمة المحددات بأكملها غير صالحة لأن المحدد الزائف غير صالح. لكن المحددين الآخرين المتسامحين ، :is() و :where()، دون تغيير.

هناك القليل من الحل لهذا. يتذكر، :is() و  :where()متسامحين ، حتى لو :has() ليس. هذا يعني أنه يمكننا دمج أي من تلك المحددات في :has() للحصول على سلوك أكثر تسامحًا:

article:has(:where(h2, ul, ::-scoobydoo)) { }

أي واحد تستخدمه قد يكون مهمًا لأن خصوصية :is() يتم تحديده من خلال العنصر الأكثر تحديدًا في قائمته. لذلك ، إذا كنت بحاجة إلى شيء أقل تحديدًا ، فمن الأفضل الوصول إليه :where() لأنه لا يضيف إلى درجة الخصوصية.

/* Specificity: (0,0,1) */
article:has(:where(h2, ul, ::-scoobydoo)) { } /* Specificity: (0,0,2) */
article:has(:is(h2, ul, ::-scoobydoo)) { }

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

• محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
• بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. الوصول هنا.
• المصدر https://css-tricks.com/has-is-an-unforgiving-selector/