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.

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

Comentarios: 10

  1. Vengo a aportar mi granito ;)

    @cc_on es conditional compilation, otra de las implementaciones propietarias de IE. En principio serviría para ejecutar código dependiendo de la versión del motor jscript que tengamos, pero actualmente sólo se usa para detectar si el navegador es IE.

    No obstante, no me gustan para nada los comentarios condicionales. Aunque de alguna manera están justificados en navegadores tan antiestándar como IE 6/7/8, a partir de IE9 no veo ninguna necesidad de usarlos.

    ResponderEliminar
  2. Gracias Emilio por la explicación.

    La cuestión es que ie10 sigue siendo un ie, y pese a todo, en algunas cuestiones se comporta como ie.

    Son los hacks lo que no habría que utilizar diréctamente en los estilos. La recomendación siempre fue hacer uso de los cc para incluir todo aquello que fuese necesario en exclusiva para algún ie. Pero como el 10 no los entiende ya...

    Un saludo

    ResponderEliminar
  3. Kseso como siempre llegar a tu sitio es un oasis de soluciones! Voy a probar esto de ie10 a ver como funciona, pero seguramente me hayas solucionado un problema como siempre.
    Te mando un abrazo grande!
    Ruso (DragonX)

    ResponderEliminar
  4. Qué alegría verte por aquí, Ruso.
    Y más ver que pude serte de alguna ayuda.

    Un saludo

    ResponderEliminar
  5. Hola!, Tengo el siguiente código CSS y no logro que Ie10 lo reconozca, ya e intentado poner lo que arriba dicen, pero sin exito. Los pongo aquí a ver si alguien me puede echar una mano. Millones de gracias!
    Sergio


    @media all and (max-width: 1221px) {

    #footer_fondo {
    height: 330px;
    }
    }

    ResponderEliminar
    Respuestas
    1. En serio, Sergio, no somos adivinos
      nadie, ni el autor del blog ni sus visitantes/usuarios.

      Si tú, que tienes acceso a todos los códigos implicados y puedes ver cómo interactúan, no puedes encontrar respuestas, los demás lo tenemos un poquito más difícil. Por no decir imposible.

      Espero que halles la solución. Y si quieres recibir ayuda (aquí o en cualquier otro ligar de la red) lo menos que deberías hacer es facilitar un enlace a una página donde se manifieste el error.

      Un saludo

      Eliminar
  6. Kseso. Lo que pasa que antes que poner el link puse el código porque puede que sea una incopatibilidad conocida del @media all and...
    El link es www.aeromodelismovirtual.com Concretamente en el footer. Tengo una lista de links internos en mi sitio y quiero que cuando se vea en un monitor menor de 1221px de resolución horizontal se re acomoden. En Chrome, Mozilla Safari no hay problema y el @media all and funciona bien, pero en el IE10 nada de nada, como si no existiera ese comando. Gracias por la ayuda!

    ResponderEliminar
    Respuestas
    1. ¿Revisaste la documentación?. En principio parece que funciona.
      No tengo un IE a mano, así que no los puedo ayudar; pero aprovecho para recomendar una mirada a las especificaciones oficiales de cada navegador antes de preguntar por lo que debería funcionar y no lo hace. Porque después resulta que hay algún otro error y entonces sí es indispensable un ejemplo para probarlo. Mejor una demo que el enlace a la página, para que nadie sospeche que es espam.

      Características del diseño adaptativo

      Media Queries

      Cómo crear un diseño adaptativo con una cuadrícula de CSS

      Eliminar
    2. Sergio
      En estos momentos no tengo a mano un IE10
      Pero el problema lo tienes en la anchura de esa caja. Hay un desborde, por el lateral derecho, de los enlaces alojados en ella (tanto FF como Chrome) al reducir viewport.

      No obstante, el declarar all and (max-width:... es redundante (la keyword 'all' a no ser que tengas las @media queries en un archivo que llames con un media específico o limitante)

      Además, aunque posíblemente no influya, no entiendo a qué viene tener todo el footer y algo más metido en un form ?!!

      Un saludo

      Eliminar
  7. Ajá; mire usted. Yo me adelanté a su respuesta porque estaba (casi) seguro de que la culpa no era del IE, y ya comenté lo que me enferma que publiquen "...el código no funciona...", "...este navegador no sirve...", en fin, que se dediquen aunque sea un rato a hacer una página pero no miren ni estudien las especificaciones antes de exponer lamentos.

    Igual, es cierto que IExplorer (y ahora las nuevas versiones de Opera y hasta de Chrome) tienen interpretaciones extrañas de códigos que ya deberían estar probados (aunque no siempre aprobados); así que me tomé el trabajo de buscarle al amigo Sergio N el dato, y de paso quitarme la duda.
    Al final había un ancho con problemas.

    Qué bueno que lo viste. Por estas cosas ya te estábamos extrañando.

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap