Css Css Selectors

فهم محددات السمات في CSS2 باستخدام الـ Regex: دليل شامل

عند تصميم المواقع الإلكترونية، يمكن أن يكون تنسيق العناصر بدقة تحديًا حقيقيًا، خاصة عندما يتعلق الأمر بعزل عناصر معينة بناءً على سماتها. مع تطور معايير الويب، قد تسأل نفسك: كيف يمكنني استخدام CSS لاختيار العناصر بناءً على قيم السمات؟ هنا يأتي دور قوة محددات السمات في CSS2 وregex.

التحدي

قد تتذكر وقتًا كنت تريد فيه إضافة أنماط خاصة لجميع الروابط الخارجية في صفحة الويب الخاصة بك. على سبيل المثال، كنت تهدف إلى تزيين جميع علامات <a> التي تحتوي على رابط HTTPS من خلال تطبيق رمز بجانبها. قد تكون قد صادفت حلاً يبدو مثل هذا:

a[href=http] {
    background: url(external-uri);
    padding-left: 12px;
}

ومع ذلك، سرعان ما وجدت أن هذا النهج لم يعمل كما هو متوقع. فكيف يمكنك اختيار جميع علامات <a> التي تبدأ سمة href الخاصة بها بـ “http” بشكل صحيح؟

الحل: محددات السمات

فهم محددات السمات

توفر CSS آليات لاختيار العناصر بناءً على سماتها، على الرغم من أنها قد لا تدعم regex بشكل صارم. إليك تفصيل لمختلف أنواع محددات السمات:

  1. محدد السمة العام:

    • الصيغة: [att]
    • يطابق أي عنصر يحتوي على السمة المحددة، بغض النظر عن قيمتها.

  2. محدد المطابقة الدقيقة:

    • الصيغة: [att=val]
    • يستهدف العناصر التي تساوي قيمة السمة فيها القيمة المحددة تمامًا.

  3. محدد الكلمات:

    • الصيغة: [att~=val]
    • يطابق العناصر حيث تكون قيمة السمة عبارة عن قائمة مفصولة بمسافات من “الكلمات”، يجب أن تتطابق واحدة منها مع القيمة المحددة تمامًا.

  4. محدد القائمة المنقوطة:

    • الصيغة: [att|=val]
    • يطابق العناصر التي تبدأ قيمتها بالسمة المحددة، تليها واصلة. عادةً ما يُستخدم هذا لمطابقة السمات الخاصة باللغة.

اختيار الروابط التي تبدأ بـ http

لاختيار جميع الروابط التي تبدأ بـ “http”، تحتاج إلى الصيغة CSS التالية:

a[href^=http] {
    background: url(external-uri);
    padding-left: 12px;
}

إليك ما يحدث:

  • يعني العامل ^= “يبدأ بـ”، لذا ستُطبق الأنماط المحددة على أي رابط يبدأ سمة href الخاصة به بـ “http”.

توافق المتصفح

من المهم ملاحظة أنه بينما تحتوي CSS3 على محددات أكثر تقدمًا، إلا أن ليس جميع المتصفحات تدعم هذه المحددات بشكل موحد. على سبيل المثال، قد لا يتم دعم المحدد ^= في الإصدارات القديمة من Internet Explorer. لذلك، تتضمن أفضل الممارسات التحقق من التوافق الحالي وربما استخدام اكتشاف الميزات لأنماط احتياطية.

اختبار محدداتك

يمكنك أيضًا اختبار مدى فعالية بعض المحددات في متصفحات مختلفة باستخدام أدوات مثل CSS Selector Test Suite. يمكن أن يساعدك ذلك في تقييم التوافق قبل نشر أنماطك.

الخلاصة

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

لا تتردد في التعمق في المواصفات الرسمية للحصول على مزيد من الإيضاحات حول محددات CSS، وتأكد دائمًا من اختبار أنماطك عبر متصفحات مختلفة لضمان تجربة مستخدم متسقة.