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

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

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

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

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

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

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

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

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

or

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

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

.ie10 .myclass1 { }

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

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

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

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

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

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

Если вы хотите настроить таргетинг на 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.

CSS для IE10 + и IE9

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

@media screen\0 {
    /* IE8,9,10 styles*/
}

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

<script type="text/javascript">
if (window.clipboardData)
            alert("You are using IE!");
</script>

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

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

Только верно, если> IE9

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

С помощью 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 в будущем).

Я просто хотел добавить свою версию обнаружения 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{
    .......
}

Посетите 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 */
}

используйте babel или typescript для преобразования этого кода 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;
};

Этот ответ помог мне на 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");
  }
});

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

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

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

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

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

Источник

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

html[data-useragent*='MSIE 10.0'] .any {
  your-style: here;
}