Обнаружение IE11 с использованием возможности CSS/обнаружения функций

Ответ 1

Так что в конце концов я нашел свое решение этой проблемы.

После поиска в документации Microsoft мне удалось найти новый стиль только для msTextCombineHorizontal

В моем тесте я проверяю стили IE10 и, если они имеют положительное совпадение, то я проверяю только стиль IE11. Если я найду его, то это IE11+, если я не найду, то это IE10.

Пример кода: определение IE10 и IE11 с помощью тестирования возможностей CSS (JSFiddle)

 /**
  Target IE 10 with JavaScript and CSS property detection.
  
  # 2013 by Tim Pietrusky
  # timpietrusky.com
 **/

 // IE 10 only CSS properties
 var ie10Styles = [
     'msTouchAction',
     'msWrapFlow',
     'msWrapMargin',
     'msWrapThrough',
     'msOverflowStyle',
     'msScrollChaining',
     'msScrollLimit',
     'msScrollLimitXMin',
     'msScrollLimitYMin',
     'msScrollLimitXMax',
     'msScrollLimitYMax',
     'msScrollRails',
     'msScrollSnapPointsX',
     'msScrollSnapPointsY',
     'msScrollSnapType',
     'msScrollSnapX',
     'msScrollSnapY',
     'msScrollTranslation',
     'msFlexbox',
     'msFlex',
     'msFlexOrder'];

 var ie11Styles = [
     'msTextCombineHorizontal'];

 /*
  * Test all IE only CSS properties
  */
 var d = document;
 var b = d.body;
 var s = b.style;
 var ieVersion = null;
 var property;

 // Test IE10 properties
 for (var i = 0; i < ie10Styles.length; i++) {
     property = ie10Styles[i];

     if (s[property] != undefined) {
         ieVersion = "ie10";
         createEl("IE10 style found: " + property);
     }
 }

 // Test IE11 properties
 for (var i = 0; i < ie11Styles.length; i++) {
     property = ie11Styles[i];

     if (s[property] != undefined) {
         ieVersion = "ie11";
         createEl("IE11 style found: " + property);
     }
 }

 if (ieVersion) {
     b.className = ieVersion;
     $('#versionId').html('Version: ' + ieVersion);
 } else {
     createEl('Not IE10 or 11.');
 }

 /*
  * Just a little helper to create a DOM element
  */
 function createEl(content) {
     el = d.createElement('div');
     el.innerHTML = content;
     b.appendChild(el);
 }

 /*
  * List of IE CSS stuff:
  * http://msdn.microsoft.com/en-us/library/ie/hh869403(v=vs.85).aspx
  */

body {
    font: 1.25em sans-serif;
}
div {
    background: red;
    color:#fff;
    padding: 1em;
}
.ie10 div {
    background: green;
    margin-bottom:.5em;
}
.ie11 div {
    background: purple;
    margin-bottom:.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Detect IE10 and IE11 by CSS Capability Testing</h1>


<h2 id="versionId"></h2>

Ответ 2

В свете развивающейся темы я обновил ниже:

IE 6

* html .ie6 {property:value;}

или же

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

или же

*:first-child+html .ie7 {property:value;}

IE 6 и 7

@media screen\9 {
    .ie67 {property:value;}
}

или же

.ie67 { *property:value;}

или же

.ie67 { #property:value;}

IE 6, 7 и 8

@media \0screen\,screen\9 {
    .ie678 {property:value;}
}

IE 8

html>/**/body .ie8 {property:value;}

или же

@media \0screen {
    .ie8 {property:value;}
}

IE 8 только в стандартном режиме

.ie8 { property /*\**/: value\9 }

IE 8,9 и 10

@media screen\0 {
    .ie8910 {property:value;}
}

Только IE 9

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { 
 // IE9 CSS
 .ie9{property:value;}
}

IE 9 и выше

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
  // IE9+ CSS
  .ie9up{property:value;}
}

IE 9 и 10

@media screen and (min-width:0) {
    .ie910{property:value;}
}

Только IE 10

_:-ms-lang(x), .ie10 { property:value\9; }

IE 10 и выше

_:-ms-lang(x), .ie10up { property:value; }

или же

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .ie10up{property:value;}
}

Использование -ms-high-contrast означает, что MS Edge не будет предназначаться, поскольку Edge не поддерживает -ms-high-contrast.

IE 11

_:-ms-fullscreen, :root .ie11up { property:value; }

Javascript альтернативы

Modernizr

Modernizr быстро запускает загрузку страницы для обнаружения функций; затем он создает объект JavaScript с результатами и добавляет классы в элемент html

Выбор агента пользователя

Javascript:

var b = document.documentElement;
        b.setAttribute('data-useragent',  navigator.userAgent);
        b.setAttribute('data-platform', navigator.platform );
        b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

Добавляет (например) ниже в элемент html:

data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'

Разрешить очень целенаправленные CSS-селекторы, например:

html[data-useragent*='Chrome/13.0'] .nav{
    background:url(img/radial_grad.png) center bottom no-repeat;
}

сноска

Если возможно, выявляйте и устраняйте любые проблемы без взлома. Поддержка прогрессивного улучшения и постепенной деградации. Тем не менее, это сценарий "идеального мира", который не всегда доступен, так как such- выше должен помочь предоставить некоторые хорошие варианты.

Атрибуция/Основное чтение

• Джефф Клэйтон | Browserhacks.com
• Кит Кларк
• Пол Ирландский
• Web Devout
• Гаечный ключ

Ответ 3

Для таргетинга только на IE10 и IE11 (а не на Edge):

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* add your IE10-IE11 css here */   
}

Ответ 4

Это похоже на работу:

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

https://www.limecanvas.com/css-hacks-for-targeting-ie-10-and-above/

Ответ 5

Вот ответ на 2017 год, в котором вы, вероятно, заботитесь только о различении <= IE11 от> IE11 ("Edge"):

@supports not (old: ie) { /* code for not old IE here */ }

Более наглядный пример:

body:before { content: 'old ie'; }
/**/@supports not (old: ie) {
body:before { content: 'not old ie'; }
/**/}

Это работает, потому что IE11 на самом деле даже не поддерживает @supports, а все другие соответствующие комбинации браузер/версия поддерживают.

Ответ 6

Вы можете написать свой код IE11 как обычно, а затем использовать @supports и проверить свойство, которое не поддерживается в IE11, например grid-area: auto.

Затем вы можете написать свои современные стили браузера. IE не поддерживает правило @supports и будет использовать оригинальные стили, тогда как они будут переопределены в современных браузерах, которые поддерживают @supports.

.my-class {
// IE the background will be red
background: red;

   // Modern browsers the background will be blue
    @supports (grid-area: auto) {
      background: blue;
    }
}

Ответ 7

Это сработало для меня

if(navigator.userAgent.match(/Trident.*rv:11\./)) {
    $('body').addClass('ie11');
}

И затем в файле css с префиксом

body.ie11 #some-other-div

Когда этот браузер готов умереть?

Ответ 8

Взгляните на эту статью: CSS: Селектор User Agent

В основном, когда вы используете этот script:

var b = document.documentElement;
b.setAttribute('data-useragent',  navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

Теперь вы можете использовать CSS для таргетинга на любой браузер/версию.

Итак, для IE11 мы могли бы сделать это:

FIDDLE

html[data-useragent*='rv:11.0']
{
    color: green;
}

Ответ 9

Попробуйте следующее:

/*------Specific style for IE11---------*/
 _:-ms-fullscreen, :root 
 .legend 
{ 
  line-height: 1.5em;
  position: relative;
  top: -1.1em;   
}

Ответ 10

Вы должны использовать Modernizr, он добавит класс в тег body.

и

function getIeVersion()
{
  var rv = -1;
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  else if (navigator.appName == 'Netscape')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  return rv;
}

Обратите внимание, что IE11 по-прежнему находится в режиме предварительного просмотра, и пользовательский агент может изменить до выпуска.

Строка User-agent для IE 11 в настоящее время эта:

Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko

Это означает, что вы можете просто протестировать, для версий 11.xx,

var isIE11 = !!navigator.userAgent.match(/Trident.*rv 11\./)

Ответ 11

Возможно, Layout Engine v0.7.0 - хорошее решение для вашей ситуации. Он использует обнаружение функции браузера и может обнаруживать не только IE11 и IE10, но также IE9, IE8 и IE7. Он также обнаруживает другие популярные браузеры, включая некоторые мобильные браузеры. Он добавляет класс в тег html, прост в использовании и хорошо работает при довольно глубоком тестировании.

http://mattstow.com/layout-engine.html

Ответ 12

Если вы используете Modernizr - тогда вы можете легко различать IE10 и IE11.

IE10 не поддерживает свойство pointer-events. IE11 делает. (caniuse)

Теперь, основываясь на классе, который вставляет Modernizr, вы можете иметь следующий CSS:

.class
{ 
   /* for IE11 */
}

.no-pointerevents .class
{ 
   /* for IE10 */
}

Ответ 13

Вы можете использовать js и добавить класс в html для поддержания стандарта условных комментариев:

  var ua = navigator.userAgent,
      doc = document.documentElement;

  if ((ua.match(/MSIE 10.0/i))) {
    doc.className = doc.className + " ie10";

  } else if((ua.match(/rv:11.0/i))){
    doc.className = doc.className + " ie11";
  }

Или используйте lib, как bowser:

https://github.com/ded/bowser

Или модерн для обнаружения функции:

http://modernizr.com/

Ответ 14

Используйте следующие свойства:

• !! window.MSInputMethodContext
• !! document.msFullscreenEnabled

Ответ 15

Обнаружение IE и его версий на самом деле чрезвычайно просто, по крайней мере, чрезвычайно интуитивно понятным:

var uA = navigator.userAgent;
var browser = null;
var ieVersion = null;

if (uA.indexOf('MSIE 6') >= 0) {
    browser = 'IE';
    ieVersion = 6;
}
if (uA.indexOf('MSIE 7') >= 0) {
    browser = 'IE';
    ieVersion = 7;
}
if (document.documentMode) { // as of IE8
    browser = 'IE';
    ieVersion = document.documentMode;
}

.

Таким образом, вы также можете перехватить высокие версии IE в режиме совместимости/представлении. Далее, это вопрос назначения условных классов:

var htmlTag = document.documentElement;
if (browser == 'IE' && ieVersion <= 11)
    htmlTag.className += ' ie11-';

Ответ 16

Вы можете попробовать следующее:

if(document.documentMode) {
  document.documentElement.className+=' ie'+document.documentMode;
}

Ответ 17

Я столкнулся с той же проблемой с Gravity Form (WordPress) в IE11. Стиль столбца формы "display: inline-grid" нарушил макет; применение ответов выше решило несоответствие!

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .gfmc-column { display: inline-block;} /* IE11 */
}

Ответ 18

Шаг назад: почему вы даже пытаетесь обнаружить "Internet explorer", а не "мой веб-сайт должен делать X, поддерживает ли этот браузер эту функцию? Если это так, хороший браузер. Если нет, тогда я должен предупредить пользователя",.

Вы должны нажать http://modernizr.com/, а не продолжать то, что вы делаете.