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
Ссылки
- So IE10 just released a preview for Win7. It’s noticeably faster than Chrome, but still renders CSS like a dead toddler. Oh, and you can’t target IE10 with conditional comments now
- IE10 CSS Hacks
Проверил — работает. Спасибо, а то обыскал пол интернета уже наверное ради данного хака
Спасибо, очень помогло)))
Благодарю, очень полезная статья, вы прям спасли меня
Всегда пожалуйста 🙂
Если хак @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 ловите?
Спасибо, сработало для IE 10 в IE11 с режимом эмуляции
Пожалуйста!
Спасибо большое за статью! Помогла очень сильно!)
Пожалуйста!