لا تفهموني خطأ، IE لا يدعم محددات CSS3 المتقدمة، بما في ذلك أحدث إصدار من IE8 (راجع "دعم المتصفح لمحددات CSS" للحصول على التفاصيل)، ولكن محددات CSS مفيدة للغاية بالفعل ويمكنها تبسيط عملنا إلى حد كبير وتحسين الكود الخاص بنا الكفاءة تجعل من السهل علينا إنشاء صفحات قابلة للصيانة بدرجة كبيرة.
ومع ذلك، فإن دعم IE لمحددات CSS المتقدمة، وخاصة محددات CSS3، منعنا من الترويج لتطبيق محددات CSS. ومع ذلك، على الرغم من أننا لا نستطيع التحكم في الحصة السوقية للمتصفحات، إلا أنه يمكننا تحسين عملنا من خلال بعض التقنيات. يمكننا أيضًا استخدام تقنيات أخرى للسماح لـ IE بدعم محددات CSS3 بشكل مقنع.
قام كيث كلارك، وهو مهندس تطوير ويب من المملكة المتحدة، بتطوير حل JavaScript لتمكين IE من دعم محددات CSS3. يدعم هذا البرنامج النصي إصدارات مختلفة من IE5 إلى IE8.
الاستخدام
كل ما عليك فعله هو تنزيل البرنامج النصي DOMAssistant الخاص بـ Robert Nyman وie-css3.js واستيرادهما في علامة الرأس لصفحتك، مثل هذا:
<الرأس>
المحددات المدعومة
بعض القيود على ie-css3
كيف يعمل؟
يقوم ie-css3.js بتنزيل كل ملف نمط للصفحة وتحليل محدداته الزائفة في CSS3. إذا تم العثور على محدد، فسيتم استبداله بفئة CSS التي تحمل الاسم نفسه. على سبيل المثال: div:nth-child(2) سيصبح div._iecss-nth-child-2. يتم بعد ذلك استخدام DOMAssistant الخاص بـ Robert Nyman للعثور على عقدة DOM التي تطابق محدد CSS3 الخاص بالعنصر، ثم يتم إضافة فئة CSS المقابلة إليها.
في النهاية، سيتم استبدال ورقة أنماط العنصر بالإصدار الجديد، ثم تتم إضافة النمط المقابل إلى العنصر المقابل باستخدام محددات CSS3.
تجنب مترجم IE CSS
وفقًا لـ W3C، يجب أن يتجاهل المتصفح قواعد CSS التي لا يتعرف عليها. يمثل هذا مشكلة - نحتاج إلى الاستفادة من محددات CSS3 في ملف ورقة الأنماط، لكن IE يتجاهلها.
لتجنب هذه المشكلة، يتم تنزيل كل ملف نمط عبر XMLHttpRequest. يسمح هذا للبرنامج النصي بتجاوز مترجم CSS المدمج في المتصفح والقدرة على قراءة ملف CSS الأولي.
بديل
من الواضح أن هذا ليس حلاً مثاليًا لمواقع Ajax، فهو غير قابل للاستخدام بشكل أساسي، لأن تغيير DOM بعد تطبيق ورقة الأنماط التي تم إنشاؤها لن يكون فعالاً. ولكن في الحقيقة يمكننا تخصيص ie-css3 بأنفسنا. انها ليست ذكية مثل هذا واحد.