CSS Reseter

18/oct/2007 29

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.

Bajar hoja de estilo (.zip)

Comentarios

  1. Gabriel Porras [#]

    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…

  2. fearlex [#]

    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.

  3. xmax [#]

    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.

  4. RUDE [#]

    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.

  5. CSSLab Admin [#]

    @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.

  6. Mañungo [#]

    @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.

  7. » El orden ante todo | CSSLab [#]

    [...] con cada una por separado y se tiene mayor control sobre cada parte. Primero, reseter.css que resetea todas las propiedades CSS conflictivas en todos los browsers. Luego, layout.css controla solamente la estructura de todas las secciones [...]

  8. » Íconos para mejor usabilidad | CSSLab [#]

    [...] a un proyecto en que estoy y del cual han salido otros interesantes artículos anteriores, creé un plugin de jQuery para agregar íconos a los links [...]

  9. Danierl G. Blázquez [#]

    font-family: inherit;

    No esta soportado por IE6 IE7

    * {margin:0;padding:0}

    Ni esto tampoco

  10. IsaacDM [#]

    ¿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

  11. CSSLab Admin [#]

    IsaacDM: tal cual no te tenido problema alguno en todos los navgadores. Salu2.

  12. CSSLab » Esas botoneras: centrándolas [#]

    [...] es cuando existen formularios. Creo que es el más difícil, ya que a pesar de tener un buen CSS reseter a mano que te ayude a setear esas propiedades en todos los browsers, aún así hay [...]

  13. josedelaranda [#]

    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

  14. Operación limpieza | DragóndeLuz.com [#]

    [...] CSS Reseter de CSS Lab. [...]

  15. Bookmarks about Reseter [#]

    [...] – bookmarked by 2 members originally found by PaulFamcom on 2008-08-24 CSSLab " CSS Reseter http://www.csslab.cl/2007/10/18/css-reseter/ – bookmarked by 1 members originally found by [...]

  16. Laboratorio CSS - El orden ante todo [#]

    [...] con cada una por separado y se tiene mayor control sobre cada parte. Primero, reseter.css que resetea todas las propiedades CSS conflictivas en todos los browsers. Luego, layout.css controla solamente la estructura de todas las secciones [...]

  17. 10 Técnicas para Reset CSS » Pinceladas da Web - Reflexões sobre XHTML, CSS, PHP e WebStandards [#]

    [...] Técnica de CSS Reset proposta pelo site CSSLab: [...]

  18. KRUZ-GRAPHIX » ブラウザの差異をなんとかしたいのです。 [#]

    [...] CSS Lab CSS Reset [...]

  19. CSSLab - Las 10 leyes de Jorge para el diseño y desarrollo web [#]

    [...] Pero si tu proyecto es mayor, utiliza uno más completo. [...]

  20. 10 Técnicas para resetear CSS | CSSBlog ES [#]

    [...] CSSLab CSS [...]

  21. 我想网 » Blog Archive » 一些好用的CSS Reset [#]

    [...] 查看:CSSLab CSS代码 [...]

  22. CSSLab - jQuery browserSizr [#]

    [...] Coding liquid layouts for your website can become a major problem due to many factors to be taken into when the user resizes the browser: images that doesn’t fit the width, texts wrapping as not expected, columns breaking… not to mention that working with percentages in CSS is problematic among different browsers. With a fixed layout this should not happen, because you have more control over the structure itself and the box model behaves as you expect if you use a good CSS reseter. [...]

  23. iConnect » Técnicas para reset CSS [#]

    [...] Técnica de CSS Reset proposta pelo site CSSLab: [...]

  24. Técnicas para reset CSS :: Tutoriais CTDO - Sua Base de Tutoriais Online [#]

    [...] Técnica de CSS Reset proposta pelo site CSSLab: [...]

  25. CSS Reset: 15 esempi da usare nei propri progetti. [#]

    [...] CSS lab reseter /* — CSS Reseter CSSLab � 2007 Basado en: Yahoo UI Reset CSS, Eric Meyer's Reworked Reset y experiencias personales — */   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; }   table { border-collapse: separate; border-spacing: 0; }   caption, th, td { text-align: left; font-weight: normal; }   a img, iframe { border: none; }   ol, ul { list-style: none; }   input, textarea, select, button { font-size: 100%; font-family: inherit; }   select { margin: inherit; }   /* Fixes incorrect placement of numbers in ol's in IE6/7 */ ol { margin-left:2em; }     /* ========================================= clearfix == */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }   .clearfix {display: inline-block;}   * html .clearfix {height: 1%;} .clearfix {display: block;} [...]

  26. CSS Reseter v2 ↝ CSSLab [#]

    [...] y (bien) aplicado por los fabricantes de browsers, he mejorado la versión de mi ya fiel CSS Reseter que tanto me ha ayudado en innumerables [...]

  27. Técnicas de Reset CSS | Giluan Souza [#]

    [...] 5 – CSSLab CSS Reset Técnica proposta pelo site – CSSLab [...]

  28. Review 1: Origo CSS ↝ CSSLab [#]

    [...] a Blueprint o Yahoo! UI. Para mí, sólo han servido para poder compactar mi propio CSS Reseter, nada más, ya que prefiero mantener mis columnas y estructuras lo más personalizadas [...]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab