Jak zidentyfikować przeglądarkę Microsoft Edge za pomocą CSS?

92

Tworzę aplikację internetową i muszę zidentyfikować przeglądarkę Microsoft Edge oddzielnie od innych, aby zastosować niepowtarzalny styl. Czy istnieje sposób na zidentyfikowanie Edge za pomocą CSS? Tak jak,

<!--[if IE 11]>
Special instructions for IE 11 here
<![endif]-->
Sameera Liyanage
źródło
3
Dlaczego chcesz to zrobić?
2
prawie na pewno nie musisz tego robić. Dlaczego próbujesz to zrobić?
Patrick,
37
Z pewnością jest to coś, czego możesz potrzebować. W chwili pisania tego tekstu Edge wciąż jest pełen dziwactw, które poważnie zepsułyby prawidłowy CSS, który działa w każdej innej przeglądarce, w tym IE.
Prawnik
Uwaga: Warunkowe komentarze użyte w przykładzie działają tylko dla IE9 i niższych, więc [jeśli IE 11] nie będzie faktycznie działać.
Sean McMillan

Odpowiedzi:

193

/ * Przeglądarka Microsoft Edge 12-18 (wszystkie wersje przed Chromium) * /

Ten powinien działać:

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

Więcej informacji: Dziwność przeglądarki

KittMedia
źródło
8
Microsoft zamierza usunąć jak najwięcej właściwości z prefiksem -ms w MS Edge, aby zapewnić współdziałanie z innymi przeglądarkami. W związku z tym nie ma gwarancji, że zadziała w przyszłości. Jak wspomniano w innych odpowiedziach, wykrywanie funkcji jest znacznie bardziej preferowane.
Charles Morris - MSFT
1
Właśnie przetestowałem to ponownie i na pewno działa. Demo: jsfiddle.net/pd142446
KittMedia
@ CharlesMorris-MSFT Zgadzam się z tobą, ale są przypadki, kiedy po prostu musimy to zrobić. Na przykład pointer-events: none; działa dobrze na IE 11 i wszystkich innych przeglądarkach, ale przestaje działać na Edge. Mam nadzieję, że zanim wyeliminują przedrostek -ms, naprawią również problemy, które zmusiły nas do korzystania z różnych CSS. W takich przypadkach wykrywanie funkcji nie pomoże, ponieważ wszystkie funkcje są dostępne, ale Edge zepsuł niektóre rzeczy, które ostatecznie naprawiono w IE 11. Dobra odpowiedź KittMedia, dzięki.
Emil Borconi,
8
Ten hack już nie działa, ale ten działa @supports (-ms-ime-align: auto) {.selector {property: value; }}
Roffers
1
@KittMedia została usunięta w 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; }

To działa świetnie!

// 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
źródło
1
@ r3wt _:-ms-lang(x), _:-webkit-full-screen,- tylko MS Edge "rozumie" tę regułę, inne przeglądarki to ignorują. Po regule następuje nazwa klasy lub identyfikator elementu html i tak jest do niego stosowana. Innymi słowy, jeśli kod css ma zostać zastosowany do elementu html tylko w przeglądarce Edge, odłóż tę specjalną regułę tuż przed klasą / id elementu.
CodeGust
więc przeglądarka nie po prostu je zignoruje i nie ustawi na selektor docelowy, ponieważ wszystkie są oddzielone przecinkami? zazwyczaj, oddzielne selektory w css. dlatego jest to mylące. Nadal nie rozumiem, dlaczego inne przeglądarki miałyby to zignorować i tylko ms-edge zastosowałoby css do selektora po przecinku
r3wt
1
@ r3wt jeśli jeden selektor jest nieprawidłowy, cała grupa reguł jest ignorowana. Zilustrowane tutaj css-tricks.com/…
CodeGust
@ r3wt dziękuję! :) zachęciłeś mnie do napisania szczegółów, które powinny być częścią odpowiedzi
CodeGust
@AlexandrKazakov prawdopodobnie, to dlatego, że najnowszy Edge jest oparty na silniku Chromium (?) Którą wersję masz?
CodeGust
14

Bardziej dokładne dla Edge (nie obejmują najnowszego IE 15) to:

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

@supports (-ms-ime-align:auto) { ... } działa dla wszystkich wersji Edge (obecnie do IE15).

dojrzały
źródło
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);
         }
}
Priya Nayak
źródło