El blog del Staff/Stuff de Sync.es aportando nuestras ideas al mundo

Hoja de estilos por defecto

Hace mucho tiempo que no dedicaba el post a algún tema técnico relacionado con mi profesión. Esta semana, por casualidad, me topé con un tema que me ha dado algún que otro dolor de cabeza.

El tema es el siguiente, ¿por qué cuando uno hace una página Web sin ningún tipo de   esta se ve de manera diferente en distintos navegadores?

En un post de hace unos meses, hablé de la importancia de la declaración del DOCTYPE al inicio del código de una página Web con el fin de asegurarnos de que  el código se interprete igual en navegadores diferentes.

Hoy quería hablar de los por que traen de fábrica los distintos navegadores y que afectan a las etiquetas de una página Web. Por ejemplo, ¿Por qué una etiqueta h1 a la que no se ha especificado ningún estilo aparece con más margen en Internet Explorer que en ?


Efectivamente, todos los navegadores tienen unos estilos por defecto para que una página sin estilos se muestre de manera más o menos lógica (por ejemplo, que un texto dentro de un h1 salga más grande que otro dentro de un h2).

Esto, aunque haga que se muestre de manera diferente en distintos navegadores, está muy bien cuando no metemos nuestros propios estilos en la página. Sin embargo, cuando queremos poner nuestros propios estilos, puede ser una verdadera lata intentar que un elemento encerrado en una etiqueta se vea igual en distintos navegadores. La mejor opción en este caso es, o bien, partir de los mismos “estilos por defecto” en los distintos navegadores, o bien, eliminar estos estilos por defecto para partir de cero en las mismas condiciones en todos los navegadores. Veamos las dos opciones:

1- ¿Se pueden tener los mismos estilos por defecto en distintos navegadores?

Sería lo ideal y lo lógico. Al menos partiríamos de las mismas condiciones iniciales. Pero esta opción no nos va a ser útil, ya que cada usa sus propios estilos por defecto y son diferentes de los de los demás navegadores.

Por ejemplo, en Firefox, los estilos que usa por defecto, en Windows  están en “C:/Archivos de Programa/Mozilla Firefox/res/.”. Echándole un vistazo, podemos ver de donde salen esos márgenes mágicos.

Por lo tanto, no podemos contar con que los navegadores usen los mismos estilos por defecto, así que descartamos esta opción.

2- Resetear los estilos por defecto

Es la única opción que nos queda para partir de las mismas condiciones. Puede que nos haga tener una hoja de estilos más grande, pero a la postre nos reportará muchas ventajas, ya que no tendremos que hacer código distinto para navegadores diferentes.

Una buena práctica para resetear los estilos por defecto es añadir estas líneas al principio de nuestra hoja de estilos:

*{
    margin: 0;
    padding: 0;
    border: 0;
}

Lo que hacemos es resetear los márgenes, el padding y el borde para todas las etiquetas. De esta manera sabremos que ninguna etiqueta tendrá un margen por defecto, ni un padding por defecto, ni ningún tipo de borde.

¿3-? Una tercera opción, una combinación entre resetear y utilizar los mismos estilos por defecto

El problema de resetear los estilos es que perderemos la visión a la que estamos acostumbrados de las cosas. De repente ya no veremos los objetos de un formulario como estamos habituados a verlos. Haced la prueba con una caja de tipo texto de un formulario. Veréis que básicamente desaparece al eliminar todos los bordes y todos los márgenes. Esto nos obliga a crear nuestros propios estilos obligatoriamente.

Me parece una buena opción crear nuestros propios estilos por defecto una vez reseteados los estilos por defecto que traen los navegadores. Se me ocurre que podemos utilizar una versión “light” de los estilos que usa Firefox para utilizarlos como estilos por defecto. De esta manera, siempre se aplicarían independientemente del navegador.

Nos podría quedar algo así en nuestra hoja de estilos:

/* Reseteo el margen, padding y borde */
*{
    margin: 0;
    padding: 0;
    border: 0;
}

/* Importo mis estilos por defecto
-----------------------------------------------------------------------------*/
@import url("my_default_styles.css");

/* A partir de aquí añadiría el resto de mis estilos propios para la página que estoy creando */

...

En my_default_styles.css añadiría una versión reducida del fichero html.css de Firefox para que al menos inicialmente tuviésemos un aspecto más habitual de la página.

Os dejo algunos enlaces sobre el tema:

Default styles for CSS

Built a master stylesheet

¿Quién define los estilos por defecto de los navegadores?

También te puede interesar:

1 comentario

1 JorgeNo Gravatar { 10.17.10 at 14:53 }

En cuanto a resetear los estilos suelo hacer uso de
http://meyerweb.com/eric/tools/css/reset/
Y despues, “frameworks css” como http://www.blueprintcss.org/ ofrecen una buena base de layout y tipografía http://www.blueprintcss.org/tests/parts/elements.html