Как настроить таргетинг только на Internet Explorer 10 для определенных ситуаций, таких как CSS для Internet Explorer или код JavaScript для Internet Explorer? - PullRequest
Новая
       29

Как настроить таргетинг только на Internet Explorer 10 для определенных ситуаций, таких как CSS для Internet Explorer или код JavaScript для Internet Explorer?

154 голосов
/ 28 марта 2012

Как настроить таргетинг только на Internet Explorer 10 для определенных ситуаций, таких как CSS для Internet Explorer или код JavaScript для Internet Explorer?

Я пробовал это, но это не работает: 

<!--[if IE 10]>    <html class="no-js ie10" lang="en"> <![endif]-->
<!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

Internet Explorer 10 игнорирует условные комментарии и использует <html lang="en" class="no-js"> вместо <html class="no-js ie10" lang="en">.

Ответы [ 25 ]

130 голосов
/ 17 февраля 2013

Я бы не использовал JavaScript navigator.userAgent или $. Browser (который использует navigator.userAgent), поскольку он может быть подделан.

Для таргетинга на Internet Explorer 9, 10 и 11(Примечание: также последний Chrome): 

@media screen and (min-width:0\0) { 
    /* Enter CSS here */
}

Для таргетинга на Internet Explorer 10: 

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS here */
}

Для таргетинга на Edge Browser: 

@supports (-ms-accelerator:true) {
  .selector { property:value; } 
}

Источники:

111 голосов
/ 20 декабря 2012

Я нашел решение на этом сайте, где у кого-то был ценный комментарий :

Решение: 

if (Function('/*@cc_on return document.documentMode===10@*/')()){
    document.documentElement.className+=' ie10';
}

Это

  • не требует условных комментариев;
  • работает, даже если сжатие / обработка разбора комментариев;
  • нет класса ie10, добавленного в Internet Explorer 11;
  • с большей вероятностью будет работать, как и предполагалось, с Internet Explorer 11, работающим в режиме совместимости с Internet Explorer 10;
  • не нуждается в отдельном теге сценария (его можно просто добавить в другой код JavaScript в заголовке).1022 * не требуется jQuery для тестирования
62 голосов
/ 19 декабря 2012

Возможно, вы можете попробовать какой-нибудь jQuery следующим образом: 

if ($.browser.msie && $.browser.version === 10) {
  $("html").addClass("ie10");
}

Чтобы использовать этот метод, вы должны включить библиотеку jQuery Migrate, поскольку эта функция была удалена из основной библиотеки jQuery.довольно хорошо для меня.Но, конечно, нет замены условным комментариям!

62 голосов
/ 28 марта 2012

Internet Explorer 10 больше не пытается читать условные комментарии. Это означает, что он будет обрабатывать условные комментарии так же, как и любой другой браузер: как обычные комментарии HTML, то есть полностью игнорируется.Рассматривая разметку, приведенную в вопросе в качестве примера, все браузеры, включая IE10, будут полностью игнорировать части комментариев, выделенные серым цветом.Стандарт HTML5 не упоминает синтаксис условных комментариев, и именно поэтому они решили прекратить поддерживать его в IE10.

Обратите внимание, однако, что условная компиляция в JScript по-прежнему поддерживается, как показано в комментариях, а также более свежие ответы.Это не уйдет и в финальной версии, в отличие от jQuery.browser.И, конечно, само собой разумеется, что сниффинг пользовательского агента остается таким же хрупким, как и всегда, и никогда не должен использоваться ни при каких обстоятельствах.

Если вам действительно нужно ориентироваться на IE10, либо используйте условную компиляцию, которая все еще может увидеть поддержку вближайшее будущее или - если вы можете помочь - использовать библиотеку обнаружения функций, такую ​​как Modernizr вместо (или в сочетании с) обнаружения в браузере.Если ваш вариант использования не требует использования noscript или размещения IE10 на стороне сервера, прослушивание пользовательского агента будет скорее головной болью, чем жизнеспособным вариантом.

Звучит довольно громоздко, но помните, что для современного браузера это оченьв соответствии с сегодняшними веб-стандартами 1 , если вы написали совместимый код, который в высшей степени соответствует стандартам, вам не нужно откладывать специальный код для IE10, если это не является абсолютно необходимым, т.е.он должен напоминать другие браузеры с точки зрения поведения и рендеринга. 2 И это звучит неправдоподобно, учитывая историю IE, но сколько раз вы ожидали, что Firefox или Chrome будут вести себя одинаково только для удовлетворенияс тревогой?

Если у вас do есть законная причина для нацеливания на определенныебраузеры, во что бы то ни стало вынюхивают их с помощью других инструментов, предоставленных вам.Я просто говорю, что вам будет гораздо труднее найти такую ​​причину сегодня, чем она была раньше, и на самом деле это просто не то, на что вы можете положиться.

1 Не только IE10, но и IE9, и даже IE8, который обрабатывает большую часть зрелого стандарта CSS2.1 намного лучше, чем Chrome, просто потому, что IE8 был настолько ориентирован на соответствие стандартам (в то время CSS2.1 уже был довольно стабильным, с незначительными отличиями от сегодняшних рекомендаций), в то время как Chrome, похоже, представляет собой чуть более чем полутехническую техническую демонстрацию передовых псевдостандартов.

2 И я могу быть предвзятым, когда говорю это, но это точно так же, как и черт. Если ваш код работает в других браузерах, но не в IE, вероятность того, что это проблема с вашим собственным кодом , а не IE10, намного лучше, чем, скажем, 3 года назад, с предыдущими версиями IE. Опять же, я могу быть предвзятым, но давайте будем честными: не так ли? Просто посмотрите на ваши комментарии.

36 голосов
/ 14 июня 2013

Хорошее место для начала - Документация поддержки стандартов IE .

Вот как настроить таргетинг IE10 в JavaScript: 

if ("onpropertychange" in document && !!window.matchMedia) {
...
}

Вот как настроить таргетинг IE10 в CSS: 

@media all and (-ms-high-contrast: none) {
...
}

В случае, если IE11 необходимо отфильтроватьсброс через CSS, см. другой вопрос: Как написать CSS-хак для IE 11?

11 голосов
/ 02 февраля 2013

Я написал небольшой ванильный JavaScript-плагин под названием Layout Engine , который позволяет вам легко обнаруживать IE 10 (и любой другой браузер) простым способом, который не может быть подделан, в отличие от пользовательского агента.сниффинг.

Добавляет имя движка рендеринга в виде класса в тег html и возвращает объект JavaScript, содержащий поставщика и версию (при необходимости)

Ознакомьтесь с моим постом в блоге: http://mattstow.com/layout-engine.html и получите код на GitHub: https://github.com/stowball/Layout-Engine

11 голосов
/ 30 декабря 2012

Оба решения, размещенные здесь (с небольшими изменениями) работают: 

<!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className='ie10';}</script><!--<![endif]-->

или 

<script>if(Function('/*@cc_on return 10===document.documentMode@*/')()){document.documentElement.className='ie10';}</script>

Вы включаете любую из вышеперечисленных строк внутри тега head вашей html-страницы перед ссылкой css. И затем в файле css вы указываете свои стили, имеющие класс ie10 в качестве родителя: 

.ie10 .myclass1 { }

И вуаля! - другие браузеры остаются без изменений. И вам не нужен JQuery. Пример того, как я это реализовал, вы можете увидеть здесь: http://kardash.net.

7 голосов
/ 20 января 2013

Я использую этот скрипт - он устарел, но эффективен для нацеливания на отдельную таблицу стилей Internet Explorer 10 или файл JavaScript, включенный , только если в браузере Internet Explorer 10,так же, как вы бы с условными комментариями.JQuery или другой плагин не требуется. 

<script>
    /*@cc_on
      @if (@_jscript_version == 10)
          document.write(' <link type= "text/css" rel="stylesheet" href="your-ie10-styles.css" />');
      @end
    @*/
</script >
6 голосов
/ 20 марта 2013

Вы можете использовать PHP для добавления таблицы стилей для IE 10

Как: 

if (stripos($_SERVER['HTTP_USER_AGENT'], 'MSIE 10')) {
    <link rel="stylesheet" type="text/css" href="../ie10.css" />
}
5 голосов
/ 18 января 2013

Если вы должны сделать это, вы можете проверить строку агента пользователя в JavaScript: 

var isIE10 = !!navigator.userAgent.match(/MSIE 10/);

Как уже упоминали другие люди, я бы всегда рекомендовал вместо этого обнаруживать функции.

Страница:
...