Обнаружение IE11 с помощью функции CSS/обнаружения функций

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

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 {
    .ie67 {property:value;}
}

или

.ie67 { *property:value;}

или

.ie67 { #property:value;}

IE 6, 7 и 8

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

IE 8

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

или

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

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

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

т. е. 8,9 и 10

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

IE 9 только

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

IE 9 и выше

@media screen and (min-width: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; }

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;
}

---

сноска

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

---

Атрибуция / Существенное Чтение

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

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  

}

добавить все ваши классы или свойства CSS.

Это, кажется, работает:

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

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

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

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

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

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

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

body.ie11 #some-other-div

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

взгляните на эту статью: 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;
}

попробуйте это:

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

вот ответ на 2017 год, где вы, вероятно, заботитесь только о различении 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 и все другие соответствующие комбинации браузера / версии do.

также вероятно, что некоторые -ms-foo проприетарное свойство, которое поддерживается IE11, но >IE11 не поддерживает также существует, и в этом случае вы можете использовать @supports (--what: evr) { } для прямого назначения IE11 в одиночку вместо использования вышеупомянутого переопределения.

вы должны использовать 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. );
  }
  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. );
  }
  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\./)

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

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

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

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

теперь, основываясь на классе, который 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, как Боузер:

https://github.com/ded/bowser

или modernizr для обнаружения объекта:

http://modernizr.com/

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

• !!окно.MSInputMethodContext
• !!документ.msFullscreenEnabled

обнаружение 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;
}

.

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

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

вы можете попробовать это:

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

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

вы должны нажать вверхhttp://modernizr.com/ вместо того, чтобы продолжать то, что вы делаете.