Recopilación de los Mejores CSS Resets

Por Sandra Guerrero Sanmarti | Publicado: 13/04/2011

El objetivo de las hojas de estilo en cascada conocidas como CSS Resets es evitar las diferencias visuales que se dan al mostrar una misma página web en diferentes navegadores, lo que es fruto de que cada navegador implementa su hoja de estilos propia e interna.

Uno de los más famosos CSS Resets es el de Eric Meyer. Los CSS Resets muchas veces se encuentran incluidos dentro de CSS frameworks, por ejemplo el de Eric Meyer se encuentra incluido en Blueprint. En este artículo encontrarás una recopilación de los mejores CSS Resets disponibles hasta el momento, tanto para xHTML como para HTML5

CSS Reset de Eric Meyer

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
        border-collapse: collapse;
    border-spacing: 0;
}

 

undohtml.css de Tantek Çelik

/* undohtml.css */
/* (c) Tantek Çelik. Algunos derechos reservados. http://tantek.com */
/* Licencia bajo la  Creative Commons License.      */


:link, :visited, ins {
        text-decoration:none
}

nav ul, nav ol {
        list-style:none
}

h1, h2, h3, h4, h5, h6, pre, code, kbd {
        font-size:1em;
}

dl, ul, ol, li,  h1, h2 ,h3, h4, h5, h6, html, body,
pre, p, blockquote, form, fieldset, input, label {
        margin:0; padding:0
}

abbr, img, object, a img, :link img,  :visited img,
a object, :link object, :visited object {
        border:0
}

address, abbr {
        font-style:normal
}

iframe:not(.auto-link) {
        display:none ! important;
        visibility:hidden ! important;
        margin-left: -10000px ! important
}

CSS Reset de Shaun Inman

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form,
fieldset, input, p, blockquote, table, th, td, embed, object {
        padding: 0; margin: 0;
}

table {
        border-collapse: collapse;
        border-spacing: 0;
}

fieldset, img, abbr {
        border: 0;
}

address, caption, cite, code, dfn, em,
h1, h2, h3, h4, h5, h6, strong, th, var {
        font-weight: normal;
        font-style: normal;
}

ul {
        list-style: none;
}

caption, th {
        text-align: left;
}

h1, h2, h3, h4, h5, h6 {
        font-size: 1.0em;
}

q:before, q:after {
        content: '';
}

a, ins {
        text-decoration: none;
}

 

CSS Reset Tripoli

* {
        margin: 0;
        padding: 0;
        text-decoration: none;
        font-size: 1em;
        outline: none;
}

code, kbd, samp, pre, tt, var, textarea, input,
select, isindex, listing, xmp, plaintext {
         font: inherit;
         font-size: 1em;
        white-space: normal;
}

dfn, i, cite, var, address, em {
        font-style: normal;
}

th, b, strong, h1, h2, h3, h4, h5, h6 {
        font-weight: normal;
}

a, img, a img, iframe, form, fieldset, abbr,
acronym, object, applet, table {
        border: none;
}

table {
        border-collapse: collapse;
        border-spacing: 0;
}

caption, th, td, center {
        text-align: left;
        vertical-align: top;
}

body {
        line-height: 1;
        background: white;
        color: black;
}

q {
        quotes: "" "";
}

ul, ol, dir, menu {
        list-style: none;
}

sub, sup {
        vertical-align: baseline;
}

a {
        color: inherit;
}

hr {
        display: none;
}

font {
        font: inherit !important;
        color: inherit !important;}

marquee {
        overflow: inherit !important;
        -moz-binding: none;
}

blink {
        text-decoration: none;
}

nobr {
        white-space: normal;
}

 

Simple Reset de Russ Weakley

html, body, ul, ol, li, form, fieldset, legend
{
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6, p { margin-top: 0; }

fieldset,img { border: 0; }

legend { color: #000; }

li { list-style: none; }

sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

table
{
    border-collapse: collapse;
    border-spacing: 0;
}

caption, th, td
{
    text-align: left;
    vertical-align: top;
    font-weight: normal;
}

input, textarea, select
{
    font-size: 110%;
    line-height: 1.1;
}

abbr, acronym
{
        border-bottom: .1em dotted;
    cursor: help;
}

 

HTML5Reset

/*
html5doctor.com Reset Stylesheet v1.6.1
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
        margin:0;
        padding:0;
        border:0;
        outline:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
}

body {
        line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
        display:block;
}

nav ul {
        list-style:none;
}

blockquote, q {
        quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
        content:'';
        content:none;
}

a {
        margin:0;
        padding:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
}
/* cambia el color según tus necesidades */
ins {
        background-color:#ff9;
        color:#000;
        text-decoration:none;
}

/* cambia el color según tus necesidades */
mark {
        background-color:#ff9;
        color:#000;
        font-style:italic;
        font-weight:bold;
}

del {
        text-decoration: line-through;
}

abbr[title], dfn[title] {
        border-bottom:1px dotted;
        cursor:help;
}

table {
        border-collapse:collapse;
        border-spacing:0;
}

/* cambia el color según tus necesidades */
hr {
        display:block;
        height:1px;
        border:0;
        border-top:1px solid #cccccc;
        margin:1em 0;
        padding:0;
}

input, select {
        vertical-align:middle;
}

 

CSS Reset HTML5 Boilerplate

/*
        html5doctor.com Reset Stylesheet
        (Eric Meyer's Reset Reloaded + HTML5 baseline)
        v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
       html5doctor.com/html-5-reset-stylesheet/
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
        margin:0;
        padding:0;
        border:0;
        outline:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
}                  

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
          display:block;
}

nav ul {
        list-style:none;
}

blockquote, q {
        quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
        content:'';
        content:none;
}

a {        
        margin:0;
        padding:0;
        font-size:100%;
        vertical-align:baseline;
       background:transparent; }

ins {
        background-color:#ff9;
        color:#000;
        text-decoration:none;
}

mark {
        background-color:#ff9;
        color:#000;
        font-style:italic;
        font-weight:bold;
}

del {
        text-decoration: line-through;
}

abbr[title], dfn[title] {
        border-bottom:1px dotted;
        cursor:help;
}

table {
        border-collapse:collapse;
        border-spacing:0;
}

hr {
        display:block;
        height:1px;
        border:0;
        border-top:1px solid #ccc;
        margin:1em 0;
        padding:0;
}

input, select {
        vertical-align:middle;
}

/* END RESET CSS */

Si te ha gustado este artículo, compártelo en las redes sociales. ¡Suscríbete a nuestro feed RSS!

Artículos Relacionados:

Esta entrada fue publicada en Código CSS y clasificada en recursos desarrollo web. Guarda el enlace permanente. Publica un comentario o deja un trackback: URL del Trackback.
  • http://www.twitter.com/lgruz lgruz

    Más de tres años tratando con CSS, y desconocía por completo este “truco”. Sin duda genial. Estoy deseando utilizarlo en algunos diseños que dan pequeños problemas con determinados navegadores. ¡Gracias!

    • Sandra Guerrero Sanmartí

      Hola Luis, pues sí, utilizar CSS Resets es fundamental y te facilitan mucho la vida. Yo los utilizo siempre para asegurarme que mis diseños se ven igual en todos los navegadores. Yo ahora codifico mis diseños con HTML5 y utilizo el HTML5 Boilerplate, que me parece muy bueno.

    • http://www.twitter.com/lgruz lgruz

      Aún me quedan entonces muchas más cosas por aprender de las que pensaba. Espero encontrarme con más gente como tú dispuesta a compartir sus recursos para lograr facilitarnos la vida a mucho que, como yo, estamos aún muy verdes respecto a auténticos expertos.
      Sin duda, le echaré un buen vistazo a HTML5 Boilerplate. No había oído hablar de él, pero me parece muy útil. Gracias de nuevo.

    • Sandra Guerrero Sanmartí

      Pues sí, Luis, mi intención es aportar artículos de valor en el área de diseño web. Si hay algún tema que te gustaría que tratara en el blog, sólo tienes que decírmelo y procuraré escribir un artículo al respeto. Estoy contenta de que mi blog te sea útil y te aporte contenidos de valor.
      Si te interesa HTML5 Boilerplate, te puedes descargar un pack completo con los archivos necesarios para hacer que tu código se vea bien en navegadores que no soportan HTML5. El link es http://html5boilerplate.com/

Ruffy, la mascota de CreativaSfera
Más en Código CSS (13 de 15 artículos)
css3