La mayoría de sitios web disponen de una o varias hojas de estilos CSS que se aplican automáticamente al cargar cada página en el navegador. En realidad, el estándar HTML/XHTML permite definir varias hojas de estilos CSS alternativas en una misma página.
De esta forma, el usuario puede seleccionar el estilo con el que se muestra la página entre una serie de estilos definidos por el diseñador web. En ocasiones los estilos alternativos se emplean por pura estética, por ejemplo para ofrecer temas y esquemas de colores diferentes en un sitio web. Sin embargo, el uso más adecuado de los estilos alternativos es la mejora de la accesibilidad ofreciendo hojas de estilos que faciliten el acceso a los contenidos para las personas discapacitadas.
Las hojas de estilos CSS que se enlazan en una página HTML mediante la etiqueta <link> pueden ser de tres tipos:
- Permanentes ("persistent"): las hojas de estilos que se aplican siempre.
- Preferentes ("preferred"): las hojas de estilos alternativas que se aplican por defecto.
- Alternativas ("alternate"): las hojas de estilos alternativas que el usuario puede seleccionar.
Las hojas de estilos permanentes se aplican siempre independientemente del resto de hojas de estilos definidas o de la hoja de estilo alternativa utilizada por el usuario. Para indicar que una hoja de estilos CSS es permanente, se utiliza el atributo rel="stylesheet" y no se establece el atributo title en la etiqueta <link>:
<link rel="stylesheet" type="text/css" href="css/estilos.css" />
<link rel="stylesheet" type="text/css" href="css/otros_estilos.css" />En el ejemplo anterior, las dos hojas de estilos CSS se aplican siempre independientemente del medio y de otras posibles hojas de estilos definidas por la página.
Las hojas de estilos preferentes son las hojas de estilos alternativas que se aplican por defecto. Por lo tanto, si el usuario no selecciona explícitamente otra CSS alternativa, en la página también se aplican las hojas de estilos preferentes. Para indicar que una hoja de estilos CSS es preferente, se utiliza el atributo rel="stylesheet" y se establece el atributo title en la etiqueta <link>:
<link rel="stylesheet" title="Estilo alternativo" type="text/css" href="css/estilos.css" />La hoja de estilos enlazada en el ejemplo anterior se aplica en la página siempre que el usuario no seleccione otra hoja de estilos alternativa. El estándar HTML/XHTML permite crear grupos de hojas de estilos preferentes. Si dos o más hojas de estilos enlazadas tienen el mismo título, el navegador considera que forman parte de un grupo y las aplica de forma conjunta:
<link rel="stylesheet" title="Estilo alternativo" type="text/css" href="css/estilos1.css" />
<link rel="stylesheet" title="Estilo alternativo" type="text/css" href="css/estilos2.css" />Las etiquetas <link> del ejemplo anterior enlazan dos hojas de estilos diferentes con el mismo valor en su atributo title, por lo que el navegador considera que forman un grupo. Como se trata de hojas de estilos preferentes (porque tienen un atributo rel="stylesheet" y un atributo title no vacío) el navegador aplica todas las hojas de estilos del grupo a no ser que el usuario seleccione explícitamente otra hoja de estilos alternativa.
El siguiente ejemplo incluye hojas de estilos permanentes y preferentes:
<link rel="stylesheet" type="text/css" href="css/estilos1.css" />
<link rel="stylesheet" type="text/css" href="css/estilos2.css" />
<link rel="stylesheet" title="Estilo alternativo" type="text/css" href="css/estilos3.css" />
<link rel="stylesheet" title="Estilo alternativo" type="text/css" href="css/estilos4.css" />Las dos primeras hojas de estilos del ejemplo anterior son de tipo permanente, por lo que el navegador las aplica siempre. Las otras dos hojas de estilos son de tipo preferente, por lo que el navegador también las aplica a menos que el usuario seleccione otras hojas de estilo alternativas.
El último tipo de hojas de estilos son las alternativas, que sólo se aplican si el usuario las selecciona explícitamente. Para indicar que una hoja de estilos CSS es alternativa, se utiliza el atributo rel="alternate stylesheet" y se establece el atributo title en la etiqueta <link>:
<link rel="alternate stylesheet" title="Estilo alternativo" type="text/css" href="css/estilos.css" />La hoja de estilos del ejemplo anterior no se aplica en la página a menos que el usuario la seleccione entre todas las hojas de estilos alternativas. Esta característica no está disponible en todos los navegadores, por lo que los diseñadores no deben suponer que el usuario podrá utilizarla.
En los navegadores como Firefox y Opera, cuando una página dispone de varias hojas de estilos alternativas, el usuario puede acceder a todas ellas y seleccionar la que desee a través del menú Ver > Estilo o Ver > Estilo de página.
Si se considera una página HTML que enlaza las siete hojas de estilos siguientes:
<link rel="stylesheet" type="text/css" href="css/estilos1.css" />
<link rel="stylesheet" type="text/css" href="css/estilos2.css" />
<link rel="stylesheet" title="Estilo alternativo 1" type="text/css" href="css/estilos3.css" />
<link rel="stylesheet" title="Estilo alternativo 1" type="text/css" href="css/estilos4.css" />
<link rel="stylesheet" title="Estilo alternativo 2" type="text/css" href="css/estilos5.css" />
<link rel="stylesheet" title="Estilo alternativo 2" type="text/css" href="css/estilos6.css" />
<link rel="stylesheet" title="Estilo alternativo 3" type="text/css" href="css/estilos7.css" />Inicialmente, las hojas de estilos que se aplican en la página son:
- Las dos primeras hojas de estilos (
estilos1.cssyestilos2.css) por ser de tipo permanente y que por tanto, se aplican bajo cualquier circunstancia. - Las dos siguientes hojas de estilos (
estilos3.cssyestilos4.css) por ser de tipo preferente y que por tanto, se aplican siempre que el usuario no seleccione explícitamente otro tipo de hoja de estilos alternativa.
Si el usuario utiliza un navegador avanzado (Firefox, Opera) y pulsa sobre el menú Ver > Estilo, se muestran las siguientes opciones:
Estilo alternativo 1, seleccionado por defecto y que hace que se apliquen las hojas de estilosestilos3.cssyestilos4.cssy se dejen de aplicar el resto de hojas de estilos alternativas.Estilo alternativo 2, que hace que se apliquen las hojas de estilosestilos5.cssyestilos6.cssy se dejen de aplicar el resto de hojas de estilos alternativas, incluyendo las hojas de estilos preferentesestilos3.cssyestilos4.css.Estilo alternativo 3, que hace que se aplique la hoja de estilosestilos7.cssy se dejen de aplicar el resto de hojas de estilos alternativas, incluyendo las hojas de estilos preferentesestilos3.cssyestilos4.css.
Por último, recuerda que independientemente del tipo de hoja de estilos enlazada, los navegadores también tienen en cuenta los medios (atributo media) al aplicar cada hoja de estilos en cada dispositivo con el que accede el usuario.