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
źródło
Odpowiedzi:
/ * 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
źródło
/* 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/
źródło
_:-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.,
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 przecinkuBardziej 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).źródło
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); } }
źródło