لا تفهموني خطأ، IE لا يدعم محددات CSS3 المتقدمة، بما في ذلك أحدث إصدار من IE8 (راجع "دعم المتصفح لمحددات CSS" للحصول على التفاصيل)، ولكن محددات CSS مفيدة للغاية بالفعل ويمكنها تبسيط عملنا إلى حد كبير وتحسين الكود الخاص بنا الكفاءة تجعل من السهل علينا إنشاء صفحات قابلة للصيانة بدرجة كبيرة.
ومع ذلك، فإن دعم IE لمحددات CSS المتقدمة، وخاصة محددات CSS3، منعنا من الترويج لتطبيق محددات CSS. ومع ذلك، على الرغم من أننا لا نستطيع التحكم في الحصة السوقية للمتصفحات، إلا أنه يمكننا تحسين عملنا من خلال بعض التقنيات. يمكننا أيضًا استخدام تقنيات أخرى للسماح لـ IE بدعم محددات CSS3 بشكل مقنع.
قام كيث كلارك، وهو مهندس تطوير ويب من المملكة المتحدة، بتطوير حل JavaScript لتمكين IE من دعم محددات CSS3. يدعم هذا البرنامج النصي إصدارات مختلفة من IE5 إلى IE8.
الاستخدام
كل ما عليك فعله هو تنزيل البرنامج النصي DOMAssistant الخاص بـ Robert Nyman وie-css3.js واستيرادهما في علامة الرأس لصفحتك، مثل هذا:
<الرأس>
<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
<script type="text/javascript" src="ie-css3.js"></script>
</الرأس>
المحددات المدعومة
طفل نون
الطفل الأخير
من النوع
ن-الأخير من النوع
الطفل الأول
الطفل الأخير
الطفل الوحيد
الأول من النوع
آخر من النوع
فقط من النوع
فارغ
بعض القيود على ie-css3
يجب تقديم أوراق الأنماط من خلال علامة <link>. لن يكون لأوراق الأنماط على مستوى الصفحة أو أوراق الأنماط المضمنة أي تأثير. لكن
يمكنك استخدام @import في ملفات الأنماط الخارجية لاستيراد ملفات أنماط أخرى؛
يجب وضع ملف ورقة الأنماط تحت نفس اسم المجال مثل الصفحة؛
لن تعمل ملفات الأنماط التي تستخدم المسار file:// بسبب مشكلات تتعلق بأمان المتصفح؛
المحدد :not() غير مدعوم بعد؛
هذه الطريقة ليست ديناميكية. تغيير DOM بعد تطبيق النمط سيكون غير صالح.
كيف يعمل؟
يقوم 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 الأولي.
قم بزيارة الصفحة الرئيسية للمشروع
تحميل ie-css3.js
تحميل DOMAsistant
بديل
من الواضح أن هذا ليس حلاً مثاليًا لمواقع Ajax، فهو غير قابل للاستخدام بشكل أساسي، لأن تغيير DOM بعد تطبيق ورقة الأنماط التي تم إنشاؤها لن يكون فعالاً. ولكن في الحقيقة يمكننا تخصيص ie-css3 بأنفسنا. انها ليست ذكية مثل هذا واحد.