Resetear nuestro CSS es una muy buena práctica debido a que todos los browsers poseen atributos CSS predeterminados, los cuales NO SON iguales en todos los browsers (adivinen cual es el browser que nos dará más dolores de cabeza por este motivo)
Es por ello que es importantísimo al iniciar un proyecto web tener a mano un reseteador de css.
Existen variados sabores, unos más toscos que otros, a continuación describiré las tecnicas más comunes y las mejores prácticas:
la peor forma de resetear el CSS:
* {
padding:0;
margin:0;
}
¿porqué es la peor?
Porque es el reset más limitado. Al utilizar el asterisco (o selector universal), estamos eliminando de todos los tags del html el padding y el margin, esto destroza una gran cantidad de información que es necesaria para el correcto funcionamiento del html, los tags más afectados son las listas y títulos. Para volver a la normalidad, tenemos que redefinir cada uno de los tags de html. Si bien esto iguala los browsers IE, Firefox, Safari y otros, resetear el CSS de esta manera es demasiado limitado. Necesitamos un reset más avanzado.
El reset según Yahoo!
El sistema de reseteo de Yahoo! se trata en una normalización de código un tanto agresiva o como llamé en la presentación del barcamp “un reset devastador”. Los siguientes objetivos son logrados utilizando este código
- Margin y padding a cero
- Elimina estilo visual de las lista (ol, ul, dl)
- Todas las fuentes son seteadas al 100% de base
- Font-weight y Font-Style son normalizados
- Mejor (aunque todavía incompleta) herencia en las fuentes de los formularios
- La reducción de la altura de la línea de interrupción y sub sup.
El problema principal es que elimina la diferenciación entre tags, solo los deja iguales, pero no puedes diferenciar un h1 de un h5 o inclusive de un li
/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.5.1
*/
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,
form,fieldset,legend,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;}
li{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;font-variant:normal;}
/* to preserve line-height and selector appearance */
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
/*to enable resizing for IE*/
input,textarea,select{*font-size:100%;}
/*because legend doesn't inherit in IE */
legend{color:#000;}
La versión de Eric Meyer (actualizado al 15 de enero 2008)
Hasta ahora es uno de los resets de CSS más elegantes que conozco, Eric Meyer y su reset, no eliminan todo el formato, sino que modifica lo necesario para igualar los browsers y se preocupa de normalizar a una gran cantidad de tags y citándolo de alguna forma, “si no lo normalizo, es porque no debería aparecer en el markup”:
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,
b, u, i, center,
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-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
Concluyendo
¿Cual es mi recomendación? Utilicen el CSS de Meyer, es una gran opción. Si bien hay otras no nombradas acá, como la de tripoli por ejemplo (donde la filosofía es agregar todos los tags y resetearlos, incluso los que están desechados), como experiencia propia, puedo dar fe que la alternativa de meyer funciona realmente bien y acaba con todos los problemas del box model de IE
