CSS Reset para HTML5

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.

Estilo por defectos para los campos de formulario en Chrome

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

Acerca de Carlos Benítez

Programador Web y arquitecto Javascript. Fundador de www.etnassoft.com y OpenLibra, la Biblioteca Libre Online
Esta entrada fue publicada en CSS y etiquetada , , . Guarda el enlace permanente. Sígueme en Twitter

Últimos libros gratuitos añadidos a OpenLibra

Solo un marciano comentando!

  1. 21Nov2013/
    20:15 h /

    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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Licencia Creative Commons 3.0

®Copyright 2016. Cotenido web bajo licencia Creative Commons 3.0

Códigos bajo licencias MIT y GPL. Ver página de licencias para más información