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.

Bajar hoja de estilo (.zip)

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

Tip Precoz 4: input type=”search”

Este tip es bastante específico para usuarios del browser Safari; desde su versión 2, Apple incorporó un ‘envoltorio’ que reemplaza los <input /> que tengan como atributo type="search", cambiando el campo de <input /> normal que conocemos, cuadrado con una sombra interior, por el elegante que tiene Apple dentro de su interfaz Mac OSX. Funciona [...]

textos_muy_largos_que_quiebran_nuestro_layout

Son excepciones, pero suceden momentos en que tienes tu layout bien ordenado y estructurado, y por esas cosas de la vida ingresas un texto muy largo (una URL de esas extensas) o en el comentario alguien lo hace, y toda la armonía que tenías en tu diseño se quiebra. No te quita el sueño, pero [...]

Outlinr: a bookmarklet

Outlinr: web inspector para los pobres / web inspector for the poors Selecciona tu idioma / Select your language: English Español EN Frequently on my debugging stage (when I need to solve something within the HTML/CSS markup that is causing some conflict) I use the CSS outline property to contour the HTML elements so as [...]

  1. 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…

    Gabriel Porras
    18 / Octubre / 2007

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

    fearlex
    18 / Octubre / 2007

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

    xmax
    19 / Octubre / 2007

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

    RUDE
    19 / Octubre / 2007

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

    Mañungo
    22 / Octubre / 2007

  6. font-family: inherit;

    No esta soportado por IE6 IE7

    * {margin:0;padding:0}

    Ni esto tampoco

    Danierl G. Blázquez
    12 / Diciembre / 2007

  7. ¿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
    29 / Enero / 2008

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

    josedelaranda
    05 / Abril / 2008

  1. [...] con cada una por separado y se tiene mayor control sobre cada parte. Primero, reseter.css que resetea todas las ...
    » El orden ante todo | CSSLab
  2. [...] a un proyecto en que estoy y del cual han salido otros interesantes artículos anteriores, creé un plugin de ...
    » Íconos para mejor usabilidad | CSSLab
  3. [...] es cuando existen formularios. Creo que es el más difícil, ya que a pesar de tener un buen CSS ...
    CSSLab » Esas botoneras: centrándolas
  4. [...] CSS Reseter de CSS Lab. [...]
    Operación limpieza | DragóndeLuz.com
  5. [...] - bookmarked by 2 members originally found by PaulFamcom on 2008-08-24 CSSLab " CSS Reseter http://www.csslab.cl/2007/10/18/css-reseter/ - ...
    Bookmarks about Reseter
  6. [...] con cada una por separado y se tiene mayor control sobre cada parte. Primero, reseter.css que resetea todas las ...
    Laboratorio CSS - El orden ante todo
  7. [...] Técnica de CSS Reset proposta pelo site CSSLab: [...]
    10 Técnicas para Reset CSS » Pinceladas da Web - Reflexões sobre XHTML, CSS, PHP e WebStandards
  8. [...] CSS Lab CSS Reset [...]
    KRUZ-GRAPHIX » ブラウザの差異をなんとかしたいのです。
  9. [...]  CSSLab: [...]
    Spartan-Code» Blog Archive » 10 Tecnicas para resetear el CSS
  10. [...] Pero si tu proyecto es mayor, utiliza uno más completo. [...]
    CSSLab - Las 10 leyes de Jorge para el diseño y desarrollo web
  11. [...] CSSLab CSS [...]
    10 Técnicas para resetear CSS | CSSBlog ES
  12. [...] 查看:CSSLab CSS代码 [...]
    我想网 » Blog Archive » 一些好用的CSS Reset
  13. [...] Coding liquid layouts for your website can become a major problem due to many factors to be taken into ...
    CSSLab - jQuery browserSizr
  14. [...] Técnica de CSS Reset proposta pelo site CSSLab: [...]
    iConnect » Técnicas para reset CSS
  15. [...] Técnica de CSS Reset proposta pelo site CSSLab: [...]
    Técnicas para reset CSS :: Tutoriais CTDO - Sua Base de Tutoriais Online
  16. [...] CSS lab reseter /* -- CSS Reseter CSSLab � 2007 Basado en: Yahoo UI Reset CSS, Eric Meyer's Reworked ...
    CSS Reset: 15 esempi da usare nei propri progetti.
  17. [...] y (bien) aplicado por los fabricantes de browsers, he mejorado la versión de mi ya fiel CSS Reseter que ...
    CSS Reseter v2 ↝ CSSLab
  18. [...] 5 – CSSLab CSS Reset Técnica proposta pelo site – CSSLab [...]
    Técnicas de Reset CSS | Giluan Souza

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

compartido 16 veces