CSS práctico - Consejos para hacer CSS mas practico

Vamos por partes.

Cómo ver las páginas en distintas versiones de IE
Si dispones de una máquina con Windows XP puedes tener funcionando varias versiones del Explorer (desde la 3 a la 5.5, mas la 6), en QuirksMode tienes los detalles para conseguirlo (básicamente se trata de bajar unas versiones reducidas que no requieren instalación).

Ajustes para los distintos navegadores
El tema de los ajustes para los distintos navegadores es más espinoso. Aquí, como dice el refrán, cada maestrillo tiene su librillo. Lo que yo hago es lo siguiente:

• Utilizo Firefox como plataforma de desarrollo, con la ayuda de la extensión Web Developer. A la vez voy comparando los resultados IE 6, y, en caso necesario corrijo lo que sea en una hoja de estilos aparte. De esta forma consigo un (X)HTML limpio, una hoja de estilos correcta, válida y sin hacks, y otra con correcciones para IE 6.
  
• Para incluir la hoja de estilos de IE utilizo los comentarios condicionales, de forma que queda algo así como:
  
  

  Código:

  <style type="text/css" media="screen">@import "css2_valido.css";</style>          <!--[if IE]>       <link rel="stylesheet" type="text/css" href="ie60.css" media="screen" />       <![endif]-->

  ¿Y qué pasa con IE 5 y 5.5? Muchas correcciones para IE 6 también son válidas para estas versiones, pero suelen necesitar además algunas propias. Lo que hago es incluir una hoja de estilos para cada uno al final de la hoja para IE 6 mediantes hacks. Creo que será mejor poner un ejemplo:
  

  Código:

  ... /* correcciones para IE 6 */ ... @media tty {    i{content:"\";/*" "*/}}@m;    @import 'ie55.css'; /*";} }/* */ @media tty {    i{content:

;/*" "*/}};<BR>   @import 'ie50.css'; {;}/*";}<BR>}/* */<BR></FONT></TD></TR></TBODY></TABLE><BR><BR> <LI><FONT size=2>En general es importante conocer los distintos navegadores y las propiedades y valores de CSS que dan menos problemas. En la Wikipedia por ejemplo tienes una tabla comparativa sobre </FONT><FONT color=#000000 size=2>el soporte de CSS en los distintos motores</FONT><FONT size=2>.</FONT></LI></UL><BR><BR><FONT size=2>Para tratar con el IE hay dos cosas básicas a tener en cuenta: el modelo de cajas y la propiedad </FONT><FONT color=#000000 size=2>hasLayout</FONT><FONT size=2> (básicamente se trata de lo siguiente: a toda capa que no esté posicionada de forma absoluta o sea flotante es conveniente especificarle una anchura o altura si no quieres tener problemas).<BR><BR><BR>Sigo con otros consejos prácticos que puede que le sirvan a alguien. Suelo empezar las hojas de estilo con estas tres reglas:<BR><BR><BR>Para tratar con el IE hay dos cosas básicas a tener en cuenta: el modelo de cajas y la propiedad </FONT><FONT color=#000000 size=2>hasLayout</FONT><FONT size=2> (básicamente se trata de lo siguiente: a toda capa que no esté posicionada de forma absoluta o sea flotante es conveniente especificarle una anchura o altura si no quieres tener problemas).<BR><BR><BR></FONT><SPAN style="FONT-WEIGHT: bold"><FONT size=2>Tres reglas básicas<BR></FONT></SPAN></SPAN> <TABLE cellSpacing=1 cellPadding=3 width="90%" align=center border=0> <TBODY> <TR> <TD><SPAN class=genmed><B><FONT size=2>Código:</FONT></B></SPAN></TD></TR> <TR> <TD class=code><FONT size=2>* {<BR>   margin: 0;<BR>   padding: 0;<BR>}<BR>body {<BR>   font-size: 76%;<BR>}<BR>img {<BR>   border: none;<BR>}<BR></FONT></TD></TR></TBODY></TABLE><BR><BR><FONT size=2><SPAN style="FONT-WEIGHT: bold">Primera regla: </SPAN>Cada navegador utiliza una hoja de estilos por defecto, y hay diferencias en los márgenes (<SPAN style="FONT-STYLE: italic">margin</SPAN>) y rellenos (<SPAN style="FONT-STYLE: italic">padding</SPAN>). Por ejemplo algunos utilizan el margen para situar los marcadores de las listas y otros el relleno. Lo que hago con la primera regla es poner todos los márgenes y rellenos de todos los elementos a 0, de forma que los valores que aplique a continuación se comportarán igual en todos los navegadores.<BR><BR><SPAN style="FONT-WEIGHT: bold">Segunda regla: </SPAN>Por otra parte, el tamaño del texto por defecto en los navegadores es inexplicablemente grande, más o menos un 200% de la fuente del sistema. Así que una de las primeras cosas que se suele hacer es buscar tamaños más pequeños. En la práctica sólo pueden usarse dos unidades para especificar el tamaño de las fuentes: <SPAN style="FONT-STYLE: italic">px</SPAN> y <SPAN style="FONT-STYLE: italic">em</SPAN>. Cualquier otra hará que las fuentes se vean de distinto tamaño en algunos navegadores. Pero si usamos <SPAN style="FONT-STYLE: italic">px</SPAN> entonces no se podrán redimensionar los textos en IE, presentando un problema de accesibilidad. Así que sólo nos queda <SPAN style="FONT-STYLE: italic">em</SPAN>, que para valores menores que 1 en IE se verán excesivamente pequeños. Lo que hago con la primera regla es reducir el tamaño por defecto al 76%, así que <SPAN style="FONT-STYLE: italic">1em</SPAN> presenta un resultado satisfactorio y evita la necesidad de usar valores menores. Si quieres saber por qué el 76% y no otro porcentaje visita la web de </FONT><FONT color=#000000 size=2>Owen Briggs</FONT><FONT size=2>, que es el que hizo el impresionante trabajo de investigación.<BR><BR>La <SPAN style="FONT-WEIGHT: bold">última regla</SPAN> no tiene misterio: elimino los bordes de las imágenes, ya que no suelo utilizarlos (como la mayoría de la gente, vaya).<BR><BR>También hay un par de <SPAN style="FONT-WEIGHT: bold">correcciones para IE </SPAN>que hago siempre en la hoja de estilos:<BR><BR></FONT> <UL> <LI><FONT size=2>Si una caja es flotante, siempre incluyo la siguiente propiedad: <SPAN style="FONT-STYLE: italic">display: inline;</SPAN>. De esta forma evitamos algunos bugs presentes en el modelo de cajas flotantes de IE. Esta propiedad no debería alterar el comportamiento de la caja, ya que una caja flotante ignora la propiedad <SPAN style="FONT-STYLE: italic">display</SPAN> a no ser que su valor sea <SPAN style="FONT-STYLE: italic">none</SPAN>. Pero así es el IE.<BR></FONT> <LI><FONT size=2>Si una caja no es flotante ni está posicionada de forma absoluta intento especificarle el ancho (<SPAN style="FONT-STYLE: italic">width</SPAN>). Si por motivos de diseño no puedo entonces le especifico la altura (<SPAN style="FONT-STYLE: italic">height</SPAN>). Si no conozco la altura o quiero que ésta se adapte al contenido, entonces le pongo una altura del 1%. Esto es posible <SPAN style="FONT-STYLE: italic">gracias</SPAN> a que en IE la propiedad <SPAN style="FONT-STYLE: italic">height</SPAN> se comporta como <SPAN style="FONT-STYLE: italic">min-height</SPAN>. De esta forma evitaremos otro número de bugs que pueden ser todo un quebradero de cabeza.<BR></FONT></LI></UL><FONT size=2>Espero que sirva de ayuda... <IMG alt

:) src= http://www.wikilearning.com/imagescc/10149/icon_twisted.gif∞ border=0><BR><BR><BR>Si tengo tiempo iré ampliando un poco este tema, que creo puede interesar. Ahora me voy a tomar unas cañitas y tal... <IMG alt

:) src= http://www.wikilearning.com/imagescc/10149/icon_twisted.gif∞ border=0><BR></FONT>""