Juanma Guerrero - Web Designer & Developer

CSS Mini Reset: una hoja de reseteo de estilos en miniatura

Es común agregar al principio de nuestro CSS ciertas expresiones que “reseteen” los estilos que cada navegador trae por defecto. Así, no tendremos que preocuparnos por cómo Firefox se diferencia de IE o Chrome al renderizar una página.

Pero también es cierto que a veces se les va un poco la mano a los que crean hojas de estilo de reseteo, dado que no usaremos tooodas las funcionalidades que proveen y nos ocupan espacio y agregan peso de más a nuestro archivo. Para evitar esto aquí te muestro unos “mini estilos CSS de reseteo”.

Los estilos CSS de reseteo más utilizados son:

• Los de Eric Meyer
• Los de Yahoo! User Interface

Después contamos con otros varios estilos de reseteo para elegir además de los mencionados.

La semana pasada Russ Weakley publicó “CSS Reset – a simpler option”, señalando que casi nunca usamos todos los tags HTML que se incluyen en la hoja de reseteo de Eric Meyer, por ejemplo. “¿Cuándo fue la última vez que usaron el tag <address>?” dijo.

Lo que hizo entonces fue crear una serie de expresiones de reseteo simplificada, con estilos para los elementos más utilizados en el HTML, como formularios, tablas, titulares e imágenes principalmente:

/* ----------------------------
reseteo simple
---------------------------- */

html, body, ul, ol, li, form, fieldset, legend
{
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6, p { margin-top: 0; }

fieldset,img { border: 0; }

legend { color: #000; }

li { list-style: none; }

sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

table
{
	border-collapse: collapse;
	border-spacing: 0;
}

caption, th, td
{
	text-align: left;
	vertical-align: top;
	font-weight: normal;
}

input, textarea, select
{
	font-size: 110%;
	line-height: 1.1;
}

abbr, acronym
{
	border-bottom: .1em dotted;
	cursor: help;
}

Clic aquí para descargar CSS Mini Reset desde github

¿Tienes tu propia fórmula? ¡Compártela aquí!

Por Juanma Guerrero el 19 de Mayo de 2010

Compartir en:
• 
• 
• 
• 
• 
•