query - edge css

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

Question

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 manera de identificar Edge usando CSS? Al igual que,

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

Answer 1

Este debería funcionar:

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

Para más información ver: Navegador Extrañeza

Answer 2

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

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

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

Answer 3

Detección de características, detección de características, detección de características. Todavía no he encontrado un buen caso de uso de por qué alguien necesitaría detectar o detectar UA con CSS. ¿Podría explicar con un poco de detalle un caso de uso?

CSS

Encontré esta publicación de Jeff Clayton , que ilustra cómo encontrar Edge a través de CSS, pero también detectará Chrome y Safari.

/* Chrome, Safari, AND NOW ALSO the Windows 10 Edge Browser */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .selector { property:value; } 
}

Pero si DEBES oler UA:

Cadena de Microsoft Edge UA:

Mozilla / 5.0 (Windows NT 10.0) AppleWebKit / 537.36 (KHTML, como Gecko) Chrome / 42.0.2311.135 Safari / 537.36 Edge / 12.10136

Detallo por qué en esta publicación de blog.

Neowin informó recientemente que el nuevo navegador de Microsoft para Windows 10, Spartan, usa la cadena Chrome UA, "Mozilla / 5.0 (Windows NT 10.0; WOW64) AppleWebKit / 537.36 (KHTML, como Gecko) Chrome / 39.0.2171.71 Safari / 537.36 Edge / 12.0 ″. Eso se hace a propósito.

También notará que la cadena completa termina con "Edge / 12.0", que Chrome no.

Debo señalar que esto no es una desviación radical de lo que Microsoft hizo con IE 11, que en Windows 8 dice: Mozilla / 5.0 (Windows NT 6.3; Trident / 7.0; rv: 11.0) como Gecko, como se explica en este enviar.

¿Qué es el agente de usuario sniffing?

A menudo, los desarrolladores web buscarán UA para la detección del navegador. Mozilla lo explica bien en su blog:

Servir diferentes páginas web o servicios a diferentes navegadores suele ser una mala idea. La Web debe ser accesible para todos, independientemente del navegador o dispositivo que estén utilizando. Hay formas de desarrollar su sitio web para mejorar progresivamente en función de la disponibilidad de funciones en lugar de apuntar a navegadores específicos.

Aquí hay un gran artículo que explica la historia del Agente de usuario.

A menudo, los desarrolladores perezosos solo rastrearán la cadena UA y deshabilitarán el contenido en su sitio web según el navegador que creen que está utilizando el espectador. Internet Explorer 8 es un punto de frustración común para los desarrolladores, por lo que con frecuencia verifican si un usuario está usando CUALQUIER versión de IE y deshabilitan las funciones.

El equipo de Edge detalla esto aún más en su blog.

Todas las cadenas de agentes de usuario contienen más información sobre otros navegadores que el navegador real que está utilizando, no solo tokens, sino también números de versión ''significativos''.

Cadena UA de Internet Explorer 11:

Mozilla / 5.0 (Windows NT 6.3; Trident / 7.0; rv: 11.0) como Gecko

Cadena de Microsoft Edge UA:

Mozilla / 5.0 (Windows NT 10.0) AppleWebKit / 537.36 (KHTML, como Gecko) Chrome / 42.0.2311.135 Safari / 537.36 Edge / 12.10136

La propiedad userAgent ha sido descrita acertadamente como "un paquete de mentiras cada vez mayor" por Patrick H. Lauke en las discusiones del W3C. ("O, mejor dicho, un acto de equilibrio de agregar suficientes palabras clave heredadas que no tendrán inmediatamente la caída del antiguo código de detección de UA, mientras intentan transmitir un poco de información realmente útil y precisa").

Recomendamos que los desarrolladores web eviten la detección de UA tanto como sea posible; Las características modernas de la plataforma web son casi todas detectables de manera fácil. Durante el año pasado, hemos visto algunos sitios de detección de UA que se han actualizado para detectar Microsoft Edge ... solo para proporcionarle una ruta de código IE11 heredada. Este no es el mejor enfoque, ya que Microsoft Edge coincide con los comportamientos de ''WebKit'', no con los comportamientos de IE11 (cualquier diferencia de Edge-WebKit son errores que estamos interesados ​​en corregir).

En nuestra experiencia, Microsoft Edge se ejecuta mejor en las rutas de código ''WebKit'' en estos sitios. Además, dado que Internet está disponible en una variedad más amplia de dispositivos, suponga que los navegadores desconocidos son buenos; no limite su sitio a trabajar solo en un pequeño conjunto de navegadores conocidos actuales. Si hace esto, su sitio seguramente se romperá en el futuro.

Conclusión

Al presentar la cadena Chrome UA, podemos solucionar los hacks que utilizan estos desarrolladores para presentar la mejor experiencia a los usuarios.

Answer 4

/* Microsoft Edge Browser 12+ (All) - 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/