Решение: применение стилей CSS только к не-IE браузерам

Быстрый ответ

Для решения этой проблемы предлагается использовать обнаружение возможностей браузера, воплощённое в библиотеке Modernizr. Благодаря такому подходу вы избегаете проблем, связанных с условными комментариями IE:

// IE, настало время уступить место современным браузерам!
if (!Modernizr.ie) {
  // Здесь код для всех браузеров, кроме IE
}

Таким образом включите Modernizr в свой проект:

<script src="https://cdn.jsdelivr.net/modernizr/latest/modernizr.min.js"></script>

Самое главное — это стремление к кроссбраузерности кода, при этом конкретные улучшения вносятся только тогда, когда это необходимо.

Пояснение по условным комментариям

Условные комментарии IE — это наследие того времени, когда Internet Explorer строго следовал веб-стандартам. Начиная с десятой версии, создатели IE отказались от этих комментариев, перейдя к более современным методикам веб-разработки.

Применение обнаружения возможностей браузера

Обнаружение возможностей браузера — это выбор подходящего средства для нужной задачи, а не простое угадывание:

• Применяйте Modernizr для определения функций, поддерживаемых браузером.
• Используйте polyfills, которые дополняют браузер недостающими функциями.

Отказ от идентификации браузера

Выявление браузера иногда становится лишним, и может привести к ошибкам:

• Браузеры постоянно обмениваются функциями, что делает идентификацию браузера избыточной.
• User-agent может быть таким же изменчивым, что и идентификация браузера ненадёжной.

Создание устойчивых дизайнов

Дизайн должен быть независимым от устройства для работы в разных браузерах:

• Применяйте медиа-запросы и адаптивные макеты для создания универсальных интерфейсов.

Визуализация

Представьте условный комментарий <!--[if !IE]> как контрольный пункт доступа:

<!-- Сценарий контрольного пункта -->
| Браузер       | Попытка рукопожатия | Результат        |
| ------------- | ------------------ | ------------- |
| IE            | 🚫                | Доступ закрыт |
| Не-IE (например, Chrome, Firefox) | ✋            | Доступ открыт |

Визуализация условного комментария:

<!--[if !IE]> <p>Для браузеров, не являющихся IE — вперёд! </p> <![endif]-->

Таким образом, IE останавливается, в то время как другие браузеры имеют свободный доступ.

Альтернативные стратегии

Анализ User-agent на сервере

Определите информацию о браузере на сервере при подготовке HTML и CSS для конкретного пользователя:

• Учтите затраты ресурсов на поддержку разных браузеров.
• Используйте кэширование разумно, чтобы избежать проблем с доставкой контента.

Подробнее об этом расскажет наш спикер на видео

Стилизация с помощью классов

JavaScript может добавить класс к HTML-элементу:

// Назначим стиль для страницы
document.documentElement.classList.add('non-ie');

А дальше уже обращаемся к этому стилю с помощью CSS:

// Браузеры, кроме IE, теперь могут иначе выглядеть
.non-ie .ie-specific-style {
  display: none;
}

Polyfills и Shims

Применяйте polyfills, чтобы заполнить пробелы в функционале браузеров:

• Загружайте их только при необходимости, избегая лишней нагрузки на современные браузеры.

Предвидение и решение возможных проблем

Совместимость с jQuery

Используйте jQuery Migrate Plugin, чтобы связать разные версии jQuery:

• Это поможет сохранить функциональность кода.
• Постепенно будет происходить удаление устаревшего кода без лишней спешки.

Независимые стили CSS

Создавайте стили в отдельных файлах:

• Это заметно упрощает тестирование в разных браузерах.
• Это дает преимущества использования CDN для ускорения загрузки.

Полезные материалы

1. О условных комментариях (Internet Explorer) | Microsoft Learn — Детальная информация о условных комментариях в IE.
2. CSS – Условные комментарии — Руководство по примению условных комментариев для CSS.
3. Can I use... Support tables for HTML5, CSS3, etc — Сервис для определения поддержки браузерами современных веб-технологий.
4. Документация Modernizr — Полное руководство по использованию Modernizr для определения возможностей браузеров.
5. internet explorer – Определение версии IE с помощью CSS Capability/Feature Detection – Stack Overflow — Способы определить версию IE при помощи CSS.
6. How To Create an IE-Only Stylesheet | CSS-Tricks – CSS-Tricks — Как создать набор стилей специально для IE.
7. Введение в DOM – Веб-API | MDN — Общий обзор модели объекта документа в JavaScript.