Blog what I write

Técnicas para resetear CSS

post - - 4 replies -

Los agentes de navegación predeterminan valores diferentes para algunos elementos HTML provocando incompatibilidades y dificultando el “Cross-browser“.

Podemos “resetear” estos valores predeterminados mediante CSS.

Tres buenas técnicas son:

Yahoo’s CSS Reset

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

Eric Meyer Reset CSS

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

Tantek Celik Reset CSS

:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }

Acerca de…

Por cierto, las dos últimas técnicas son propiedad de dos grandes del desarrollo web:
Eric Meyer, conocido autor de varios libros sobre estándares web y CSS.
Tantek Celik, evangelista de los conocidos microformatos y al cual tuve ocasión de ver en Fundamentos Web 2007.

  • lloku

    Me acuerdo que hace pocos meses hablamos de como hacer esto 😛 y de que a mi ninguno de estos métodos me funciono jajaja, tb hay que decir que el CSS original era de locos pero bueno… Realmente puede ser muy útil para apps como la que te comenté, muy bueno el recopilar los tres métodos en una sola fuente, me lo apunto pa un futuro XD

  • Si es verdad, ahora recuerdo…
    No obstante lo de resetear si lo veo muy útil (para proyectos con cierta complejidad gráfica) a parte de la compatibilidad, piensa que te ahorra el repetir atributos-valores (margins, paddings, etc) y con ello optimizas el CSS final.

  • lloku

    La verdad que es un atajo genial que te facilita mucho la tarea, si no puedes estar horas viendo por que un estilo no va como pretendías ;).
    En aquel “proyecto” yo me volví loco para resetear a mano los elementos que podía intuir que se verían afectados en ese código tan “estandar” (leer con tono irónico) que me “enviaba a la web” ese programa tan famoso y usado por millones de personas a diario.
    Aún me pregunto por que no me funcionaron estos códigos para el reseteo y me dan ganas de revisarlo (Pero me da pereza jajaja)

  • Pues el hallazgo sería digno de post.
    Anímate hombre 😉 así no caeremos en el mismo problemas más veces.