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


90

IE10 + больше не поддерживает теги обнаружения браузера для идентификации браузера.

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

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

Дополнительная информация

  • Я не хочу использовать определение типа пользовательского агента, потому что он такой пятнистый и может быть изменен, а также я думаю, что читал, что IE11 намеренно пытается скрыть тот факт, что это Internet Explorer.
  • В качестве примера того, как работает тестирование возможностей IE10 , я использовал этот JsFiddle (не мой) в качестве основы для своего тестирования.
  • Также я ожидаю много ответов «Это плохая идея ...». Одна из моих потребностей в этом заключается в том, что IE10 утверждает, что он что-то поддерживает, но это очень плохо реализовано, и я хочу иметь возможность различать IE10 и IE11 +, чтобы в будущем я мог перейти к методу обнаружения на основе возможностей.
  • Этот тест сочетается с тестом Modernizr, который просто делает некоторую функциональность «откатной» к менее эффектному поведению. Мы не говорим о критических функциях.

ТАКЖЕ я уже использую Modernizr, но здесь это не помогает. Мне нужна помощь в решении моего четко заданного вопроса.


3
Зачем нужно знать, какой браузер у пользователя? Недостаточно ли обнаружения функций / префиксов css / условных обозначений css?
David-SkyMesh

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

2
@ David-SkyMesh - Нет. К сожалению, этого недостаточно. Я бы хотел, чтобы это было, но это не так.
dano

1
@Evildonald Вы не ответили, зачем вам это нужно знать - конкретно. Вполне может быть, что это проблема XY. (например: вы просите использовать для помощи с X - обнаружение IE11 - когда мы могли бы ответить на другой вопрос Y - как быть совместимым с большим количеством браузеров, включая IE11 для TASK Z)
David-SkyMesh

1
У меня был .js, который определяет версии браузера, и в нем говорилось, что ie11 был firefox. что происходит, т.е. разработчики!
Daniel Cheung

Ответы:


165

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

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

Сноска

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


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


3
Это действительно должен быть ответ. Отличная деталь!
egr103

Только IE10 у меня не работает. Обратная косая черта-9 не удаляет IE11. Я пытаюсь показать div для IE 10, но не для IE11 ... Он все еще отображается в IE 11 ...
Merc

Странно. Он работает с большинством свойств, но clip: auto\9;все еще интерпретируется как clip: auto;в IE 11. Каким-то образом это не игнорируется ...
Merc

2
Для меня второй вариант IE10 работал с IE11: @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .relevant_selectors_for_situation {property:value;} }я нашел его в mediacurrent.com/blog/…
cedricdlb

1
После прочтения всего этого, я думаю, -ms-high-contrast: activeможет быть чего-то, чего следует избегать, потому что согласно спецификациям MS вы на самом деле нацелитесь на пользователей высококонтрастных тем в Edge с вашими правилами IE 10/11. На странице, на которую ссылается этот ответ, на -ms-high-contrastсамом деле говорится, что просто -ms-high-contrast: noneзначение больше не поддерживается. Думаю, никто об этом не упоминает, потому что у большинства людей не включен режим высокой контрастности, и большинство людей не используют Edge. Но все же есть кто-то , у кого есть такая конфигурация, и это, вероятно, для них не круто.
dmatamales

40

Чтобы настроить таргетинг только на IE10 и IE11 (но не на Edge):

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

1
Что-то вроде этого тоже может быть дерзкой примесью!
dano

2
Это нацелено только на IE11 или Edge?
Мэтью Фелгейт

2
Нацелен на IE10 и IE11, но не на край.
Джефф Клейтон,

23

В итоге я нашел собственное решение этой проблемы.

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

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

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

Я обновлю пример кода, добавив больше стилей, когда обнаружу их.

ПРИМЕЧАНИЕ. Это почти наверняка идентифицирует IE12 и IE13 как «IE11», поскольку эти стили, вероятно, сохранятся. Я буду добавлять дополнительные тесты по мере выхода новых версий и, надеюсь, снова смогу положиться на Modernizr.

Я использую этот тест для отката. Резервное поведение - это просто менее гламурный стиль, он не имеет ограниченной функциональности.


8
Если кто-то собирается ответить -1 этот ответ, пожалуйста, по крайней мере, проявите порядочность, чтобы признать это по технической причине. Вы можете не согласиться с этим .. но это правильно и работает.
dano

7
Как узнать, будет ли этот код давать правильные результаты в IE12, IE13 и т. Д.?
Евгений

6
Почему вы используете этот метод вместо if (document.documentMode === 11) { ... }? Если, конечно, вы не хотите использовать свойство CSS в @supportsправилах (которые, кстати, еще не поддерживаются в IE).
Rob W

1
Если у вас есть существующие классы в теге body, они будут перезаписаны. Вот очень незначительное исправление: jsfiddle.net/jmjpro/njvr1jq2/1 .
jbustamovej 01

1
Кроме того, вы захотите скрыть элемент ieVersion с помощью css: #ieVersion {display: none}
jbustamovej 02


11

Вот ответ на 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, как и все другие соответствующие комбинации браузера / версии .


9

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

2
Это работает и является хорошим решением, но приведенное рассуждение неверно. IE11 вообще не поддерживает @supports, поэтому игнорирует все в @supportsблоке. Таким образом, вы можете поместить что угодно в условное выражение @supports (например @supports (display: block)), и IE11 все равно пропустит его.
CodeBiker

1
Это то, что я имел в виду под «IE 11 будет игнорировать», но вы правы, это не совсем понятно. Я обновил ответ, чтобы было понятнее, что IE не поддерживает @supports.
Antfish

4

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

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

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

body.ie11 #some-other-div

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


4

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

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

3

Взгляните на эту статью: 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 мы могли бы сделать это:

FIDDLE

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

1
Это могло бы сломаться в Firefox 11 (даже если он сейчас не поддерживается, это имеет значение). Он также имеет rv:11.0строку пользовательского агента.
PhistucK


2

Вам следует использовать 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\./)

Спасибо, Neo, но я уже добавляю класс в свой тег body И использую Modernizr. Мне нужен способ отличить IE10 от IE11 без использования User Agent, который не заслуживает доверия.
dano

Отсутствует двоеточие в rv 11. var isIE11 = !! navigator.userAgent.match (/Trident.*rv:11 \ ./)
T.CK 09

2

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

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


2

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

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

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

.class
{ 
   /* for IE11 */
}

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

2

Вы можете использовать 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";
  }

Или используйте библиотеку типа Bowser:

https://github.com/ded/bowser

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

http://modernizr.com/


2

Обнаружить 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-';


2

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

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

1

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

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


Спасибо за альтернативное решение, но я уже использую Modernizr, и IE10 неправильно представляет ему свои возможности.
dano

4
Я предполагаю, что вы знаете, какие именно, и отправили запрос в Modernizr, чтобы они могли добавить дополнительные проверки Modernizr для этого конкретного браузера? (Если нет, вам следует. Если вы найдете что-то, что затрагивает сотни тысяч разработчиков, единственное правильное решение
передать

7
Тем из нас, кто пишет код, ориентированный на пользователя, вам часто нужен ответ прямо сейчас , а не ошибка, зарегистрированная в сторонней библиотеке, и исправление там. Иными словами, приятно, что вы хотите, чтобы они улучшили Modernizr, но здесь это не подходит.
Dean J

1
Я думаю, что определение настоящего браузера само по себе является разумной целью.
gwg

@DeanJ уверен, и на эти вопросы кто-то еще ответит. Это не делает менее важным получение подобных ответов, которые говорят вам подумать о том, что вы делаете. Кроме того, на момент ответа в пост не было никаких правок, и не было упоминания «Мне нужно, чтобы он работал прямо сейчас», поэтому у меня не было причин предполагать, что они не хотели проверки реальности.
Mike 'Pomax' Kamermans
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.