CSS Reseter
Este reseter ha sido actualizado, visita la nueva versión.
Tercer artículo influenciado directamente del [videocast][1]. En esta ocasión, les presento una hoja de estilos que utilizo para proyectos de gran envergadura (cuando con más de 40 páginas y no son alimentadas a mano, sino mediante un CMS). Se trata de un CSS Reseter, una serie de propiedades CSS que resetean las propiedades a su estado original. Conocido por todos es que por defecto los browsers tienen algunas diferencias de estilos en ciertas etiquetas HTML, principalmente , , , …., , , , , , etc.
Influencia directa de 3 fuentes: [Yahoo UI Reset CSS][2], [Eric Meyer’s Reworked Reset][3] y mi experiencia personal para ir adaptándola a mis necesidades.
Esta hoja de estilos no es para nada de corta, por lo que comentar cada estilo sería eterno. Me gustaría sí mencionar elementos importantes a considerar:
:focus {
outline: 0;
}
Esto ya lo había mencionado en el artículo [El contorno de la discordia][4].
a img, iframe {
border: none;
}
Las imágenes linkeadas en algunos browsers suelen tener el borde heredado de la propiedad del link. Aquí, lo anulamos definitivamente.
input, textarea, select, button {
font-size: 100%;
font-family: inherit;
}
Esta hoja se hizo esencial para diagramar formularios, donde la diferencia de estilos entre browsers es crítico. Ahora, se hizo bastante más fácil adaptarlos a todos. En este caso, vemos que obligamos que y hereden el font-family.
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Finalmente, algo como [clearfix][5] que se ha hecho esencial, creo que es el lugar perfecto para dejarlo declarado.
[Bajar hoja de estilo (.zip)][6]{.verejemplo}
[1]: http://www.csslab.cl/2007/10/03/videocast-1-layout-compuesto/ “Enlace al artículo en CSSLab “Videocast 1: layout compuesto”” [2]: http://developer.yahoo.com/yui/reset/#code “Enlace externo a “YUI Reset CSS”” [3]: http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/ “Enlace externo a “Reworked Reset”” [4]: http://www.csslab.cl/2007/05/28/el-contorno-de-la-discordia/ “Enlace en CSSLab “El contorno de la discordia”” [5]: http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/ “Enlace en CSSLab “Flotando en la incertidumbre "” [6]: http://www.csslab.cl/downloads/CSS+Reseter “Enlace para bajar CSS Reseter”