varias - ¿Hay selectores CSS específicos para IE10?

selector padre css

Question

Como IE se está deshaciendo de los comentarios condicionales en la versión 10, tengo una necesidad imperiosa de encontrar un "hack de CSS" específicamente para IE10. Tenga en cuenta que tiene que ser el selector que está siendo "pirateado" y no las propiedades de CSS.

En Mozilla, puedes usar:

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

Mientras estás en Webkit, por lo general haces:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  h1 {
    color: blue;
  }
}

¿Cómo haría algo similar en IE10?

Answer 1

Hasta donde yo sé, no existe tal selector de CSS. Si desea dirigirse específicamente a IE10, ¿por qué no simplemente escribir un poco de javascript para establecer una clase en el elemento del body llamado ie10 , y luego crear estilos específicos para IE10?

Answer 2

No estoy seguro de si esto se ajusta a su selector frente a los requisitos de propiedad, pero se me ocurrió el siguiente método al intentar falsificar text-shadow en IE7-9 y luego desactivar el hack en IE10. La clave es usar las nuevas -ms-animation en IE10.

.header {
    /* For browsers that support it to add a little more punch to a @font-face */
    text-shadow: rgba(100, 100, 100, 0.5) 0 0 2px;

    /* Make IE7-9 do faux bold instead and then turn down the opacity to match */
    *font-weight: bold;
    font-weight: bold/9;
    *filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
    opacity: 0.75/9;

    /* Uh oh! We''ve also caught IE10 in our above hack */

    /* But IE10 supports CSS3 animations. Will a high duration keep CPU usage down? */
    -ms-animation: text-shadow 60s infinite;
}

/* Define the animation */
@-ms-keyframes text-shadow {
    0%, 100% {
        font-weight: normal;
        opacity: 1;
    }
}

Answer 3

El siguiente ejemplo muestra cómo hacer esto

/* 
 #ie10 will only be red in MSIE 10, 
 both in high contrast (display setting) and default mode 
*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #ie10 { color: red; }
}

Advertencia : probablemente también funcione en IE11 +.

Answer 4

Utilizando el selector de navegador CSS de http://rafael.adm.br/css_browser_selector/ , puede agregar un simple + al código y invocar IE10 desde su CSS.

Busque /msie/s(/d)/ y cámbielo a /msie/s(/d+)/ .

Ahora, en su CSS simplemente agregue .ie10 antes de su selector, así:

.ie10 .class-name { width: 100px; }
.class-name { width: 90px; }

Ahora debería ver IE10 representando el ancho de 100px y todos los demás navegadores renderizando el ancho de 90px.