Eric Meyer actualiza su CSS Reset para adaptarlo a HTML5

Tuesday 4 de January de 2011, 11:42 am 0 Comments

Sin duda alguna, el CSS Reset más utilizado y difundido entre los desarrolladores y diseñadores web es el creado por Eric Meyer, y no sólo por ser el primero de su tipo, si no también por ser uno de los más ligeros y simples de implementar, no por nada es utilizado por varios CSS Frameworks, como el famoso Blueprint.

Luego de casi cuatro años de no modificarlo, Eric acaba de adaptar su CSS Reset para que sea compatible con el cada día más utilizado HTML5. Aquí la nueva versión:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define visible focus styles! 
:focus {
	outline: ?????;
} */
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Según pueden leer en los comentarios embebidos en el código CSS, aún hay ciertos detalles que ajustar, por lo que, si somos estrictos, no deberíamos usarlo en proyectos a nivel producción, sólo para pruebas.

Eric ha mencionado que se apoyó en el HTML5 Doctor Reset para su adaptación, aunque si revisamos bien ambas versiones, hay diferencias relevantes.

Un detalle, si entran al sitio oficial del CSS Reset de Eric Meyer notarán que sigue la versión 1.0, pues sigue siendo la rama estable. Para usar el nuevo CSS Reset para HTML5, pueden entrar al blog de Eric, o bien, usar el código que he puesto arriba (no existe enlace oficial de descarga, por lo que hay que copiar el código y pegarlo manualmente en un archivo de texto vacío).

Y tú, ¿ya usas HTML5 en tus proyectos?

Via WebMonkey.

Share

Post tags