إضافة ستايل معين لإنترنت إكسبلورر فقط

رغم إعلان شركة مايكروسوفت عن نهاية متصفحها الشهير إنترنت إكسبلورر وتعويضه بمتصفح آخر باسم جديد، إلا أن هذا لا يعني إهماله كليا في الوقت الحالي، فهو لا يزال أحد المتصفحات الأكثر استعمالا في العالم، وبالتالي وجب علينا أن نتأكد دائما من أن تطبيقاتنا تعمل عليه (على الأقل في النسخ الجديدة انطلاقا من IE9) حتى نضمن الدعم الكامل لموقعنا أو تطبيقنا من طرف أكبر عدد ممكن من المتصفحات.
وإذا كنت مطورا للواجهات الأمامية (Front-end Web Developer) فبالتأكيد سبق لك أن واجهت بعض المشاكل مع إنترنت إكسبلورر خاصة مع النسخ القديمة IE6 و IE7، لذلك نظطر في بعض الأحيان إلى حلول ترقيعية من أجل حل تلك المشاكل وذلك عن طريق إضافة بعض أكواد ال CSS التي تعمل فقط على IE وذلك بطرق مختلفة لعل أبرزها :
استعمال CSS hacks

CSS hacks هي رموز يتم إضافتها للخاصية (_ , * …) في كود CSS ويتم عن طريقها استهداف متصفح دون الآخر، كما ستلاحظون في المثال التالي:
body { background-color: white; /* يعمل في جميع المتصفحات */ *background-color : black; /* يعمل في انترنت إكسبلورر 7 و6 */ _background-color : blue; /* يعمل في انترنت إكسبلورر 6 */ }

1
2
3
4
5
body {
background-color: white; /* يعمل في جميع المتصفحات */
*background-color : black; /* يعمل في انترنت إكسبلورر 7 و6 */
_background-color : blue; /* يعمل في انترنت إكسبلورر 6 */
}

عند تجربة الكود أعلاه سنرى أن لون الخلفية سيكون أسودا في IE7 وأزرقا في IE6 بينما سيكون أبيضا في باقي المتصفحات.
استعمال التعليقات الشرطية Conditional Comments

1.الطريقة الأولى: إضافة كلاس لوسم <html>

عن طريق التعليقات الشرطية يمكن مثلا إضافة كلاس لوسم ال html على حسب نسخة الإنترنت إكسبلورر التي فتحنا فيها الصفحة، مثلا ie8 إذا كنا في IE8 و ie7 إذا كنا في IE7 وهكذا، إليكم المثال:
<!DOCTYPE html>    <html>

1
2
3
4
5
<!DOCTYPE html>



<html>

في المثال أعلاه قمنا بإضافة كلاس خاصة للعنصر <html> على حسب متصفح IE الذي نعمل عليه (ie6،ie7،ie8) وهكذا يمكننا استعمال هذه الكلاسات في ملف ال CSS كما ستلاحظون في المثال التالي :
body{ background-color: white; } .ie7 body{ background-color: black; /* يعمل في انترنت إكسبلورر 7 */ } .ie6 body{ background-color: blue; /* يعمل في انترنت إكسبلورر 6 */ }

1
2
3
4
5
6
7
8
9
body{
background-color: white;
}
.ie7 body{
background-color: black; /* يعمل في انترنت إكسبلورر 7 */
}
.ie6 body{
background-color: blue; /* يعمل في انترنت إكسبلورر 6 */
}

2.الطريقة الثانية: إضافة ملف CSS خاص ب IE

هذه الطريقة هي الأفضل حيث سنقوم بإنشاء ملف أو عدة ملفات CSS حسب الحاجة ونقوم باستدعائها في متصفح إنترنت إكسبلورر الذي نريد استهدافه فقط، وإليكم الكيفية:

  

1
2
3
4
5
6
7
8
9




وهكذا نضع الأكواد التي تخص متصفح IE6 في ملف ie6.css والستايل الخاص ب IE7 في ملف ie7 وهكذا.
هذه أهم الطرق التي يتم اللجوء إليها لاستهداف متصفحات الإنترنت إكسبلورر، هنا أشرنا لمتصفح IE6 فقط كمثال لكونه أصبح من المتصفحات التي لم يعد غالبية المطورين يكترثون لها خاصة منذ ظهور HTML5 و CSS3.