2009-07-11

HTML y hacks de CSS para Internet Explorer

Comentarios condicionales

Internet Explorer ha tenido por un largo tiempo una propiedad llamada Conditional Comments (comentarios condicionales) que permite que el contenido sea sólo visible para IE. La utilización de los comentarios condicionales en lugar de otros hacks css es simple:

» Crea una hoja de estilos común para todos los navegadores, sin utilizar ningún hack para poder evitar los problemas en IE.
» Crea una hoja de estilos común para todas las versiones de IE.
» Crea una hoja de estilos separada para cada una de las versiones de IE que desees etiquetar.
» Incuilr las hojas de estilo del punto 2 y 3 utilizando un comentario condicional.

Sintaxis condicional de comentario

El comentario condicional es sólo un comentario HTML especialmente formateado que es captado sólo por varias versiones de Internet Explorer para Windows.

</p> <p>El siguiente comentario condicional es captado por IE5, IE5.5 e IE6:</p> <blockquote><p><!-[if IE]>

<link rel="stylesheet" type="text/css" href="all-ie.css">

<![endif]-></p></blockquote> <p>

Si no deseas que tus estilos específicos de IE sean superpuestos por tu hoja de estilos regular, el orden de la fuente es significante; desearás especificar la hoja de estilos común primero, con las versiones específicas de IE siguiendo a continuación:
</p> <blockquote><p><link rel="&#8221;stylesheet&#8221;" type="&#8221;text/css&#8221;" href="&#8221;common.css&#8221;"></p> <p><!&#8211;[if IE]>

<link rel="&#8221;stylesheet&#8221;" type="&#8221;text/css&#8221;" href="&#8221;all-ie.css&#8221;">

<![endif]&#8211;></p> <p><!&#8211;[if IE 6]>

<link rel="&#8221;stylesheet&#8221;" type="&#8221;text/css&#8221;" href="&#8221;ie-6.0.css&#8221;">

<![endif]&#8211;></p> <p><!&#8211;[if lt IE 6]>

<link rel="&#8221;stylesheet&#8221;" type="&#8221;text/css&#8221;" href="&#8221;ie-5.0+5.5.css&#8221;">

<![endif]&#8211;></p></blockquote> <h2>Comentario Condicional en CSS</h2> <blockquote>



<p>

{/* any IE */float: expression(&#8217;none&#8217;);/* IE 5.x */}

{/* any Moz */float: expression(&#8217;none&#8217;);/* Moz 2.x */}</p></blockquote> <p>

Fuente: Tutorial Feed

No hay comentarios: