Los estilos por defecto

Puedo sumar un artículo de Zona Firefox referido a la normalización del CSS en las páginas webs con este otro que vi en Cosas Secillas donde se comenta sobre las diferentes formas en que se verán las hojas de estilo, dependiendo del navegador que utilicemos y ya sale un post listo para ser publicado.

Me parece que lo mejor es reproducir el artículo completo de Electriblog: Estandarizando las hojas de estilo por defecto de los navegadores

El diseño web es, gracias a la poca homogeneidad y al poco consenso de los programadores de los distintos navegadores, más un arte que una disciplina. Parece haber tantos criterios e interpretaciones del modelo de cajas de las CSS como navegadores existen. Esto hace que lograr una uniformidad en la presentación de la información en la web sea, para el diseñador, casi la tarea de un malabarista. Cuando logras hacer que algo se vea bien en un navegador algo se te estropea en otro.

La forma en que cada navegador interpreta las hojas de estilo es motivo constante de estudio por parte de los diseñadores web. Si buscamos en la web encontraremos cantidad de sitios con consejos y trucos para hacer que nuestras páginas sigan las mismas normas, o al menos normas parecidas, al ser exhibidas en distintos navegadores y sistemas. Aún así, aunque logremos domesticar las distintas bestias, las páginas web muestran algunas diferencias por un motivo que normalmente no es mencionado dentro de estos trucos y consejos: la hoja de estilos por defecto de los navegadores.

Al comenzar un nuevo sitio, y al aplicar los primeros estilos a un documento (X)HTML, los parámetros que guían la forma en que se muestran las páginas no son los mismos. Es decir, no es cierto que todos los parámetros de una hoja de estilos estén en los mismos valores en todos los navegadores, ni siquiera están todos en 0. Cada navegador tiene unos ciertos valores, que pueden variar de manera especial, dependiendo del navegador y del sistema.

Para muestra vaya un ejemplo: en Firefox de Windows al mostrar un H1 como primer elemento de una página este tiene un mismo valor de margen para los lados superior e inferior de la caja, que crean un espacio blanco regular arriba y abajo del texto del encabezado.

En Internet Explorer 6 de Windows el H1 como primer elemento de una página tiene un valor dado para el borde inferior (valor distinto del de Firefox, por cierto) y un valor de 0 para el borde superior de la caja. Cuando el H1 es el segundo elemento el comportamiento en IE y FF es similar, eso si, con distintos valores de margen.

Los valores que suelen ser distintos generalmente corresponden al valor del margen de las cajas de texto (para los elementos de tipo bloque) y el valor del interlineado.

Si nuestra intención es que una página se vea lo más similar posible de un navegador y de un sistema operativo a otro la única opción posible es reescribir explícitamente todos los valores que varían en las distintas hojas de estilo por defecto de los navegadores. Es un trabajo laborioso, pero fructífero.

Para ahorrarnos tiempos la mejor estrategia es la siguiente: antes de comenzar con los estilos propios de nuestra página podemos aplicar una hoja de estilos “normalizadora”, que reescriba todos aquellos valores que varíen de una hoja de estilos de un navegador a la de otro, de forma que estandarizaremos la manera en que se ven por defecto los elementos. Una vez que tenemos esto podemos comenzar con los estilos propios de la página que estamos diseñando, reescribiendo si es necesario algunos de los valores que nuestra CSS estándar ha definido.

En este momento me encuentro definiendo una hoja de estilos estándar para navegadores, pero para poder finalizarla necesitaré de la ayuda de algunas personas, especialmente aquellas que tengan acceso a varios ordenadores con distintos sistemas operativos y navegadores. Quienes quieran colaborar no tienen más que dejarme un mensaje. Una vez que finalicemos con ella la pondremos a disposición de la comunidad para que podáis aplicarla a vuestros proyectos.