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

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

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

browser css microsoft-edge
person Sameera Liyanage    schedule 25.08.2015    source источник
comment
Почему ты хочешь это сделать?   -  person    schedule 25.08.2015
comment
вам почти наверняка не нужно этого делать. Почему вы пытаетесь это сделать?   -  person Patrick    schedule 25.08.2015
comment
Это наверняка то, что вам может понадобиться. На момент написания Edge все еще полон причуд, которые серьезно испортят действующий CSS, который работает во всех других браузерах, включая IE.   -  person Lawyerson    schedule 29.12.2015
comment
Примечание. Условные комментарии, используемые в примере, работают только для IE9 и ниже, поэтому [если IE 11] на самом деле работать не будет.   -  person Sean McMillan    schedule 31.08.2020

Ответы (3)


arrow_upward
200
arrow_downward

/ * Браузер Microsoft Edge 12-18 (все версии до Chromium) * /

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

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

Подробнее см. Странность браузера.

person KittMedia    schedule 25.08.2015
comment
Microsoft стремится удалить как можно больше свойств с префиксом -ms в MS Edge, чтобы обеспечить совместимость с другими браузерами. Таким образом, это далеко не гарантированно сработает в будущем. Как упоминалось в других ответах, обнаружение функций намного предпочтительнее. - person Charles Morris - MSFT; 26.08.2015
comment
Просто протестировал его еще раз, и он определенно работает. Демо: jsfiddle.net/pd142446 - person KittMedia; 12.10.2015
comment
@ CharlesMorris-MSFT Я согласен с вами, но бывают случаи, когда нам просто нужно это сделать. Например, события-указатели: нет; отлично работает в IE 11 и других браузерах, но перестает работать в Edge. Я надеюсь, что к тому времени, когда они исключат префикс -ms, они также решат проблемы, которые заставили нас в первую очередь использовать другой CSS. В этом случае обнаружение функций не очень поможет, потому что все функции есть, но Edge сломал некоторые вещи, которые IE 11 наконец исправил. KittMedia хороший ответ, спасибо. - person Emil Borconi; 24.03.2016
comment
Этот хакерский прием больше не работает, однако он выполняет @supports (-ms-ime-align: auto) {.selector {property: value; }} - person Roffers; 04.08.2016
comment
@KittMedia был удален в Edge 14 - person LJ Wadowski; 21.10.2016
comment
Он по-прежнему работает в последней версии 18.18363 (выпуск 44.18362), только что протестированной в Browserstack - он может работать или не работать в предварительной версии 18.19041 (44.19041), но по состоянию на апрель 2020 года ее еще нет. - person Jeff Clayton; 08.04.2020
comment
История выпусков для тех, кому нужна интерактивная ссылка: en.wikipedia.org/wiki/Microsoft_Edge - person Jeff Clayton; 08.04.2020
comment
@mitsu Какую версию браузера вы тестировали? - person KittMedia; 24.06.2020
comment
Версия 88.0.705.81 у меня не работает - person techie18; 27.02.2021
comment
Конечно, нет, поскольку, как написано в первой строке моего ответа, он предназначен только для версий 12–18. - person KittMedia; 28.02.2021

arrow_upward
21
arrow_downward 

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

person CodeGust    schedule 09.08.2017
comment
@ r3wt _:-ms-lang(x), _:-webkit-full-screen, - только MS Edge понимает это правило, другие браузеры его игнорируют. За правилом следует имя класса или идентификатора элемента html, и оно применяется к нему. Другими словами, если код css необходимо применить к элементу html только в браузере Edge, укажите это специальное правило прямо перед классом / идентификатором вашего элемента. - person CodeGust; 16.04.2019
comment
чтобы браузер не просто игнорировал их и не выбирал селектор, поскольку все они разделены запятой? обычно , разделяет селекторы в CSS. вот почему это сбивает с толку. Я до сих пор не понимаю, почему другие браузеры игнорируют это, и только ms-edge применяет CSS к селектору после запятой - person r3wt; 16.04.2019
comment
@ r3wt, если один селектор недействителен, вся группа правил игнорируется. Показано здесь css-tricks.com/ < / а> - person CodeGust; 17.04.2019
comment
@ r3wt, спасибо! :) вы посоветовали мне написать детали, которые изначально должны были быть частью ответа - person CodeGust; 19.04.2019
comment
@AlexandrKazakov, возможно, это потому, что последняя версия Edge основана на движке Chromium (?) Какая у вас версия? - person CodeGust; 15.06.2019
comment
В новой версии Chromium вместо этого используются хаки Chrome, поэтому теперь должно отображаться 12-18. - person Jeff Clayton; 08.04.2020
comment
У меня это сработало в оригинальном браузере Edge версии 18. - person Reporter; 13.10.2020

arrow_upward
14
arrow_downward

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

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

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

person mature    schedule 18.12.2018