CSS Reseter
Este reseter ha sido actualizado, visita la nueva versión.
Tercer artículo influenciado directamente del videocast. 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 <body>, <iframe>, <h1>, <h2>…., <p>, <blockquote>, <fieldset>, <label>, <legend>, etc.
Influencia directa de 3 fuentes: Yahoo UI Reset CSS, Eric Meyer’s Reworked Reset 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.
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 <input> y <textarea> hereden el font-family.
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Finalmente, algo como clearfix que se ha hecho esencial, creo que es el lugar perfecto para dejarlo declarado.
