Виявлення IE11 за допомогою CSS Capability / Feature Detection

IE10 + більше не підтримує теги виявлення браузера для ідентифікації браузера.

Для виявлення IE10 я використовую JavaScript і визначено техніку перевірки можливостей для виявлення певних msпрефіксних стилів, таких як msTouchActionіmsWrapFlow .

Я хочу зробити те саме для IE11, але я припускаю, що всі стилі IE10 будуть підтримуватися і в IE11. Хто-небудь може допомогти мені визначити IE11 лише стилі чи можливості, які я міг би використати, щоб розрізнити ці два?

Додаткова інформація

• Я не хочу використовувати виявлення типу User Agent, оскільки воно настільки плямисте, що його можна змінити, а також, я думаю, я вже читав, що IE11 навмисно намагається приховати факт, що це Internet Explorer.
• Для прикладу того, як працює тестування можливостей IE10 , я використав цей JsFiddle (не мій) як основу для мого тестування.
• Також я очікую багато відповідей "Це погана ідея ...". Однією з моїх потреб для цього є те, що IE10 стверджує, що щось підтримує, але це дуже погано реалізовано, і я хочу мати можливість розрізняти IE10 та IE11 +, щоб я міг перейти до методу виявлення на основі можливостей у майбутньому.
• Цей тест поєднаний із тестом Modernizr, який просто зробить деяку функціональність "запасною" до менш гламурної поведінки. Ми не говоримо про критичну функціональність.

ТАКОЖ Я вже використовую Modernizr, але тут це не допомагає. Мені потрібна допомога для вирішення мого чітко заданого питання, будь ласка.

У світлі розвитку нитки я оновив наступне:

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 швидко працює при завантаженні сторінки для виявлення особливостей; потім він створює об’єкт 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;
}

Виноска

Якщо можливо, визначте та усуньте будь-які проблеми без злому. Підтримуйте поступове вдосконалення та витончену деградацію . Однак це сценарій „ідеального світу”, який не завжди можна отримати, як такий - вищезазначене має допомогти запропонувати кілька хороших варіантів.

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

• Джефф Клейтон | Browserhacks.com
• Кіт Кларк
• Пол Ірландський
• Веб-побожність
• Ключ

Для націлювання лише на IE10 та IE11 (а не на Edge):

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

Тож я врешті знайшов своє рішення цієї проблеми.

Після пошуку в документації Microsoft мені вдалося знайти новий стиль лише IE11msTextCombineHorizontal

У своєму тесті я перевіряю стилі 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>

Я буду оновлювати приклад коду іншими стилями, коли виявлю їх.

ПРИМІТКА: Це майже напевно буде визначати IE12 та IE13 як "IE11", оскільки ці стилі, ймовірно, будуть перенесені вперед. Я буду додавати подальші тести по мірі випуску нових версій, і, сподіваюся, зможу знову покластися на Modernizr.

Я використовую цей тест на запасну поведінку. Резервна поведінка - це просто менш гламурний стиль, він не має зниженої функціональності.

Здається, це працює:

@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/

Ви можете написати свій код 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;
    }
}

Ось відповідь на 2017 рік, де ви, мабуть, дбаєте лише про те, щоб відрізнити <= IE11 від> IE11 ("Край"):

@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, а всі інші відповідні комбінації браузер / версія підтримують .

Це спрацювало для мене

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

А потім у файлі css речі з префіксом

body.ie11 #some-other-div

Коли цей браузер готовий до смерті?

Спробуйте це:

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

Погляньте на цю статтю: CSS: Вибір агента користувача

В основному, коли ви використовуєте цей сценарій:

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 ми могли б зробити це:

Скрипка

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

Використовуйте такі властивості:

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

Вам слід використовувати 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\./)

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

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

Якщо ви використовуєте Modernizr - тоді ви можете легко розрізнити IE10 та IE11.

IE10 не підтримує pointer-eventsвластивість. IE11 робить. ( канюс )

Тепер, виходячи з класу, який вставляє Modernizr, ви можете мати такий CSS:

.class
{ 
   /* for IE11 */
}

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

Ви можете використовувати 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/

Виявити 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-';

Ви можете спробувати це:

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

Я зіткнувся з тією ж проблемою із формою гравітації (WordPress) у IE11. Стиль стовпця форми "display: inline-grid" зламав макет; застосовуючи відповіді вище, вирішено розбіжності!

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

Крок назад: чому ви навіть намагаєтесь виявити "Internet Explorer", а не "мій веб-сайт повинен робити X, чи підтримує цей браузер цю функцію? Якщо так, хороший браузер. Якщо ні, тоді я повинен попередити користувача".

Вам слід натиснути http://modernizr.com/ замість того, щоб продовжувати те, що ви робите.