ie10
Время для прочтения: 1 мин. 32 сек.

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

Ссылки

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

27 комментариев

по хронологии
по рейтингу сначала новые по хронологии

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

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

Evangeline Rei

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

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

Всегда пожалуйста 🙂

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

заменить

document.documentElement.className+=' ie10';

на что-то наподобие

document.documentElement.className+=' gt-ie9';

?

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

Я думаю, если у человека есть своя голова на плечах, то он и сам способен поправить строку как ему заблагорассудится.

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

На момент написания статьи IE11 еще не было )))

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

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

Спорный момент 🙂 По запросу "CSS: хаки для IE10" - сайта мелкософта я не нашел 🙂

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

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

Ваш вариант дает большую погрешность и совпадает с первым хаком @cc_on

какую ж это погрешность он дает? или вы про подмену изерагента и пр. шалости?

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

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

Именно про это. Да и многие браузеры не из серии популярных имеют user-agent под IE. @cc_on - условная компиляция, специфичная для мелкософтовских браузеров, поэтому дает практически 100% результат.

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

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

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

Ну спорить не буду. Ваш вариант тоже имеет место быть )))

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

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

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

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

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

Егор Желудков

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

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

Егор Желудков

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

Егор Желудков

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

Не за что)

Никита Иванов

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

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