soy Kseso y esto EsCSS

Hacks Css para IE 10

3 Hacks Css exclusivos para IE 10 que resuelven el inconveniente que supone que Microsoft haya retirado el soporte a los comentarios condicionales en Internet Explorer 10.

Hacks Css para IE 10

·Por Kseso ✎ 10

hack css keithclarkcouk en @mediaAMPLIADO: 3 hacks Css para poder declarar estilos específicos para los internet explorer 10 utilizando los bloques de las reglas @media y algo más.
Sólo como curiosidad y para tu conocimiento. Porque no has de olvidar que la única forma "oficial" de de hacer eso, Css específico o exclusivo para ie, es con el uso de comentarios condicionales, pero como IE10 no soporta los comentarios condicionales... aquí tienes varias formas distintas de solventarlo.

Detectar IE10 con @cc_on

Este hack lo vi en impressivewebs, su autor dice que lo descubrió en un hilo de Reddit, obra de quien dice ser Rob W., que posteó este snippet en el post de StackOverflow.

Todo se reduce a incluir un script dentro de un comentario condicional excluyente. Así nos aseguramos que ie6-9 no lo entenderán y el ie10 detectará lo que microsoft llama @cc_on. Tal que así:

<!--[if !IE]> <!--<script> if (/*@cc_on!@*/false) { document.documentElement.className+=' ie10'; } </script> <!--<![endif]-->

Esto agrega la clase ie10 al elemento <html>, similar a lo que hacen las clases condicionales. Luego, en el CSS, sólo hay que definir la regla correspondiente:

.ie10 { /* Aquí los estilos exclusivos para ie10*/ }

No tengo reparo ninguno en reconocer que no tengo ni idea sobre este @cc_on de microsoft. Pero creo que es de cajón que si funciona en ie10 lo hará en el 11 (si llega y cuando llegue), o ¿quizás no?.

Sea como fuere, a todos los contras de los cc y hacks hay que añadir el hecho de que éste, además, necesita de js.

Una demo del hack @cc_on obra de Louis Lazaris.

El hack de la regla @media 0\0

Como todos los hacks, este también se basa en los errores al leer y aplicar los estilos los navegadores de la familia IE. Este hack usa una combinación de los caracteres escapados \0, \, y \9 que en vez de anular la regla @media será tomada por buena por IE´s.

Para IE 6 y 7

@media screen\9 { body { background: red; } }

Para IE 6, 7 y 8

@media \0screen\,screen\9 { body { background: green; } }

Para IE 8, 9 y 10

@media screen\0 { body { background: orange; } }

IE 9 y 10

@media screen and (min-width:0\0) { body { background: yellow; } }

Ejemplo de uso del hack

Todo lo que hay que hacer es algo como:

/* estilo general */ body { background: pink; } /* estilo para IE 6 y 7 en todos los media */ @media all\9 { body { background: red; } h1 { color: yellow; } } /* Estilos para imprimir en IE 6 y 7 */ @media print\9 { body { color: blue; } h1 { color: red; } }

Advertencia del creador del hack

No estoy abogando por el uso de estas técnicas, he compartido esta información porque no está documentado en ninguna parte. Usa esto si te conviene hacerlo, pero ten cuidado, que por alguna razón aparece con frecuencia la palabra "hack" en este post.

Crédito y autoría del original

El autor de este hack es @keithclarkcouk y me lo encontré en su blog.

Pero suscribo la advertencia y te reitero lo que decía al inicio del artículo: usa los comentarios condicionales excepto si es para IE10, que no soporta cc.

Hack Css para IE10 vía @media screen

Así que si tienes que discriminar esta última versión, aquí tienes otro hack Css para ie10. Lo encontré en github obra de Atk:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #ie10 {color: red;} } /*# IE10 sólo será de color rojo en MSIE 10, tanto en alto contraste (ajuste de pantalla) y en el modo por defecto*/

Según palabras del propio "descubridor" del hack css para ie10:

Con la eliminación de los comentarios condicionales en MSIE 10, nace la necesidad de cómo declarar código Css sólo para esta versión del navegador. La reciente introducción de las @media queries -ms-high-contrast viene al rescate, pero tiene que trabajar incluso en el modo de alto contraste.
Lo he comprobado en IE7-10, Chrome, Firefox, Opera y Safari.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso