Целевое использование CSS и JS только для IE 10

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

Чтобы создать стили, применимые только в IE10, используйте медиа-запрос -ms-high-contrast, который характерен для этого браузера:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .ie10-specific-style { property: value; /* Код исключительно для IE10 */ }
}

Такой код обеспечит корректное отображение ваших стилей именно в IE10.

Применение стилей: особенности в IE10 и Edge

Для того, чтобы направить стили на IE10, используйте хак с поддержкой -ms-ime-align:

@supports (-ms-ime-align: auto) {
  .ie10-specific { property: value; /* Стили предназначенные для IE10 */ }
}

Для Edge примените другой подход, например, определите поддержку с помощью @supports (-ms-accelerator:true). Для распознавания IE10 с помощью JavaScript, примените следующий код, который не окажет влияние на IE11:

if (window.matchMedia("(-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {
    document.documentElement.className += " ie10-style";
}

Не пренебрегайте важностью определения возможностей браузера. Библиотеки, такие как Modernizr и jQuery Migrate, упрощают работу со старыми функциями IE и его особенностями.

Организация специфических стилей для IE

Для улучшения структурирования и читаемости кода размещайте стили, специфические для IE, внутри блоков @media. Это позволит вам избежать применения таких стилей в браузерах, отличных от IE, и упростит поддержку кода.

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

Представьте, что Вы работаете в мастерской по настройке CSS:

Инструменты (🧰): [Отвертка, Молоток, Гаечный ключ, Специальный инструмент для IE10 (🪛)]

Настройка стилей под IE10 напоминает использование уникального инструмента:

@supports (-ms-ime-align: auto) {
  .selector {
    property: value; /* 🪛 Инструмент созданный для IE10 */
  }
}

Мы позаботились о предоставлении всех необходимых инструментов для работы со специфическими особенностями IE10.

Значимость соответствия стандартам и валидации

Проводите проверку вашего кода на соответствие стандартам. IE10 хорошо справляется со стандартами, однако иногда требуются специальные CSS-хаки или сбросы для IE11. Если ваш JavaScript привязан к определённой версии IE, условная компиляция JScript может стать вашим надежным помощником.

Фокусируемся на возможностях, а не на браузере

Следуйте лучшим практикам: обнаруживайте возможности, а не определяйте браузер. Воспользуйтесь Modernizr для проверки поддержки той или иной функции браузером.

element.onpropertychange = function() {
    if (event.propertyName === "value") {
        // Код специфичный для IE10. Это не баг, а фича!
    }
};

Наша цель — писать код, который всегда будет актуален.

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

1. Условные комментарии (Internet Explorer) | Microsoft Learn — Условные комментарии для IE...
2. Can I use... Support tables for HTML5, CSS3, etc — Скрытая поддержка CSS IE10...
3. @supports – CSS: Cascading Style Sheets | MDN — Осваиваем совместимость на уровне CSS...
4. Modernizr: библиотека для определения возможностей HTML5/CSS3 — Решения, реализованные при помощи Modernizr...
5. GitHub – aFarkas/html5shiv: Этот скрипт позволяет включать элементы HTML5 в устаревшем Internet Explorer. — Интеграция IE с HTML5...
6. BrowserStack: Most Reliable App & Cross Browser Testing Platform — Тестирование IE10 на реальных устройствах...
7. Изменения строки агента пользователя (Windows) | Microsoft Learn — Тайны строки агента пользователя IE10...