Не поймите меня неправильно, IE не поддерживает расширенные селекторы CSS3, включая последнюю версию IE8 (подробности см. в разделе «Поддержка селекторов CSS браузером»), но селекторы CSS действительно очень полезны. Они могут значительно упростить нашу работу и улучшить наш код. эффективность позволяет нам легко создавать легко поддерживаемые страницы.
Однако поддержка IE расширенных селекторов CSS, особенно селекторов CSS3, не позволяет нам продвигать применение селекторов CSS. Однако, хотя мы не можем контролировать долю рынка браузеров, мы можем улучшить нашу работу с помощью некоторых технологий. Мы также можем использовать другие технологии, чтобы позволить IE замаскировать селекторы CSS3.
Кит Кларк, инженер веб-разработки из Великобритании, разработал решение JavaScript, позволяющее IE поддерживать селекторы CSS3. Этот скрипт поддерживает различные версии от IE5 до IE8.
использование
Вам просто нужно скачать скрипт DOMAssistant Роберта Наймана и ie-css3.js и импортировать их в тег заголовка вашей страницы, вот так:
<голова>
<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
<script type="text/javascript" src="ie-css3.js"></script>
</голова>
Поддерживаемые селекторы
n-й ребенок
n-й-последний ребенок
n-го типа
n-й-последний-типа
первенец
последний ребенок
единственный ребенок
первый в своем роде
последний тип
единственный тип
пустой
Некоторые ограничения ie-css3
Таблицы стилей должны быть представлены через тег <link>. Таблицы стилей на уровне страницы или встроенные таблицы стилей не будут иметь никакого эффекта. но
Вы можете использовать @import во внешних файлах стилей для импорта других файлов стилей;
Файл таблицы стилей должен быть размещен под тем же доменным именем, что и страница;
Файлы стилей, использующие путь file://, не будут работать из-за проблем с безопасностью браузера;
Селектор :not() пока не поддерживается;
Этот метод не является динамическим. Изменение DOM после применения стиля будет недействительным.
Как это работает?
ie-css3.js загружает каждый файл стиля для страницы и анализирует его псевдоселекторы CSS3. Если селектор найден, он заменяется одноименным классом CSS. Например: div:nth-child(2) станет div._iecss-nth-child-2. Затем DOMAssistant Роберта Наймана используется для поиска узла DOM, соответствующего селектору CSS3 элемента, а затем добавляет к нему соответствующий класс CSS.
В конечном итоге таблица стилей элемента будет заменена новой версией, а затем соответствующий стиль будет добавлен к соответствующему элементу с помощью селекторов CSS3.
Избегайте интерпретатора CSS IE
Согласно W3C, браузер должен игнорировать правила CSS, которые он не распознает. Это создает проблему — нам нужно использовать селекторы CSS3 в файле таблицы стилей, но IE их отбросит.
Чтобы избежать этой проблемы, каждый файл стиля загружается через XMLHttpRequest. Это позволяет сценарию обходить встроенный в браузер интерпретатор CSS и читать необработанный файл CSS.
Посетите домашнюю страницу проекта
Загрузите ie-css3.js
Скачать DOMAssistant
альтернатива
Очевидно, что это не идеальное решение для веб-сайтов Ajax, оно в принципе непригодно, поскольку изменение DOM после применения сгенерированной таблицы стилей не будет эффективным. Но на самом деле мы можем сами настроить ie-css3. Это просто не так умно, как этот.