استخدام CSS الشرطي

يقدم

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

الاستخدام الأساسي

يتم استخدام CSS الشرطي بشكل أساسي للإشارة إلى ما إذا كان يجب استخدام عبارة CSS معينة في متصفح معين. بالطبع لا ترغب في القيام بذلك كثيرًا، لكنه قد يكون مفيدًا جدًا عندما تحتاج إلى استهداف متصفح ما. يمكنك أن ترى في قائمة دعم U4EA أن معظم المتصفحات تدعم هذه الطريقة.

يمكن أن يبدأ أي إعلان أو كتلة CSS بإعلانات شرطية. هناك ثلاثة أنواع أساسية من البادئات:

[إذا كان المتصفح {!}]

[إذا {!} إصدار المتصفح]

[إذا كان {!} إصدار المتصفح الشرطي]

! - نفي العبارة ( مثلاً NOT ) - اختياري

المتصفح - المتصفح الذي تم تقديم الإعلان عنه

"آي إي" - إنترنت إكسبلورر

'Gecko' - متصفح يستند إلى Gecko (Firefox وCamino وما إلى ذلك)

"Webkit" - المتصفحات المستندة إلى Webkit (Safari وShiira وما إلى ذلك)

"SafMob" - Safari للجوال (iPhone / iPod Touch)

"أوبرا" - متصفح أوبرا

"IEmac" - إصدار Mac من Internet Explorer

"كونك" - كونكيورر

'IEmob' - IE للجوال

"PSP" - بلاي ستيشن محمولة

'NetF' - Net Front (آسف على جهلي بمسألة السكر والطماطم، لا أعرف ما هذا)

الإصدار - إصدار المتصفح المستهدف

الحالة - عامل حسابي

لتر - أقل من

LTE - أقل من أو يساوي

مكافئ - يساوي

gte - أكبر من أو يساوي

جي تي - أكبر من

بعض الأمثلة على العبارات الشرطية:

// مثال على بناء جملة CSS الشرطي

[إذا كان IE] - إذا كان المتصفح IE

[إذا! أوبرا] - إذا كان المتصفح ليس أوبرا

[إذا كان IE 5] - إذا كان المتصفح IE 5

[إذا lte IE 6] - إذا كان المتصفح IE 6 أو أقل (IE 5، IE 4، وما إلى ذلك)

[if ! gt IE 6] - يعادل العبارة المذكورة أعلاه، إذا لم يكن إصدار المتصفح أعلى من IE 6

لأن العديد من الحالات تعتقد أن div عبارة عن فئة مربعة ذات عرض وحشوة. لذلك يجب أيضًا أن يتصرف بشكل جيد في IE 5 (أرى أن الكثير من الأشخاص قد أسقطوا الدعم لـ IE 5، ولكن هذا مثال كلاسيكي). نموذج الصندوق الخاص بـ IE 5 ليس قياسيًا، لذا إليك كيفية حله باستخدام CSS الشرطي:

// مثال على نموذج مربع CSS الشرطي

شعبة.مربع {

العرض: 400 بكسل؛

[إذا كان IE 5] العرض: 600 بكسل؛

الحشو: 0 100 بكسل؛
}

كما ترون، يتيح لك CSS الشرطي الاحتفاظ بملف CSS واحد فقط بدلاً من عدة ملفات تتطلب استخدام تعليقات IE الشرطية. يساعد هذا في تبسيط عملية الصيانة ويجعل التعليمات البرمجية أكثر وضوحًا.

وللمضي قدمًا، هناك ميزة مهمة في CSS الشرطي وهي أنه عندما يعثر على إعلان @import CSS، فإنه يفتح تلقائيًا ويدرج الملف الذي يحتاج إلى استيراده. يؤدي هذا إلى تقليل وقت تحميل الصفحة لأن المتصفح يحتاج فقط إلى تقديم طلب HTTP واحد لملف CSS.

على الرغم من استخدام CSS الشرطي في الغالب لإصدارات مختلفة من متصفحات IE، إلا أن CSS الشرطي يكون مفيدًا جدًا أيضًا عندما تواجه أخطاء في المتصفحات الأخرى يصعب إصلاحها (باستخدام Javascript بشكل أساسي لإصلاحها). تتضمن الأمثلة أخطاء صور الخلفية في Firefox 2 وSafari 2 التي تفتقر إلى دعم "display: inline-block". لقد تم تصحيح هذه الأخطاء في أحدث الإصدارات من هذه المتصفحات، ولكن عندما تشغل هذه المتصفحات حصة سوقية معينة، فإن التوافق مع الإصدارات السابقة مهم للغاية.