Использование расширенных селекторов CSS3 в IE

Не поймите меня неправильно, IE не поддерживает расширенные селекторы CSS3, включая последнюю версию IE8 (подробности см. в разделе «Поддержка селекторов CSS браузером»), но селекторы CSS действительно очень полезны. Они могут значительно упростить нашу работу и улучшить наш код. эффективность позволяет нам легко создавать легко поддерживаемые страницы.

Однако поддержка IE расширенных селекторов CSS, особенно селекторов CSS3, не позволяет нам продвигать применение селекторов CSS. Однако, хотя мы не можем контролировать долю рынка браузеров, мы можем улучшить нашу работу с помощью некоторых технологий. Мы также можем использовать другие технологии, чтобы позволить IE замаскировать селекторы CSS3.

Кит Кларк, инженер веб-разработки из Великобритании, разработал решение JavaScript, позволяющее IE поддерживать селекторы CSS3. Этот скрипт поддерживает различные версии от IE5 до IE8.

использование

Вам просто нужно скачать скрипт DOMAssistant Роберта Наймана и ie-css3.js и импортировать их в тег head вашей страницы, вот так:

<голова>

Поддерживаемые селекторы

• n-й ребенок
• n-ый-последний ребенок
• n-го типа
• n-й-последний-типа
• первенец
• последний ребенок
• единственный ребенок
• первый в своем роде
• последний тип
• единственный тип
• пустой

Некоторые ограничения ie-css3

• Таблицы стилей должны быть представлены через тег . Таблицы стилей на уровне страницы или встроенные таблицы стилей не будут иметь никакого эффекта. но
• Вы можете использовать @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 самостоятельно. Это просто не так умно, как этот.