الجزء المثير للاهتمام من هذه الإحصائيات هو أن أرقام IE6 وIE7 وIE8 متقاربة للغاية، مما يمنع متصفح Microsoft واحد من السيطرة على المشهد، وهو عكس ما كان عليه الحال في الماضي. بناءً على هذه الإحصائيات المؤسفة، من الضروري للمطورين إجراء اختبار شامل لجميع متصفحات IE المستخدمة حاليًا عند تطوير مواقع الويب للعملاء، ويمكن أن يؤدي ذلك أيضًا إلى جذب المزيد من المستخدمين للمشاريع الشخصية.
بفضل مكتبات (أطر عمل) JavaScript، أصبح اختبار JavaScript عبر المتصفحات أقرب إلى الكمال بقدر ما يسمح به الوضع الحالي. لكن هذا ليس هو الحال في تطوير CSS، خاصة عندما يتعلق الأمر بالإصدارات الثلاثة من IE الموجودة حاليًا.
تحاول هذه المقالة توفير مرجع تفصيلي وسهل الاستخدام للمطورين المختلفين الذين يرغبون في فهم دعم CSS لـ IE6 وIE7 وIE8. يحتوي هذا المرجع على نظرة عامة وتوافق للمواقف التالية:
أ. العناصر التي يدعمها أحد المستعرضات الثلاثة ولكن لا يدعمها المستعرضان الآخران
ب. العناصر التي يدعمها اثنان من المتصفحات الثلاثة ولكن لا يدعمها متصفح واحد
لا تناقش هذه المقالة:
أ. العناصر التي لا تدعمها المتصفحات الثلاثة
ب. السمات الخاصة
لذلك، تركز هذه المقالة على الاختلافات بين المتصفحات الثلاثة، بدلاً من التركيز على أوجه القصور الضرورية في الدعم. وتنقسم القائمة إلى الأقسام الخمسة التالية:
1. المحددات والميراث
2. الطبقات الزائفة والعناصر الزائفة
3. دعم السمة
4. تقنيات أخرى مختلفة
5. الأخطاء الهامة ومشكلات عدم التوافق
1. المحددات والميراث
أ. محدد فرعي
مثال
| الجسم > ص { اللون: #ففف؛ } |
يصف
يقوم المحدد الفرعي بتحديد جميع العناصر الفرعية المباشرة لعنصر أصل محدد. في المثال أعلاه، body هو العنصر الأصلي وp هو العنصر الفرعي.
حالة الدعم
| رقم IE6 IE7 نعم IE8 نعم |
البق
في IE7، لن تعمل المحددات الفرعية إذا كان هناك تعليق HTML بين العلامة الأصلية والعلامة الفرعية.
ب. نوع السلسلة
مثال
| .class1.class2.class3 { الخلفية: #ففف؛ } |
يصف
يتم استخدام فئة السلسلة لإرسال عنصر HTML مع إعلانات فئة متعددة، مثل هذا:
| <div class="class1 class2 class3"> <p>المحتوى هنا.</p> </div> |
حالة الدعم
| رقم IE6 IE7 نعم IE8 نعم |
البق
يبدو أن IE6 يدعم هذا الموقف، لأنه يمكنه مطابقة الفئة الأخيرة في السلسلة بالعنصر الذي يستخدم تلك الفئة، ومع ذلك، لا يمكنه تقييد عنصر باستخدام جميع الفئات في السلسلة.
ج. محدد السمات
مثال
| أ[هريف] { اللون: #0f0؛ } |
يصف
يسمح هذا المحدد بتحديد موقع العنصر طالما أنه يحتوي على السمات المحددة. في المثال أعلاه، ستكون جميع العلامات التي تحتوي على سمات href مؤهلة، بينما لن تكون العلامات التي لا تحتوي على سمات href مؤهلة.
حالة الدعم
| رقم IE6 IE7 نعم IE8 نعم |
د. محدد الأخوة القريبين
مثال
| ح1+ص { اللون: #f00؛ } |
يصف
يحدد هذا المحدد علامات الأخوة المجاورة للعنصر المحدد. المثال أعلاه سوف يؤهل العلامة p، ولكن يجب أن تكون شقيقة للعلامة h1 ويجب أن تتبع العلامة h1 مباشرة. على سبيل المثال:
| <h1>العنوان</h1> <p>المحتوى هنا.</p> <p>المحتوى هنا.</p> |
في الكود أعلاه، سيكون نمط CSS فعالاً فقط للصفحة الأولى. لأنه شقيق h1 ويتبع h1. p الثاني هو أيضًا شقيق h1، لكنه لا يتبع h1 مباشرة.
حالة الدعم
| رقم IE6 IE7 نعم IE8 نعم |
البق
في IE7، لن يكون لمحددات الأخوة المتجاورة أي تأثير إذا كان هناك تعليق HTML بين الأشقاء.
E. منتقي الأخوة العاديين
مثال
| ح1~ص { اللون: #f00؛ } |
يصف
يحدد هذا المحدد جميع العناصر الشقيقة التي تتبع العنصر المحدد. سيتم تطبيق تطبيق هذا المحدد على المثال أعلاه على كلتا علامتي p. بالطبع، إذا كان هناك عنصر p يظهر قبل h1، فلن تتم مطابقة ذلك العنصر p.
حالة الدعم
| رقم IE6 IE7 نعم IE8 نعم |