bitelemental

La importancia de resetear los valores de las CSS

 12/05/2009

Cuando un diseñador realiza un proyecto web lo habitual y recomendable es probar los resultados en los diferentes navegadores existentes. Pero siempre nos encontramos la sorpresa de que en algunos existen descuadres y no conseguimos el deseado cross-browser (soporte para todos los navegadores).

Esto ocurre porque cuando los navegadores muestran una página web, además de aplicar las hojas de estilo de los diseñadores, siempre se aplican dos hojas de estilo más:

1. Hoja de estilos del navegador: siempre se aplica a todas las páginas web si el diseñador no incluye ninguna. Se utiliza para marcar el estilo inicial por defecto de todos los elementos HTML (tamaños de letra, márgenes…)
2. Hoja de estilos del usuario: relativa a la que aplica el usuario mediante las opciones del navegador (no es muy utilizada, pero existe la posibilidad de cambiar el estilo en el que queramos ver las páginas web utilizando las preferencias del navegador).

Como el orden de preferencia de las hojas de estilo del navegador y del usuario prevalecen sobre la del diseñador, nos encontraremos con los descuadres anteriormente mencionados y nos llevará muchos quebraderos de cabeza el acoplar el estilo de una página a todos los navegadores (mediante tips o trucos).

Para solucionar este problema, el diseñador Eric Meyer desarrolló un sistema de borrado o “reseteo” de los estilos que aplican por defecto los navegadores. El propio Eric recuerda que esta hoja de estilo es el punto de partida en el que cada diseñador debe readaptar su código hasta obtener los resultados esperados.

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

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: "" "";
}

Por último y como punto clave, se recomienda separar las hojas de estilo de reset y la principal de la siguiente forma:

<link rel="stylesheet" href="reset.css" type="text/css" />
<link rel="stylesheet" href="principal.css" type="text/css" />

Categoría(s): CSS, Diseño, Programación
 css, Diseño, reset
  Sin comentarios