Cuando estamos en la fase de diseño de una aplicación o página web, tenemos que contar con que cada navegador aplica una serie de estilos predefinidos a las etiquetas HTML. Estas reglas no son siempre iguales, por lo que suele suceder que algo que hemos maquetado utilizando como referencia un determinado navegador, se ve diferente en otro.
Un claro ejemplo de esto lo tenemos con Chrome y el borde anaranjado que aplica a los campos de un formulario cuando reciben el foco. Mientras que para algunos proyectos podemos permitir estas licencias, hay veces que éstas no encajan con el diseño.
A raíz de estas diferencias, Eric Meyer introdujo en el mundo del diseño y programación web el concepto de «hoja de estilo reset» (Reset Stylesheet). Su idea era elaborar una plantilla base que garantizara que cada navegador, aplicaría las mismas reglas a los elementos de una página.
De este modo, Meyer creó una hoja de estilo que asignaba un ‘valor por defecto’ para todos los elementos existentes: la «Eric Meyer Reset«. Esta plantilla, se ha ido actualizando según aparecían nuevas soluciones en el mercado sirviendo incluso de modelo para que otros muchos autores crearan la suya propia.
Con la llegada del HTML5, la Eric Meyer Reset se ha vuelto a actualizar incluyendo todas aquellas reglas que permiten manejar las nuevas etiquetas. Con esto, también se ha permitido que navegadores antiguos como IE6, sean capaces de interpretar los nuevos bloques asignándoles unos valores por defecto.
Hasta el momento, la mejor alternativa era la CSS Reset de HTML5Doctor, una hoja creada precisamente a partir de la de Eric Meyer donde se habían incluido las reglas necesarias para usarla en entornos HTML5. A partir de ahora contamos ya con la versión oficial de la misma, permitiéndonos también el trabajar de forma eficiente con HTML4.
Para incluirla en nuestros proyectos, basta con hacer la pertinente llamada desde la etiqueta <head> de nuestras páginas antes de incluir cualquier otra hoja:
<link rel="stylesheet" type="text/css" href="css/reset.css" media="all" /> |
Si no queremos introducir más de una hoja de estilo en nuestro proyecto, podemos simplemente copiar las reglas de Meyer e introducirlas al principio de nuestro CSS.
La última versión podemos descargarla directamente desde aquí.
Más Información
YUI 2: CSS Reset. La versión de Yahoo!
YUI 3: CSS Reset. La última CSS Reset de Yahoo!
Jens O. Meiert, Why “Reset” Style Sheets Are Bad
Oye muchas gracias por colocar esta información creo que la hoja de estilos eric meyer es la mejor de todas las opciones que hay.
Además muy buena toda la info que comparten en este sitio ya lo agrego a mis favoritos. Saludos desde Venezuela