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]-->

css browser microsoft-edge

— 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

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