lunes, 23 de julio de 2012

Hojas de estilo de reseteo. Reset CSS

Una técnica en el diseño de páginas Web cross-browser es el uso de hojas de estilo de reseteo o reset CSS. Un problema que nos encontramos a la hora de diseñar una Web, es que cada navegador aplica unos valores por defecto a cada uno de los elementos HTML.

Por normal general, los navegadores aplican los mismos estilos a los elementos HTML como el background en blanco, el color de la letra en negro, el tipo de letra serif, etc. Pero algunos valores como los márgenes, el padding o el alto de línea line-height difieren de un navegador a otro. Para solventar este problema lo que hacemos es borrar o resetear los estilos que los navegadores aplican por defecto. Un reseteo genérico de todos los elementos HTML sería:

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

Esta es un solución sencilla y rápida, pero podemos crearnos nuestra propia hoja de estilos de reseteo mas eficiente reseteando los estilos necesarios. Podemos encontrar muchos ejemplos de hojas de estilo de reseteo como, por ejemplo, la propuesta por el diseñador 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;
}

No hay comentarios :

Publicar un comentario