8 Métodos Utilizados de CSS Reset

Los elementos (X)HTML o etiquetas tienen estilos definidos por los navegadores y esto dificulta un poco las cosas, ya que hay navegadores que muestran un H1 con un font-size y un margin muy diferente a otros y así sucesivamente. Para evitar esto y hacer que nuestras páginas se vean igual de bien en todos los navegadores, para ello debemos usar lo que se conoce como CSS Reset o Resetear las hojas de Estilo, que no es mas que darle un estilo por defecto a todos los elementos y estos se visualicen bien en todos los navegadores.

Actualmente hay muchos métodos empleados para resetear las hojas de estilos, pero aquí voy a mostrar a lo que a mi parecer son los mas comunes (métodos no el autor).

1. Reset Generico

Consiste en aplicarle tres propiedas comunes que toman los elementos y resetearla a 0.

* {
    padding: 0;
    margin: 0;
    border: 0;
}

2. Reset Universal

Este metodo lo utilizaba en la web un tiempo atras.

* {
    vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
}

3. Reset de Ateneu

Un buen artículo que trata de como resetear tu CSS y llevar todos los estilos a cero, parte de un tutorial llamado Maestro CSS: Destripando estilos.

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;}
a, a:link, a:visited, a:hover, a:active { text-decoration: none }
table { border-collapse: separate; border-spacing: 0; }
th, td { text-align: left; font-weight: normal; }
img, iframe { border: none; text-decoration: none; }
ol, ul { list-style: none; }
input, textarea, select, button { font-size: 100%; font-family: inherit; }
select { margin: inherit; }
hr { margin: 0; padding: 0; border: 0; color: #000; background-color: #000; height: 1px }

4. Reset de Chris Poteet

/*
Reset Default Browser Styles
- Place first in the listing of external style sheets for cascading.
- Be sure to explicitly set margin/padding styles.
- Styles are not reset that have to do with display (block, inline) are not reset.

By: Chris Poteet & various influences
*/
 
* {
    vertical-align: baseline;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: none;
    padding: 0;
    margin: 0;
}
body {
    padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
    margin: 20px 0;
}
li, dd, blockquote {
    margin-left: 40px;
}
dt {
    font-weight: bold;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

5. Reset de Eric Meyer

Uno de los CSS Reset mas populares es el de Eric.

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;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

6. Reset de Yahoo

Yahoo ofrece su método para resetear los estilos con el framwork YUI.

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, textarea, p, blockquote, th, td {
    padding: 0;
    margin: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset, img {
    border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
    font-weight: normal;
    font-style: normal;
}
ol, ul {
    list-style: none;
}
caption, th {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-size: 100%;
}
q:before, q:after {
    content:'';
}
abbr, acronym {
    border: 0;
}

7. Reset de Tantek Celik

:link, :visited { text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6, pre, code { font-size: 1em; }
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
    margin: 0;
    padding: 0;
}
a img, :link img, :visited img { border: none; }
address { font-style: normal; }

8. Normalize de Nicolas Gallagher

Este es mi favorito y el cual uso actualmente en la web. Es una alternativa a los Reset, porque los resets imponen sus estilos visuales sobre los estilos por defecto para casi todos los elementos y normalize no. Es como dice en su documentación, normalize persigue:

  • Preservar valores por defecto útiles del navegador en lugar de borrarlos.
  • Normalizar los estilos de una amplia gama de elementos HTML.
  • Correjir los errores e inconsistencias comunes del navegador.
  • Mejorar la usabilidad con mejoras sutiles.
  • Explicar el código mediante comentarios y documentación detallada.

Para una mejor comprensión y lectura del código he quitado los comentarios de las secciones.

/*! normalize.css v2.0.1 | MIT License | git.io/normalize */

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

audio,
canvas,
video {
    display: inline-block;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden] {
    display: none;
}

html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
}

a:focus {
    outline: thin dotted;
}

a:active,
a:hover {
    outline: 0;
}

h1 {
    font-size: 2em;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

mark {
    background: #ff0;
    color: #000;
}

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 0;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}

button,
input {
    line-height: normal;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled],
input[disabled] {
    cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
    vertical-align: top;
}

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

Normalize está en dos versiones v1 u v2.

Demotraciones

Siempre que buscamos un CSS Reset, nunca podemos visualizar de manera rápida como quedaría todo si aplicáramos los estilos, pues aquí he elaborado una lista con cada uno de los CSS Reset para ver a detalle como se visualizaría todo en caso de usarlo.

Ver Demo

Uso

La mejor forma de incorporar los CSS Reset a nuestras páginas es haciendo un import.

@import "css/reset.css";

/* aquí tus estilos */

En mi caso utilizo LESS para compilar a CSS y tengo una estructura para incorporar los archivos a uno global.

@import "normalize";

/* ó */
@import "normalize.less";

Y compilar todo a un solo archivo global.less. En LESS no hay que especificar la extensión del archivo.

Mas Lecturas Interesantes

Esto no acaba aquí, Jeff Starr en 2007 publicó en su blog una lista inmensa de los metodos mas comunes para usar los CSS Reset, en un artículo llamado Killer Collection of CSS Resets.

Recomendado
  • Danny Feliz

    Normalize es la leche