Верх страницы
Обложка к записи CSS: хаки для IE10 (обновлено)
Время для прочтения: 0 мин. 19 сек.

CSS: хаки для IE10 (обновлено)

В нынешнем году компания Microsoft заявила, что IE10 более не поддерживает условные комментарии. С их стороны это очень рискованный шаг. На протяжении многих лет веб-разработчики использовали условные комментарии, хаки и комбинацию данных способов для отделения браузеров IE от всех остальных.

Без условных комментариев в IE10 невозможно решить многие проблемы CSS, но способы все-таки есть.

Хак @cc_on

<!--[if !IE]><!-->
<script>if(/*@cc_on!@*/false){document.documentElement.className+=' ie10';}</script>
<!--<![endif]-->

После применения данного хака в IE10 к тегу <html> будет добавлен класс ie10. Теперь достаточно написать в CSS:

.ie10 .element {  
   /* стили только для IE10 */  
}

Пример кода

Данный хак работает и в IE11

Хак @media -ms-high-contrast

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* стили только для IE10 */  
} 

Пример кода

Данный хак работает и в IE11

Хак @media Zero Hack

@media screen and (min-width:0\0) {  
    /* стили только для IE9 - IE10 */  
} 

Пример кода

Данный хак работает и в IE9

Хак window.matchMedia

Так как IE10 поддерживает window.matchMedia, то можно попробовать сделать так:

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

Хак с VBArray

Подсмотрен в блоге у Евгения Степанищева:

if (top.VBArray) {
    // IE
}

Данный хак работает и в IE11, IE12

Хак 1-‘\0’

Подсмотрен в комментариях блога Евгения Степанищева:

if ( 1-'\0' ) {
    // IE
}

Данный хак работает и в IE11, IE12

Ссылки

Автор: Кобзарёв Михаил

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

31 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Виталий
11 лет назад

Проверил — работает. Спасибо, а то обыскал пол интернета уже наверное ради данного хака

Павел
Павел
11 лет назад

Спасибо, очень помогло)))

Evangeline Rei
Evangeline Rei
10 лет назад

Благодарю, очень полезная статья, вы прям спасли меня

Роман
Роман
10 лет назад

Если хак @cc_on работает и в ie11, не логичнее ли

заменить
document.documentElement.className+=’ ie10′;

на что-то наподобие
document.documentElement.className+=’ gt-ie9′;
?

Роман
Роман
10 лет назад

Кто же с головой на плечах будет гулить вашу заметку, когда есть документация Microsoft…

Антон
Антон
10 лет назад

у всех же есть js, почему просто не сделать if(navigator.userAgent.indexOf(‘MSIE 1’)>-1){…} а дальше как и в примере выше, например, добавляем класс для или т.п. это ведь самый удобный способ, можно узнать и версию браузера, и операционную систему и пр. все в одном блоке кода

Антон
Антон
10 лет назад
Ответить на  Кобзарёв Михаил

какую ж это погрешность он дает? или вы про подмену изерагента и пр. шалости?
тут все таки нормальная функция на js, которую можно использовать в будущем для идентификации любого браузера, лишней она не будет, я всегда использую именно ее, для различных задач. а здесь какой-то весьма сомнительный код, даже чисто внешне, я не любитель такого «мусора», с «псевдо»комментариями и пр.

Антон
Антон
10 лет назад
Ответить на  Кобзарёв Михаил

ну не популярными пусть люди не пользуются)). мне кажется их доля очень мала, разве что не знаю, даже в телевизорах браузер на движке вебКит вроде.
надо посмотреть насколько под ИЕ, но не думаю что там передается современная его версия, может быть под какой-нибудь 5 или 6, который уже ни у кого не стоит.

Tapka
Tapka
9 лет назад

Спасибо за статью!
А битрикс к присоединяет класс с названием браузера: bx-firefox bx-ie bx-ie11 bx-chrome.
Только в исходном коде это не видно

mihdan
9 лет назад
Ответить на  Tapka

По F12 в любом браузере можно посмотреть сгенерированный код — там эти классы присутствуют.

Tapka
Tapka
9 лет назад
Ответить на  mihdan

знаю, спасибо) просто сказала, что в исх.коде нет

mihdan
9 лет назад
Ответить на  Tapka

Я не в претензии)))

Tapka
Tapka
9 лет назад
Ответить на  mihdan

ну тогда я спокойна
))

Егор Желудков
Егор Желудков
8 лет назад

Подскажите, если сможете, очень нужно. К примеру, первый хак… мне нужно добавить его в wordpress, никак не пойму, как заставить его брать стили из .ie10, и куда вставлять скрипт.

mihdan
8 лет назад
Ответить на  Егор Желудков

Скрипт можете прописать в header.php

Егор Желудков
Егор Желудков
8 лет назад
Ответить на  mihdan

Прописал, но у меня еще есть отдельный скрипт там, который проверяет есть ли ie 7 и ie 8 и для них отдельные стили работают. А когда добавляю скрипт для ie 10 и прописываю в style.css селектор .ie 10 — он игнорирует вложенные в него стили.

Егор Желудков
Егор Желудков
8 лет назад

Сработало, спасибо!

mihdan
8 лет назад
Ответить на  Егор Желудков

Не за что)

Никита Иванов
Никита Иванов
7 лет назад

Ни один из способов не сработал

mihdan
7 лет назад
Ответить на  Никита Иванов

А какой IE ловите?

Костя Руднев
Костя Руднев
6 лет назад

Спасибо, сработало для IE 10 в IE11 с режимом эмуляции

Андрей
Андрей
4 лет назад

Спасибо большое за статью! Помогла очень сильно!)

Предыдущая запись
Следующая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы