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

92

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

<!--[if IE 11]>
Special instructions for IE 11 here
<![endif]-->

css browser microsoft-edge

— Самира Лиянаге
источник

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

— Прия Наяк
источник