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

Как настроить таргетинг только на 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">,

Источник

24 ответа

Решение

Возможно, вы можете попробовать некоторые jQuery, как это:

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

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

Получилось неплохо для меня. Но, конечно, нет замены для условных комментариев!

Источник

Я бы не использовал 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; } 
}

Источники:

Источник

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

Решение:

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

Это

  • не нуждается в условных комментариях;
  • работает, даже если сжатие / обработка комментариев убраны;
  • класс IE10 не добавлен в Internet Explorer 11;
  • более вероятно, что он будет работать, как и предполагалось, с Internet Explorer 11, работающим в режиме совместимости с Internet Explorer 10;
  • не нуждается в отдельном теге скрипта (может быть просто добавлен в другой код JavaScript в голове).
  • не нуждается в jQuery для тестирования
Источник

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

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

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

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

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

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

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

Источник

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

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

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

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

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

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

Источник

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

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

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

Источник

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

<!--[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/.

Источник

Я использую этот сценарий - он устарел, но эффективен для нацеливания на отдельную таблицу стилей 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 >
Источник

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

Подобно:

if (stripos($_SERVER['HTTP_USER_AGENT'], 'MSIE 10')) {
    <link rel="stylesheet" type="text/css" href="../ie10.css" />
}
Источник

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

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

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

Источник

CSS для IE10+ и IE9

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

@media screen\0 {
    /* IE8,9,10 styles*/
}
Источник

Если вы хотите использовать IE 10 с Vanilla JavaScript, вы можете попробовать определить свойства CSS:

if (document.body.style.msTouchAction != undefined) {
  document.body.className = 'ie10';
}

Свойства CSS

Вместо msTouchAction Вы также можете использовать одно из этих свойств CSS, потому что они в настоящее время доступны только в IE 10. Но это может измениться в будущем.

  • msTouchAction
  • msWrapFlow
  • msWrapMargin
  • msWrapThrough
  • msScrollLimit
  • msScrollLimitXMin
  • msScrollLimitYMin
  • msScrollLimitXMax
  • msScrollLimitYMax
  • msFlexbox
  • msFlex
  • msFlexOrder

Тестовая страница

Я собрал тестовую страницу со всеми свойствами на CodePen.

Источник

clipBoardData - это функция, которая доступна только в IE, поэтому, если вы хотите настроить таргетинг на все версии IE, вы можете использовать

<script type="text/javascript">
if (window.clipboardData)
            alert("You are using IE!");
</script>
Источник

С помощью JavaScript:

if (/Trident/g.test(navigator.userAgent)) { // detect trident engine so IE
        document.getElementsByTagName('html')[0].className= 'no-js ie'; }

Работа для всех IE.

IE08 => 'Trident/4.0'

IE09 => 'Trident/5.0'

IE10 => 'Trident/6.0'

IE11 => 'Trident/7.0'

Так что меняй /Trident/g от /Trident/x.0/g где x = 4, 5, 6 или же 7 (или, может быть 8 на будущее).

Источник

Conditionizr (см. Документацию) добавит CSS-классы браузера в ваш HTML-элемент, включая ie10.

Источник

Вы можете использовать функцию обнаружения, чтобы увидеть, является ли браузер IE10 или выше, например, так:

var isIE = false;
if (window.navigator.msPointerEnabled) {
    isIE = true;
}

Верно только если> IE9

Источник

Я просто хотел добавить свою версию обнаружения IE. Он основан на фрагменте, найденном по адресу http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/ и расширен также для поддержки ie10 и ie11. Он обнаруживает IE 5 до 11.

Все, что вам нужно сделать, это добавить его куда-нибудь, и тогда вы всегда можете проверить с простым условием. Глобальный вар isIE будет неопределенным, если это не IE, иначе это будет номер версии. Таким образом, вы можете легко добавлять такие вещи, как if (isIE && isIE < 10) или так.

var isIe = (function(){
    if (!(window.ActiveXObject) && "ActiveXObject" in window) { return 11; /* IE11 */ }
    if (Function('/*@cc_on return /^10/.test(@_jscript_version) @*/')()) { return 10; /* IE10  */ }
    var undef,
        v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');
    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
            all[0]
        );
    return v > 4 ? v : undef;
}());
Источник

Для меня следующий код работает нормально, все условные комментарии работают во всех версиях IE:

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 11)|!(IE)]><!--> <html> <!--<![endif]-->

<script>
    if (document.documentMode===10){
        document.documentElement.className+=' ie10';
    }
    else if (document.documentMode===11){
        document.documentElement.className+=' ie11';
    }
</script>

Я на Windows 8.1, не уверен, связано ли это с обновлением ie11...

Источник

Вот как я делаю собственный CSS для Internet Explorer:

В моем файле JavaScript:

function isIE () {
      var myNav = navigator.userAgent.toLowerCase();
      return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}

jQuery(document).ready(function(){
    if(var_isIE){
            if(var_isIE == 10){
                jQuery("html").addClass("ie10");
            }
            if(var_isIE == 8){
                jQuery("html").addClass("ie8");
                // you can also call here some function to disable things that 
                //are not supported in IE, or override browser default styles.
            }
        }
    });

И затем в моем файле CSS вы определяете каждый отдельный стиль:

.ie10 .some-class span{
    .......
}
.ie8 .some-class span{
    .......
}
Источник

Используйте Babel или машинопись для преобразования этого кода JS

const browser = () => {
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3576.0 Safari/537.36"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.17 Safari/537.36"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17763"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0"
    // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko"
    // "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    const _userAgent = navigator.userAgent;
    const br = {
        "Chrome": "Chrome",
        "Edge": "Edge",
        "Firefox": "Firefox",
        ".NET CLR": "Internet Explorer 11",
    };
    const nobr = {
        "MSIE 10.0": "Internet Explorer 10",
        "MSIE 9.0": "Internet Explorer 9",
        "MSIE 8.0": "Internet Explorer 8",
        "MSIE 7.0": "Internet Explorer 7"
    };
    let thisBrow = "Unknown";
    for (const keys in br) {
        if (br.hasOwnProperty(keys)) {
            if (_userAgent.includes(keys)) {

                thisBrow = br[keys];

                for (const key in nobr) {
                    if (_userAgent.includes(key)) {
                        thisBrow = nobr[key];
                    }
                }

            }
        }
    }

    return thisBrow;
};

Источник

Проверьте http://suhasrathod.wordpress.com/2013/04/29/ie10-css-hacks/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
       /* IE10-specific styles go here */
}
Источник

Этот ответ дал мне 90% пути туда. Я нашел остальную часть моего ответа на сайте Microsoft здесь.

Код ниже - это то, что я использую для нацеливания на всех, т.е. добавив класс.ie к <html>

Используйте jQuery (который устарел.browser в пользу пользовательских агентов в 1.9+, см. Http://api.jquery.com/jQuery.browser/), чтобы добавить класс.ie:

// ie identifier
$(document).ready(function () {
  if (navigator.appName == 'Microsoft Internet Explorer') {
    $("html").addClass("ie");
  }
});
Источник

Если вам действительно нужно, вы можете заставить условные комментарии работать, добавив следующую строку в <head>:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

Источник

Источник

Если вы не против таргетинга браузеров IE10 и выше и браузеров не IE, вы можете использовать этот условный комментарий:

<!--[if gt IE 9]><!--> Your code here. <!--<![endif]-->

Получено из http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither

Источник

Современное решение для css

html[data-useragent*='MSIE 10.0'] .any {
  your-style: here;
}
Источник
Другие вопросы по тегам