El CSS Reset es una práctica de diseño que trata de solventar la divergencia en la presentación de páginas web que hay entre diferentes navegadores. Aunque hay un estándar cada fabricante de navegador puede definir valores distintos a algunas de estas propiedades CSS. Esta inconsistencia provoca que una página web se vea distinta entre navegadores.
Para evitar esto, antes de añadir nuestro diseño se ponen a un valor inicial las propiedades css, para comenzar el diseño desde una base común.
Uno de los códigos más usados es el de Eric Meyer que podemos ver en el siguiente fragmento de código:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
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: "" ""; } |
La idea del css reset es un interesante tema de debate entre abundantes posturas, incluso entre aquellos que están completamente en contra de usar esta práctica.