• :has()
فئة زائفة هي ميزة CSS الجديدة المفضلة لدي. أعلم أنه لكثير منكم أيضًا ، على الأقل أولئك الذين شاركوا في استطلاع حالة CSS. تمنحنا القدرة على كتابة المحددات رأسًا على عقب المزيد من القوى الخارقة التي لم أكن أعتقد أنها ممكنة.
أقول "المزيد من القوى الخارقة" لأنه كان هناك بالفعل الكثير من الأفكار الذكية المذهلة التي نشرتها مجموعة من الأشخاص الأذكياء ، مثل:
هذه المقالة ليست دليلا نهائيا ل :has()
. كما أنه ليس هنا لاسترجاع ما قيل بالفعل. أنا فقط (مرحبًا 👋) أقفز على العربة للحظة لمشاركة بعض الطرق التي من المرجح أن أستخدمها :has()
في عملي اليومي ... أي بمجرد أن يتم دعمه رسميًا بواسطة Firefox وهو أمر وشيك.
عندما يحدث ذلك ، يمكنك المراهنة على أنني سأبدأ في استخدام :has()
في انحاء المكان. في ما يلي بعض الأمثلة الواقعية للأشياء التي قمت بإنشائها مؤخرًا وقلت لنفسي ، "يا إلهي ، سيكون هذا أجمل كثيرًا مرة واحدة :has()
مدعوم بالكامل. "
تجنب الاضطرار إلى الوصول إلى خارج مكون JavaScript الخاص بك
هل سبق لك أن صممت مكونًا تفاعليًا يحتاج أحيانًا إلى التأثير على الأنماط في مكان آخر على الصفحة؟ خذ المثال التالي ، أين <nav>
هو القائمة الضخمة، وفتحه يغير ألوان <header>
المحتوى فوقه.
أشعر أنني بحاجة للقيام بهذا النوع من الأشياء كل الوقت.
هذا المثال المحدد هو مكون React الذي قمت بإنشائه لموقع ما. اضطررت إلى "الوصول إلى الخارج" في جزء رد الفعل من الصفحة باستخدام document.querySelector(...)
وتبديل فئة على <body>
, <header>
، أو مكون آخر. هذه ليست نهاية العالم ، لكنها بالتأكيد تشعر بقليل من اليأس. حتى في موقع React بالكامل (موقع Next.js ، على سبيل المثال) ، يجب أن أختار بين إدارة ملف menuIsOpen
state way أعلى من شجرة المكوّنات ، أو قم بنفس اختيار عنصر DOM - وهو ليس React-y تمامًا.
بدافع :has()
تختفي المشكلة:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
لا مزيد من العبث بأجزاء أخرى من DOM في مكونات JavaScript الخاصة بي!
أفضل جدول مخطط UX
يمكن أن تكون إضافة "خطوط" صف بديلة إلى جداولك تحسينًا رائعًا لتجربة المستخدم. إنها تساعد عينيك على تتبع الصف الذي تتواجد فيه أثناء مسح الطاولة.
لكن من واقع خبرتي ، فإن هذا لا يعمل بشكل جيد على الجداول التي تحتوي على صفين أو ثلاثة صفوف فقط. إذا كان لديك ، على سبيل المثال ، جدول به ثلاثة صفوف في ملف <tbody>
وأنت تقوم "بتقطيع" كل صف "زوجي" ، فقد ينتهي بك الأمر بشريط واحد فقط. هذا لا يستحق حقًا نمطًا وقد يجعل المستخدمين يتساءلون عما يميز هذا الصف المميز.
باستخدام هذه التقنية حيث يستخدم براموس :has()
لتطبيق أنماط بناءً على عدد الأطفال، يمكننا تطبيق خطوط tble عندما يكون هناك أكثر من ثلاثة صفوف على سبيل المثال:
ماذا تصبح مربي الحيوانات؟ يمكنك أيضًا أن تقرر القيام بذلك فقط إذا كان الجدول يحتوي على عدد معين من الأعمدة أيضًا:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
إزالة منطق الفئة الشرطي من القوالب
غالبًا ما أحتاج إلى تغيير تخطيط الصفحة بناءً على ما هو موجود في الصفحة. خذ تخطيط الشبكة التالي ، حيث يغير موضع المحتوى الرئيسي مناطق الشبكة اعتمادًا على ما إذا كان هناك شريط جانبي موجود أم لا.
هذا شيء قد يعتمد على ما إذا كانت هناك صفحات أشقاء تم تعيينها في CMS. عادةً ما أفعل ذلك باستخدام منطق القالب لإضافته بشكل مشروط فئات معدل BEM إلى غلاف التخطيط ليأخذ في الحسبان كلا التخطيطين. قد تبدو CSS شيئًا كالتالي (القواعد المستجيبة والأشياء الأخرى التي تم حذفها للإيجاز):
/* m = main content */
/* s = sidebar */
.standard-page--with-sidebar { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page--without-sidebar { grid-template-areas: '. m m m m m m m m m . .';
}
من ناحية CSS ، هذا جيد تمامًا ، بالطبع. لكنه يجعل رمز القالب فوضويًا بعض الشيء. اعتمادًا على لغة القوالب الخاصة بك ، قد يكون من القبيح جدًا إضافة مجموعة من الفصول الدراسية بشكل مشروط ، خاصة إذا كان عليك القيام بذلك مع الكثير من العناصر الفرعية أيضًا.
قارن ذلك مع ملف :has()
- النهج القائم على:
/* m = main content */
/* s = sidebar */
.standard-page:has(.sidebar) { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page:not(:has(.sidebar)) { grid-template-areas: '. m m m m m m m m m . .';
}
بصراحة ، هذا ليس أفضل كثيرًا من حيث CSS. لكن إزالة فئات المُعدِّل الشرطي من قالب HTML يعد فوزًا رائعًا إذا سألتني.
من السهل التفكير في قرارات التصميم الجزئي لـ :has()
- مثل البطاقة عندما تحتوي على صورة - لكنني أعتقد أنه سيكون مفيدًا حقًا لتغييرات تخطيط الماكرو هذه أيضًا.
إدارة أفضل للخصوصية
إذا كنت تقرأ مقالتي الأخيرة، ستعرف أنني متمسك بالخصوصية. إذا كنت ، مثلي ، لا تريد أن تتلاشى درجاتك النوعية عند الإضافة :has()
و :not()
في جميع الأنماط الخاصة بك ، تأكد من استخدامها :where()
.
هذا بسبب خصوصية :has()
مبني على العنصر الأكثر تحديدًا في قائمة الوسائط الخاصة به. لذلك ، إذا كان لديك شيء مثل المعرف هناك ، فسيكون من الصعب تجاوز المحدد في التسلسل.
من ناحية أخرى، خصوصية :where()
دائما صفر، لا تضيف أبدًا إلى درجة الخصوصية.
/* specificity score: 0,1,0. Same as a .standard-page--with-sidebar modifier class
*/
.standard-page:where(:has(.sidebar)) { /* etc */
}
المستقبل مشرق
هذه مجرد أشياء قليلة لا أطيق الانتظار حتى أتمكن من استخدامها في الإنتاج. يحتوي CSS-Tricks Almanac على مجموعة من الأمثلة أيضًا. ما الذي تتطلع إلى القيام به :has()
؟ ما نوع بعض الأمثلة الواقعية التي واجهت أين :has()
كان من الممكن أن يكون الحل الأمثل؟
- محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
- بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. الوصول هنا.
- المصدر https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- القدرة
- ماهرون
- من نحن
- فوق
- حسابي
- تؤثر
- الكل
- سابقا
- دائما
- مدهش
- و
- آخر
- التقديم
- نهج
- المناطق
- حجة
- البند
- على أساس
- لان
- مراهنة
- أفضل
- ما بين
- قطعة
- نفخ
- بنيت
- باقة
- يستطيع الحصول على
- فيزا وماستركارد
- الشلالات
- معين
- تغيير
- التغييرات
- طفل
- اختار
- فئة
- فصول
- سم
- الكود
- الأعمدة
- عنصر
- يحتوي
- محتوى
- استطاع
- الدورة
- CSS
- القرارات
- نهائي
- اعتمادا
- تصميم
- لا
- فعل
- DOM
- لا
- إلى أسفل
- عناصر
- خاصة
- إلخ
- حتى
- EVER
- كل
- مثال
- أمثلة
- الخبره في مجال الغطس
- العيون
- المفضلة—الحقيبة
- الميزات
- قليل
- نهاية
- برنامج فايرفوكس
- متابعيك
- إلى الأمام
- تبدأ من
- تماما
- دولار فقط واحصل على خصم XNUMX% على جميع
- يعطي
- يذهب
- الذهاب
- عظيم
- شبكة
- مناطق قالب الشبكة
- توجيه
- يحدث
- وجود
- مساعدة
- هنا
- hi
- أعلى
- سلط الضوء
- HTML
- HTTPS
- سوف
- الأفكار
- صورة
- تحسين
- in
- التفاعلية
- IT
- جافا سكريبت
- واحد فقط
- احتفظ
- نوع
- علم
- لغة
- اسم العائلة
- تصميم
- على الأرجح
- القليل
- بحث
- أبحث
- الكثير
- الماكرو
- صنع
- الرئيسية
- جعل
- إدارة
- كثير
- ربما
- لحظة
- الأكثر من ذلك
- أكثر
- موزيلا
- حاجة
- إحتياجات
- جديد
- التالي
- Next.js
- عادة
- عدد
- رسميا
- ONE
- افتتاح
- أخرى
- في الخارج
- جزء
- خاص
- أجزاء
- نمط
- مجتمع
- المكان
- أفلاطون
- الذكاء افلاطون البيانات
- أفلاطون داتا
- ممكن
- يقدم
- جميل
- المشكلة
- الإنتــاج
- نشرت
- الوصول
- رد فعل
- عرض
- العالم الحقيقي
- مؤخرا
- إزالة
- استجابة
- صف
- القواعد
- يجري
- قال
- نفسه
- تفحص
- اختيار
- طقم
- مشاركة
- الموقع
- سمارت
- So
- حل
- بعض
- شيء
- في مكان ما
- تختص
- محدد
- النوعية
- بداية
- الولايه او المحافظه
- شريط
- شرائط
- نمط
- فائق
- مدعومة
- جدول
- أخذ
- TD
- قالب
- •
- الدولة
- العالم
- شيء
- الأشياء
- فكر
- ثلاثة
- طوال
- إلى
- طن
- جدا
- تماما
- مسار
- صحيح
- رأسا على عقب
- us
- تستخدم
- المستخدمين
- ux
- انتظر
- طرق
- ابحث عن
- سواء
- التي
- من الذى
- كسب
- يتساءل
- للعمل
- العالم
- قيمة
- سوف
- اكتب
- أنت
- حل متجر العقارات الشامل الخاص بك في جورجيا
- زفيرنت