Как определить браузер Microsoft Edge через CSS?

92

Я разрабатываю веб-приложение, и мне нужно идентифицировать браузер Microsoft Edge отдельно от других, чтобы применить уникальный стиль. Есть ли способ идентифицировать Edge с помощью CSS? Как,

<!--[if IE 11]>
Special instructions for IE 11 here
<![endif]-->
Самира Лиянаге
источник
3
Почему ты хочешь это сделать?
2
вам почти наверняка не нужно этого делать. Почему вы пытаетесь это сделать?
Патрик
37
Это наверняка то, что вам может понадобиться. На момент написания Edge все еще полон причуд, которые серьезно испортят действующий CSS, который работает в любом другом браузере, включая IE.
Lawyerson,
Примечание. Условные комментарии, используемые в примере, работают только для IE9 и ниже, поэтому [если IE 11] на самом деле работать не будет.
Шон Макмиллан,

Ответы:

193

/ * Microsoft Edge Browser 12-18 (все версии до Chromium) * /

Это должно работать:

@supports (-ms-ime-align:auto) {
    .selector {
        property: value;
    }
}

Для получения дополнительной информации см .: Странность браузера.

KittMedia
источник
8
Microsoft стремится удалить как можно больше свойств с префиксом -ms в MS Edge, чтобы обеспечить совместимость с другими браузерами. Таким образом, это далеко не гарантированно сработает в будущем. Как упоминалось в других ответах, обнаружение функций намного предпочтительнее.
Чарльз Моррис - MSFT,
1
Просто протестировал его еще раз, и он определенно работает. Демо: jsfiddle.net/pd142446
KittMedia
@ CharlesMorris-MSFT Я согласен с вами, но бывают случаи, когда нам просто нужно это сделать. Например, события-указатели: нет; отлично работает в IE 11 и других браузерах, но перестает работать в Edge. Я надеюсь, что к тому времени, когда они уберут префикс -ms, они также решат проблемы, которые заставили нас в первую очередь использовать другой CSS. В этом случае обнаружение функций не очень поможет, потому что все функции есть, но Edge сломал некоторые вещи, которые IE 11 наконец исправил. KittMedia хороший ответ, спасибо.
Эмиль Боркони,
8
Этот хакерский прием больше не работает, но он выполняет @supports (-ms-ime-align: auto) {.selector {property: value; }}
Рофферс
1
@KittMedia был удален в Edge 14
LJ Wadowski
21
/* Microsoft Edge Browser 12-18 (All versions before Chromium) - one-liner method */

_:-ms-lang(x), _:-webkit-full-screen, .selector { property:value; }

Это прекрасно работает!

// for instance:
_:-ms-lang(x), _:-webkit-full-screen, .headerClass 
{ 
  border: 1px solid brown;
}

https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/

CodeGust
источник
1
@ r3wt _:-ms-lang(x), _:-webkit-full-screen,- только MS Edge "понимает" это правило, другие браузеры его игнорируют. За правилом следует имя класса или идентификатора элемента html, и оно применяется к нему. Другими словами, если код css необходимо применить только к элементу html в браузере Edge, укажите это специальное правило прямо перед классом / идентификатором вашего элемента.
CodeGust
чтобы браузер не просто игнорировал их и не выбирал селектор, поскольку все они разделены запятыми? Обычно ,селекторы разделяются в CSS. вот почему это сбивает с толку. Я до сих пор не понимаю, почему другие браузеры игнорируют это, и только ms-edge применяет CSS к селектору после запятой
r3wt
1
@ r3wt, если один селектор недействителен, вся группа правил игнорируется. Проиллюстрировано здесь css-tricks.com/…
CodeGust
@ r3wt спасибо! :) вы посоветовали мне написать детали, которые изначально должны были быть частью ответа
CodeGust
@AlexandrKazakov, возможно, это потому, что последняя версия Edge основана на движке Chromium (?) Какая у вас версия?
CodeGust
14

Более точно для Edge (не включая последнюю версию IE 15):

@supports (display:-ms-grid) { ... }

@supports (-ms-ime-align:auto) { ... } работает для всех версий Edge (в настоящее время до IE15).

зрелый
источник
4
For Internet Explorer 

@media all and (-ms-high-contrast: none) {
        .banner-wrapper{
            background: rgba(0, 0, 0, 0.16)
         }
}

For Edge
@supports (-ms-ime-align:auto) {
    .banner-wrapper{
            background: rgba(0, 0, 0, 0.16);
         }
}
Прия Наяк
источник