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

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>

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

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

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

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

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

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

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

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

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

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

  • Tapka

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

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

      • Tapka

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

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

          • Tapka

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

  • Антон

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

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

      • Антон

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

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

          • Антон

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

  • Роман

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

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

  • Роман

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

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

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

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

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

  • Evangeline Rei

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

  • Павел

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

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