Publicado:

12345678910111213141516171819202122232425262728293031
Ene Feb Mar Abr May Jun Jul Ago Sep Oct Nov Dic
200520062007200820092010201120122013

Comentarios:

0 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520
☺ Si te gusta el contenido de este sitio, puedes aportar para seguir desarrollando y compartiendo.
☺

Categorías

Tags

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

Estilos alternados con CSS3, jQuery y Mootools

13/02/2012

3

Este será un artículo corto y preciso: cómo alternar estilos dentro de un mismo elemento utilizando 3 técnicas diferentes. Con el siguiente HTML de ejemplo: <ul> <li>Elemento Uno</li> <li>Elemento Dos</li> <li>Elemento Tres</li> <li>Elemento Cuatro</li> <li>Elemento Cinco</li> </ul> CSS3 Comencemos con la más vanguardista: con CSS3, a cada elemento impar (odd) agrégale el estilo definido: ul [...]

➜

Centrando texto verticalmente

19/03/2008

10

Una vez más vengo con una técnica que de tan simple dan ganas de llorar por no habérsenos ocurrido antes. Lo que mostraré ahora, es cómo lograr centrar verticalmente un texto a través de su contenedor. Esta es la clave, ya que se suele pensar que el texto mismo es el que debe tener la [...]

➜

Review 1: Origo CSS

28/01/2008

8

Siempre me ha gustado tener el control sobre el código que genero; por lo mismo me gusta escribirlo a mano y no dependo de editores parafernálicos, u otros distractores. Durante el año pasado, ha surgido el concepto de CSS Framework, lo cual considero imposible cuando se trata de un lenguaje que no es programable (CSS [...]

➜

10

Comentarios

  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

17

Trackbacks

  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

Tu aporte

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

Cargando