it-swarm.com.ru

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

153
trusktr

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

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

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

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

62
Max Sohrt

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

Источники:

128
Roni

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

Решение:

if (Function('/*@cc_on return [email protected]*/')()){
    document.documentElement.className+=' ie10';
}

Это

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

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. Опять же, я могу быть предвзятым, но давайте будем честными: не так ли? Просто посмотрите на ваши комментарии.

62
BoltClock

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

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

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

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

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

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

36
Paul Sweatte

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

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

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

11
Matt Stow

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

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

или же

<script>if(Function('/*@cc_on return [email protected]*/')()){document.documentElement.className='ie10';}</script>

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

.ie10 .myclass1 { }

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

11
Eugene Kardash

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

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

Подобно:

if (stripos($_SERVER['HTTP_USER_AGENT'], 'MSIE 10')) {
    <link rel="stylesheet" type="text/css" href="../ie10.css" />
}
6
Lenny Bruyninckx

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

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

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

5
dave1010

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

4
TimPietrusky

CSS для IE10 + и IE9

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

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

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

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

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

1
Astrotim

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

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

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

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

1
George Filippakos

Для меня следующий код работает нормально, все условные комментарии работают во всех версиях 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 ...

0
Alex

Вот как я делаю собственный 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{
    .......
}
0
Francisco Corrales Morales

используйте 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;
};

0
Aliaksandr Shpak

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

0
Ender-events

Проверить 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 */
}
0
Tom Senner