Cómo Identificar Microsoft Borde del navegador a través de CSS?

Estoy desarrollando una aplicación web, y necesito identificar Microsoft Borde del navegador por separado de los demás, para aplicar un estilo único. Es allí una manera de identificar Borde mediante el uso de CSS?
Igual,

<!--[if IE 11]>
Special instructions for IE 11 here
<![endif]-->
  • ¿Por qué quieres hacer eso?
  • es casi seguro que no necesita hacer eso. Por qué estás tratando de hacer?
  • Esto es ciertamente algo que usted podría necesitar. En el momento de la escritura, el Borde está todavía llena de quircks que será severamente lío CSS válido que funciona en todo el resto de los navegadores, incluyendo IE.

4 Kommentare

  1. 168

    Este debería funcionar:

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

    Para más información, véase: Navegador De Extrañeza

    • Microsoft se está moviendo a quitar muchos ms prefijo propiedades como sea posible en MS Borde de ser interoperable con otros navegadores. Como tal, esto está lejos de ser garantizado para trabajar en el futuro. Como se ha mencionado en otras respuestas, la característica de detección es mucho más preferible.
    • Prueba de nuevo y definitivamente no funciona. Demostración: jsfiddle.net/pd142446
    • Se sigue trabajando para mí en mi arriba-a-fecha del sistema.
    • Estoy de acuerdo con usted, pero hay casos en que necesitamos hacer eso. Por ejemplo, puntero-eventos: ninguno; funciona bien en IE 11 y todos los demás navegador, pero deja de funcionar en el Borde. Espero que, llegado el momento de eliminar el -ms prefijo ellos también van a solucionar los problemas que nos ha obligado a utilizar diferentes hojas de estilo CSS en el primer lugar. En estos casos la característica de detección, realmente no ayuda, ya que todas las funciones están ahí, pero de Borde han roto algunas de las cosas que IE 11 por último fija. KittMedia bonita respuesta, gracias.
    • Este hack ya no funciona, sin embargo este no @admite (-ms-ime-align:auto) { .selector { propiedad: valor; } }
    • se quitó en el Borde de 14
    • Todavía trabajo con el borde de la versión 18.x, muchas gracias !
    • Versión del borde 44 aquí y no funciona.

  2. 17
    /* Microsoft Edge Browser 12+ (All) - one-liner method */
    
    _:-ms-lang(x), _:-webkit-full-screen, .selector { property:value; }

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

    • ¿cómo demonios funciona esto?
    • sólo MS Borde «entiende» que la regla, otros navegadores ignor ella. La regla es seguida por una clase o id nombre de un elemento html y así se le aplica. En otras palabras, si un código css debe ser aplicado a un elemento html en el explorador de Borde solamente, ponga especial de la regla de derecho antes de la clase/id de elemento.
    • por lo que el navegador no sólo ignoran los de destino y el selector, ya que todos ellos son separados por una coma? normalmente el , separa los selectores en css. es por eso que esto es confuso. todavía no entiendo por qué otros navegadores ignoran esto y ms-edge aplica el css para el selector después de la coma
    • si un selector no es válido, todo el grupo de reglas se ignora. Aquí ilustrado, css-tricks.com/…
    • gracias! 🙂 que me animó a escribir los detalles que debería haber sido la parte de la respuesta inicialmente
    • posiblemente, esto debido a que la última Borde está basado en Chromium motor(?) que versión tienes?

  3. 9

    Más precisos para Borde (no se incluyen las últimas es decir 15) es:

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

    @supports (-ms-ime-align:auto) { ... } funciona para todos Borde versiones (actualmente hasta IE15).

  4. 3

    Característica de detección, característica de detección, detección de características. Todavía tienen que encontrar un buen caso de uso de por qué alguien necesitaría UA oler o detectar con CSS. Podría por favor explicar en un poco de detalle, un caso de uso?

    CSS

    He encontrado este post de Jeff Clayton, que ilustra cómo encontrar Borde a través de CSS, pero también detecta 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 DEBE UA oler:

    Microsoft Borde de la UA cadena:

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

    Me detalle por qué en este blog.

    Neowin ha informado recientemente de que Microsoft del nuevo navegador para Windows 10, Spartan, utiliza el Chrome UA cadena, «Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0». Que está hecho a propósito.

    También te darás cuenta de que toda la cadena termina con «Edge/12.0», que Chrome no.

    Debo señalar, que este no es un redical salida de lo que hizo Microsoft con internet explorer 11, que en Windows 8 se lee: Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) como Gecko, como se explica en este post.

    ¿Qué es un Agente de Usuario de oler?

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

    Servir a las distintas páginas Web o servicios para los diferentes navegadores es generalmente una mala idea. La Web está destinado a ser accesible para todos, independientemente de que navegador o dispositivo que esté utilizando. Hay maneras de desarrollar su sitio web para incrementar progresivamente la propia, en base a la disponibilidad de elementos en lugar de por la orientación específica de los navegadores.

    He aquí un gran artículo que explica la historia del Agente de Usuario.

    A menudo, la pereza de los desarrolladores sólo oler la UA cadena y deshabilitar el contenido de su sitio web basado en navegador que creen que el visor está utilizando. Internet Explorer 8 es un punto común de frustración para los desarrolladores, por lo que con frecuencia comprobar si un usuario está usando CUALQUIER versión de IE, y deshabilitar funciones.

    El equipo de Edge detalles de este aún más profundo en su blog.

    Todos los agentes de usuario cadenas contienen más información acerca de otros navegadores que el navegador que está usando, no sólo los tokens, pero también ‘significativas’ números de versión.

    Internet Explorer 11 UA cadena:

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

    Microsoft Borde de la UA cadena:

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

    La propiedad userAgent ha sido descrito como «un creciente sarta de mentiras» por Patrick H. Lauke en W3C discusiones. («o, más bien, un acto de equilibrio de la adición de suficiente legado de palabras clave que no tiene edad UA-sniffing código de caerse, mientras que todavía está tratando de transmitir un poco de la realidad, la información útil y precisa.»)

    Recomendamos que los desarrolladores web de evitar la UA oler tanto como sea posible; modern web de las características de la plataforma son casi todos detectable en formas sencillas. Durante el año pasado, hemos visto algunos UA-husmea en los sitios que se han actualizado para detectar Microsoft Borde… sólo para proporcionar un legado IE11 ruta de código. Este no es el mejor enfoque, como Microsoft Borde de los partidos de ‘WebKit’ comportamientos, no IE11 comportamientos (cualquier Filo-WebKit diferencias son errores que estamos interesados en la fijación).

    En nuestra experiencia de Microsoft Borde se ejecuta mejor en el ‘WebKit’ rutas de código en estos sitios. También, con el internet se convierte en disponible en una amplia variedad de dispositivos, por favor, asumir desconocido navegadores son buenas – por favor, no limitar su sitio a trabajar solamente en un pequeño conjunto de los actuales navegadores conocidos. Si usted hace esto, su sitio es casi seguro que romper en el futuro.

    Conclusión

    Mediante la presentación de Chrome UA cadena, podemos evitar los hacks de estos desarrolladores están utilizando, para presentar la mejor experiencia a los usuarios.

    • No de su respuesta no se relacionan con la pregunta de alguna manera? Describir por qué un agente de usuario no debe ser utilizado para la detección, que no responde a la pregunta – cómo hacerlo a través de CSS – de ninguna manera.
    • Yo también ilustra por QUÉ hacer otra cosa que la característica de detección es a menudo perjudicial. Fue también la esperanza de que alguien finalmente ilustrar por qué iban a utilizar sniffing o css en lugar de la característica de detección.
    • Había algo incorrecto acerca de mi respuesta?
    • Lo mismo ocurre con esta respuesta destino de todos los navegadores? Estoy tratando de destino sólo un navegador específico porque el css tiene que ser diferente de otros navegadores… no estoy seguro cuál es la pregunta que está contestando aquí
    • «¿Podría por favor explicar en un poco de detalle, un caso de uso?» El borde tiene un bug conocido donde a través de una transformación 3D hará un elemento de parada de representación cuando se sale de la página. Tratando de usarlo para hacer un efecto de paralaje hace que el sitio se vea absolutamente roto. UA de detección es útil en este caso, porque puedo aplanar el paralaje en el Borde y mi sitio no se parecerá a la basura.
    • Quiero detectar Borde porque estoy comprobando su falta de apoyo para :focus-within y a juzgar por este problema, la función de detección de selectores requiere JavaScript, y me gustaría mucho más el uso de css solución.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea