¿Cómo identificar el navegador Microsoft Edge a través de CSS?

92

Estoy desarrollando una aplicación web y necesito identificar el navegador de Microsoft Edge por separado de los demás para aplicar un estilo único. ¿Hay alguna forma de identificar Edge usando CSS? Al igual que,

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

css browser microsoft-edge

— Sameera Liyanage
fuente

3

¿Por qué quieres hacer eso?

2

es casi seguro que no necesita hacer eso. ¿Por qué intentas hacerlo?

— Patrick

37

Sin duda, esto es algo que puede necesitar. En el momento de escribir este artículo, Edge todavía está lleno de peculiaridades que estropearán gravemente el CSS válido que funciona en todos los demás navegadores, incluido IE.

— Lawyerson

Nota: Los comentarios condicionales utilizados en el ejemplo solo funcionan para IE9 y versiones anteriores, por lo que [si IE 11] no funcionará realmente.

— Sean McMillan

193

/ * Microsoft Edge Browser 12-18 (todas las versiones antes de Chromium) * /

Este debería funcionar:

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

Para obtener más información, consulte: Extrañeza del navegador

— KittMedia
fuente

8

Microsoft se está moviendo para eliminar tantas propiedades con el prefijo -ms como sea posible en MS Edge para que sea interoperable con otros navegadores. Como tal, está lejos de estar garantizado que funcione en el futuro. Como se mencionó en otras respuestas, la detección de características es mucho más preferible.

— Charles Morris - MSFT

1

Solo lo probé de nuevo y definitivamente funciona. Demostración: jsfiddle.net/pd142446

— KittMedia

@ CharlesMorris-MSFT Estoy de acuerdo con usted, pero hay casos en los que solo necesitamos hacer eso. Por ejemplo, pointer-events: none; funciona bien en IE 11 y todos los demás navegadores, pero deja de funcionar en Edge. Espero que en el momento en que eliminen el prefijo -ms también solucionen los problemas que nos obligaron a usar CSS diferente en primer lugar. En estos casos, la detección de características no ayudará realmente, porque todas las características están ahí, pero Edge ha roto algunas cosas que IE 11 finalmente solucionó. Buena respuesta de KittMedia, gracias.

— Emil Borconi

8

Este truco ya no funciona, sin embargo, este sí lo hace @supports (-ms-ime-align: auto) {.selector {property: value; }}

— Roffers

1

@KittMedia fue eliminado en 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; }

¡Eso funciona muy bien!

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

1

@ r3wt _:-ms-lang(x), _:-webkit-full-screen,: solo MS Edge "comprende" esa regla, otros navegadores la ignoran. La regla va seguida de un nombre de clase o id de un elemento html y, por lo tanto, se le aplica. En otras palabras, si es necesario aplicar un código css a un elemento html solo en el navegador Edge, escriba esa regla especial justo antes de la clase / id de su elemento.

— CodeGust

por lo que el navegador no los ignorará y apuntará al selector, ya que todos están separados por una coma. normalmente los ,selectores separados en css. por eso es confuso. todavía no entiendo por qué otros navegadores ignorarían esto y solo ms-edge aplicaría el CSS al selector después de la coma

— r3wt

1

@ r3wt si un selector no es válido, se ignora todo el grupo de reglas. Ilustrado aquí css-tricks.com/…

— CodeGust

@ r3wt ¡gracias! :) me

— animaste

@AlexandrKazakov posiblemente, eso es porque el último Edge se basa en el motor Chromium (?) ¿Qué versión tienes?

— CodeGust

14

Más preciso para Edge (no incluya el último IE 15) es:

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

@supports (-ms-ime-align:auto) { ... } funciona para todas las versiones de Edge (actualmente hasta IE15).

— maduro
fuente

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
fuente