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

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

Ссылки

Пошерить
Запинить
Отправить
Вотсап

Смотрите также

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

Комментарии