Técnicas para Cross-Browser CSS

Técnicas para Cross-Browser CSS

Hacer un website compatible con todos los navegadores es probablemente la tarea mas incomoda que debe realizar un programador web. Afortunadamente podemos hablar de CSS Cross-Browser, que no es más que una serie de técnicas y consejos para desarrollar websites que se vean exactamente igual en cualquier navegador.

Unas de las principales técnicas es resetear los estilos que los navegadores definen por defecto para cada elemento HTML:

html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6,
 pre, form, p, blockquote, fieldset, input, hr {margin:0; padding:0;}
h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code,
 em, strong, th {font-size:1em; font-weight:normal; font-style:normal;}
ul, ol {list-style:none;}
fieldset, img, hr {border:none;}
caption, th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}

Aquí hay un CSS que puedes incluir en tus proyectos para resetear los estilos:
http://meyerweb.com/eric/tools/css/reset/reset.css

El problema de Internet Explorer.

IE tiene una manera muy “peculiar” de entender CSS que  hace que los programadores web tengamos que dedicar gran parte del tiempo en hacer que el código funcione particularmente en él. Esto es una gran pérdida de tiempo y puede que de dinero, pero que no hay más remedio que afrontar.

Comentarios condicionales

Para suerte de muchos existe algo llamado “comentarios condicionales” que están implementados en Internet Explorer y le permite al programado hacer estilos específicos para este navegador.

Esto es interpretado únicamente por IE.

<!--[if IE]>
<link href="ie.css" rel="stylesheet" />
<![endif]-->

También podemos hacer un estilo para una versión en específico de IE o para un grupo de versiones.

Para la versión 6:

<!--[if IE 6]>
<link href="ie6.css" rel="stylesheet" />
<![endif]-->

Para la version 7:

<!--[if IE 7]>
<link href="ie6.css" rel="stylesheet" />
<![endif]-->

Para la versión 6 y versiones anteriores:

<!--[if lte IE 6]>
<link href="ie6.css" rel="stylesheet" />
<![endif]-->

Para la versión 7 y versiones superiores:

<!--[if gte IE 7]>
<link href="ie6.css" rel="stylesheet" />
<![endif]-->

CSS Hacks

Para corregir un problema de forma rápida existe una técnica que es la más usada por los programadores web, con la que podemos hacer estilos específicos para IE dentro de la misma hoja de estilos general, llamada “CSS Hacks”:

Para la versión 6:

* html #div { height: 300px; }

Para la versión 7:

*+html #div { height: 300px; }

Para la versión 8:

#div { height: 300px\0/; }

Para la versión 7 y 8:

#div { height: 300px\9; }

La única pega que tiene esta técnica es que no es un estándar y por lo tanto no tiene el visto bueno de la W3C. Pero como dije antes es una forma rápida de corregir un problema, aunque lo recomendable es usar los comentarios condicionales. 

Recursos adicionales

CompartirTwitter Facebook Google+ Pinterest LinkedIn Flipboard Delicious Addthis