Anotaciones personales sobre tecnologías y estándares web, diseño, marketing y otros temas geek :)

Todos los elementos HTML tienen un valor por defecto que es interpretado por los navegadores. El problema es cuando esa interpretación no es la misma en cada uno de los navegadores. Esto potencialmente ocurre cuando trabajamos “tableless”, es decir, sin tablas y simplemente usando divs para la distribución y maquetación de los contenidos de una web. (a excepción de colecciones de datos tabulados, para los que si utilizaremos tablas, que es para lo que semánticamente están pensadas).

Dado que el problema viene dado por la diferente interpretación que hacen los navegadores de los valores por defecto de los elementos HMTL, nuestro objetivo será anular esos valores reseteándolos. Para ello, utilizaremos una hoja de estilos base “reset.css”.

Existen dos “reset.css” muy conocidas, utilizadas y por lo tanto muy testeadas que son:

1. reset.css de Yahoo IU
2. reset.css de MeyerWeb (aunque Inicialmente estuvo basada en la de Yahoo IU, ha ido evolucionando logrando una gran aceptación en el mundo CSS, y es la que personalmente me gusta más)

Pongamos un ejemplo de un documento HTML:

<h1>Encabezado de primer ninel</h1>
<h2>Encabezado de segundo ninel</h2>
<h3>Encabezado de tercer ninel</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ante.
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ante.
<ul>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
</ul>
<ol>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
</ol>

A continuación vemos cómo sería interpretado por un navegador sin utilizar ningún reset:

y a continuación, se muestra cómo sería interpertado utilizando una hoja de estilos reset.css

Si nos fijamos, se han perdido todos los valores por defecto por ejemplo:

• El mayor tamaño de letra de los encabezados: h1, h2, h3 … y su mayor grosor (negrita)
• El margen que tienen los elementos H1, H2, H3 … y los párrafos
• El estilo de las listas: no contienen viñetas, ni margen ni relleno (padding)

A partir de este momento, podremos crear una nueva hoja de estilos complementaria, donde definamos el estilo de nuestra web, partiendo desde cero.  A cambio de haber resuelto la mayoría de quebraderos de cabeza por las diferencias entre navegadores, tendremos que preocuparnos de detalles que antes dábamos por hecho y que hemos observado que se han eliminado.