2011-09-06 24 views
19

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 CSS.¿Hay selectores de CSS específicos para IE10?

En Mozilla, puede utilizar:

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

Mientras que en Webkit, que suele hacer:

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

¿Cómo voy a hacer algo similar en IE10?

+0

Solo usaría los comentarios condicional de IE. Además, ninguno de mis amigos o familiares sabe siquiera sobre IE 10. –

+7

IE10 probablemente cumplirá con los estándares para no necesitar ningún truco. Y Tyler, la pregunta dice que no admite comentarios condicionales. – BoltClock

+2

@BoltClock Desafortunadamente hay algunas variaciones raras incluso entre los navegadores web compatibles (Webkit/Firefox/Opera) por lo que un selector como @ -moz-document realmente ayuda, al intentar crear una experiencia perfecta de píxeles en todos los navegadores. Aunque soy un gran admirador de permitir que los navegadores muestren una experiencia ligeramente diferente para sus usuarios, mi cliente no. – kunambi

Respuesta

33

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 trabajar en IE11 +, también.

+0

Gracias por su aporte, acepté esto como una respuesta. Ya sea que apunte a IE11 o no es algo de lo que no creo que ninguno de nosotros deba preocuparse, desde hace algún tiempo :-) – kunambi

+5

Eso es un pensamiento peligroso. Aunque pase mucho tiempo antes de que salga IE11, eso significa que el código estará menos fresco en tu mente y quizás sea más difícil de solucionar. Además, nadie sabe realmente cuándo saldrá la próxima versión de IE, o se solucionará el error que está solucionando. Solo usaría un truco como este para algo que no se romperá si el error se soluciona en una versión posterior. –

+1

Acabo de intentar usar este método. Solo funciona en el entorno de desarrollo, no en producción. – agassi0430

3

Por lo que 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 body llamado ie10, y luego crear estilos específicos para IE10?

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 cosas -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; 
    } 
} 
+6

¡Este es claramente el trabajo de un hombre loco! –

5

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

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

En su CSS sólo tiene que añadir .ie10 antes de que su selector de modo:

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

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

Cuestiones relacionadas