CSS práctico

[Artículo publicado por morris para tomatoma.ws]

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). – mas –

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: <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:
    ...
    /* correcciones para IE 6 */
    ...

    @media tty {
    i{content:”\”;/*” “*/}}@m;
    @import ‘ie55.css’; /*”;}
    }/* */
    @media tty {
    i{content:””;/*” “*/}};
    @import ‘ie50.css’; {;}/*”;}
    }/* */

  • 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 el soporte de CSS en los distintos motores.

Para tratar con el IE hay dos cosas básicas a tener en cuenta: el modelo de cajas y la propiedad hasLayout (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).

Sigo con otros consejos prácticos que puede que le sirvan a alguien. Suelo empezar las hojas de estilo con estas tres reglas:

Para tratar con el IE hay dos cosas básicas a tener en cuenta: el modelo de cajas y la propiedad hasLayout (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).

Tres reglas básicas

* {
margin: 0;
padding: 0;
}
body {
font-size: 76%;
}
img {
border: none;
}

Primera regla: Cada navegador utiliza una hoja de estilos por defecto, y hay diferencias en los márgenes (margin) y rellenos (padding). 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.

Segunda regla: 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: px y em. Cualquier otra hará que las fuentes se vean de distinto tamaño en algunos navegadores. Pero si usamos px entonces no se podrán redimensionar los textos en IE, presentando un problema de accesibilidad. Así que sólo nos queda em, 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 1em 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 Owen Briggs, que es el que hizo el impresionante trabajo de investigación.

La última regla no tiene misterio: elimino los bordes de las imágenes, ya que no suelo utilizarlos (como la mayoría de la gente, vaya).

También hay un par de correcciones para IE que hago siempre en la hoja de estilos:

  • Si una caja es flotante, siempre incluyo la siguiente propiedad: display: inline;. 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 display a no ser que su valor sea none. Pero así es el IE.
  • Si una caja no es flotante ni está posicionada de forma absoluta intento especificarle el ancho (width). Si por motivos de diseño no puedo entonces le especifico la altura (height). Si no conozco la altura o quiero que ésta se adapte al contenido, entonces le pongo una altura del 1%. Esto es posible gracias a que en IE la propiedad height se comporta como min-height. De esta forma evitaremos otro número de bugs que pueden ser todo un quebradero de cabeza.

Espero que sirva de ayuda… =Smile

Si tengo tiempo iré ampliando un poco este tema, que creo puede interesar. Ahora me voy a tomar unas cañitas y tal… =Smile

La pregunta interesante que provocó este artículo

Volver al índice

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s