Tecnología y Coaching para Emprendedores

Recopilación de los Mejores CSS Resets

css

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, <a href="http://www.esandra.com/out/audio" title="Audiojungle" class="pretty-link-keyword" target="_blank">audio</a>, 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: &quot;&quot; &quot;&quot;;
}

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 &amp; 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 */


Comentarios

  • 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

      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.

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

  • Enyelber Altube

    Hola, ya tengo dos días leyendo tus articulos y mucho lo que he aprendido, pero me gustaria saber donde puedo encontrar un tutorial de CSS3 para principiantes… me gustaria comenzar de esta manera ya que estoy haciendo paginas y uso los CSS pero veindo como lo hacen otros y es mas dificil parender así. Saludos

    • Sandra

      Yo es que utilizo bibliografía en inglés, por lo que no te puedo decir..