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
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.
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.
10/30/2013 06:46:00 p.m.
Unknown
