Верх страницы
Обложка к записи 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

Ссылки

ВКонтакте
Одноклассники
Linkedin
Telegram
WhatsApp

Комментарии
Подписаться
Уведомить о
guest
31 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Виталий
8 лет назад

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Tapka
Tapka
7 лет назад

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Не за что)

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

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

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

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

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

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

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

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