CSS Reseter
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.
Perdona… ¿Qué ventajas tiene este reseteador con respecto al de yahoo, al de eric meyer o el resto de reseteadores que hay?
Ya hay tantos que los que no saben como mucho ya ni saben cuál escoger…
Saludos y gracias…
Yo estoy acostumbrado a usar el metodo mas corto:
*
{
margin:0;
padding:0;
}
pero de vez en cuando, al igual que tu uso un reseteador como este, pero si, para proyectos que tienen mucho contenido/páginas.
Todo es por algo fearlex, todos harían lo mismo si fuera buena idea, pero no lo es, en la etiqueta form y algunos otros se producen estragos irreparables. Concuerdo con éste ejemplo y lo tomaré en cuenta de hoy en adelante.
Recuerda que este pseudo-selector:
:focus {
outline: 0;
}
Te puede traer problemas (incluso legales), dado que eliminas de un plumazo la posibilidad de navegar sólo con el teclado. Por temas de accesibilidad te aconsejo que lo elimines, o que al menos aparezca comentado por si alguien desea usarlo.
@Gabriel: no tiene desventajas ni ventajas, llo que me interesa es que no se anclen con uno q les imponen (como el q muestro) sino q tengan la capacidad de analizarlo y modificarlo segun sus necesidades. o haganse el propio. @fearlex: ese metodo es mi favorito aun, pero para sitios grandes no hay caso… lo mejor es un css-reseter. @rude: la intencion no es eliminar :focus, sino resetearla para que cada uno pueda darle el estilo que quiera. lo mismo fue hecho con todas las otras propiedades HTML. saludos a todos y gracias por sus comentarios.
@RUDE: el outline de Firefox no es la única solución al problema… podrías mirar, por ejemplo, como lo soluciona Opera.
Y, de hecho, el outline de Firefox tiene bugs de implementación. Mucho tiempo estuve lidiando con links dentro de un iframe que al ser clickeados hacian aparecer las barras de scroll!!!! Era un desastre.
font-family: inherit;
No esta soportado por IE6 IE7
* {margin:0;padding:0}
Ni esto tampoco
¿El clearfix de tu archivo se usa asi para todos los navegadores? o sea que si no hay hacks ó diagonales y asteriscos para hacerlo funcionar por ejemplo en IE6-7
IsaacDM: tal cual no te tenido problema alguno en todos los navgadores. Salu2.
Yo he usado en varios proyectos la hoja de estilo de Eric Meyer y me ha ido muy bien, claro que le hice algunas modificaciones, pero en general no tuve problemas.
Saludos