إستخدام :is() في CSS

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

ما هي :is() ؟

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

لماذا تحتاج إلى :is() ؟

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

nav li, nav a {
  /* styles */
}

يمكنك كتابة هذا:

nav :is(li, a) {
  /* styles */
}

ولكن المزايا لا تنتهي عند الوضوح فحسب. يمكن أن يؤثر أيضًا على محددات الأولوية، مما قد يساعد على منع تنازعات التصميم.

استخدامات :is()

يمكن استخدام :is() في أي مكان يمكنك استخدام المنتقي القياسي. إليك بعض الأمثلة:

- تغيير لون النصوص لعناصر HTML متعددة:

p, h1, h2, h3 { color: ...} 

إلى

:is(p, h1, h2, h3) { color:..} 

- تنسيق عناصر القائمة:

nav li, nav a { ...}

إلى

nav :is(li, a) {...}

- المزج بين العديد من الحالات:

:is(:hover, :focus, :active) {...}

دعم المتصفحات

يعتبر :is() جديدًا نسبيًا، لذلك تحقق من دعم متصفحك قبل استخدامه في مشروع إنتاج. حاليًا يدعمه:

• - Chrome (الإصدار 88+)
• - Firefox (الإصدار 78+)
• - Safari (الإصدار 14.1+)
• - Opera (الإصدار 74+)

سيتم بالتأكيد تحسين الدعم بمرور الوقت، ولكن إذا كنت بحاجة إلى دعم المتصفحات القديمة، فقد ترغب في استخدام تقنيات التوافق القديمة.

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

شارك Share Tweet Share Share Share

انقر هنا

محمد نجيري (mnajiri@) مشرف على مدونة ماتريال ويب تحت الرابط التالي :https://mdwab.blogspot.com/ مند 2018 و أدعوك لمتابعتي عبر حسابي على أنستغرام