2.1. Inicializar los estilos
Cuando los navegadores muestran una página web, además de aplicar las hojas de estilo de los diseñadores, siempre aplican otras dos hojas de estilos: la del navegador y la del usuario.
La hoja de estilos del navegador se utiliza para establecer el estilo inicial por defecto a todos los elementos HTML: tamaños de letra, decoración del texto, márgenes, etc. Esta hoja de estilos siempre se aplica a todas las páginas web, por lo que cuando una página no incluye ninguna hoja de estilos propia, el aspecto con el que se muestra en el navegador se debe a esta hoja de estilos del navegador.
Por su parte, la hoja de estilos del usuario es la que puede aplicar el usuario mediante su navegador. Aunque la inmensa mayoría de usuarios no utiliza esta característica, en teoría es posible que los usuarios establezcan el tipo de letra, color y tamaño de los textos y cualquier otra propiedad CSS de los elementos de la página que muestra el navegador.
El orden en el que se aplican las hojas de estilo es el siguiente:
Figura 2.1 Orden en el que se aplican las diferentes hojas de estilos
Por tanto, las reglas que menos prioridad tienen son las del CSS de los navegadores, ya que son las primeras que se aplican. A continuación se aplican las reglas definidas por los usuarios y por último se aplican las reglas CSS definidas por el diseñador, que por tanto son las que más prioridad tienen.
Nota CSS define la palabra reservada !important para controlar la prioridad de las declaraciones de las diferentes hojas de estilos. Las reglas CSS que incluyen la palabra !important tienen prioridad sobre el resto de las reglas CSS, independientemente del orden en el que se incluyan o definan las reglas.
En caso de igualdad, las reglas !important de los usuarios son más importantes que las reglas !important del diseñador. Gracias a esta característica, si un usuario sufre deficiencias visuales, puede crear una hoja de estilos CSS con reglas de tipo !important con la seguridad de que el navegador siempre aplicará esas reglas por encima de cualquier otra regla definida por los diseñadores.
El principal problema de las hojas de estilo de los navegadores es que los valores que aplican por defecto son diferentes en cada navegador. Aunque todos los navegadores coinciden en algunos valores importantes (tipo de letra serif, color de letra negro, etc.) presentan diferencias en valores tan importantes como los márgenes verticales (margin-bottom y margin-top) de los títulos de sección (<h1>, ... <h6>), la tabulación izquierda de los elementos de las listas (margin-left o padding-left según el navegador) y el tamaño de línea del texto (line-height).
A continuación se muestra el código HTML de una página de ejemplo y seguidamente, una imagen que muestra cómo la visualizan los navegadores Internet Explorer y Firefox:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reset</title>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<h2>Consectetuer adipiscing elit</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit</p>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<table summary="Lorem Ipsum">
<caption>Lorem Ipsum</caption>
<tr>
<th>Celda 1-1</th>
<th>Celda 1-2</th>
</tr>
<tr>
<td>Celda 2-1</td>
<td>Celda 2-2</td>
</tr>
</table>
</body>
</html>
Figura 2.2 Visualización de una misma página en los navegadores Internet Explorer y Firefox
Como todas las hojas de estilo de los navegadores son diferentes, cuando un diseñador prueba sus estilos sobre diferentes navegadores, es común encontrarse con diferencias visuales apreciables. La solución a este problema es muy sencilla y consiste en borrar o resetear los estilos que aplican por defecto los navegadores.
Una de las formas más sencillas de neutralizar algunos de los estilos de los navegadores consiste en eliminar el margen y relleno a todos los elementos de la página para establecerlos posteriormente de forma individual:
* {
margin: 0;
padding: 0;
}Aunque la regla CSS anterior se ha utilizado desde hace muchos años, se trata de una solución muy rudimentaria y limitada. La solución completa consiste en crear una hoja de estilos CSS que neutralice todos los estilos que aplican por defecto los navegadores y que pueden afectar al aspecto visual de las páginas. Este tipo de hojas de estilos se suelen llamar "reset CSS".
A continuación se muestra la hoja de estilos reset.css propuesta por el diseñador Eric Meyer:
/* v1.0 | 20080212 */
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,
b, u, i, center,
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-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* No olvides definir estilos para focus */
:focus {
outline: 0;
}
/* No olvides resaltar de alguna manera el texto insertado/borrado */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* En el código HTML es necesario añadir cellspacing="0" */
table {
border-collapse: collapse;
border-spacing: 0;
}El propio Eric Meyer recuerda que la hoja de estilos anterior es sólo un punto de partida que debe ser adaptado por cada diseñador hasta obtener los resultados deseados. Utilizar una hoja de estilos de tipo reset es una de las buenas prácticas imprescindibles para los diseñadores web profesionales.