Una de las características más importantes de las hojas de estilos CSS es que permiten definir diferentes estilos para diferentes medios o dispositivos: pantallas, impresoras, móviles, proyectores, etc.
Además, CSS define algunas propiedades específicamente para determinados medios, como por ejemplo la paginación y los saltos de página para los medios impresos o el volumen y tipo de voz para los medios de audio. La siguiente tabla muestra el nombre que CSS utiliza para identificar cada medio y su descripción:
| Medio | Descripción |
|---|---|
all | Todos los medios definidos |
braille | Dispositivos táctiles que emplean el sistema braille |
embosed | Impresoras braille |
handheld | Dispositivos de mano: móviles, PDA, etc. |
print | Impresoras y navegadores en el modo "Vista Previa para Imprimir" |
projection | Proyectores y dispositivos para presentaciones |
screen | Pantallas de ordenador |
speech | Sintetizadores para navegadores de voz utilizados por personas discapacitadas |
tty | Dispositivos textuales limitados como teletipos y terminales de texto |
tv | Televisores y dispositivos con resolución baja |
Los medios más utilizados actualmente son screen (para definir el aspecto de la página en pantalla) y print (para definir el aspecto de la página cuando se imprime), seguidos de handheld (que define el aspecto de la página cuando se visualiza mediante un dispositivo móvil).
Además, CSS clasifica a los medios en diferentes grupos según sus características. La siguiente tabla resume todos los grupos definidos en el estándar:
| Medio | Continuo / Paginado | Visual / Auditivo / Táctil / Vocal | Mapa de bits / Caracteres | Interactivo / Estático |
|---|---|---|---|---|
braille | continuo | táctil | caracteres | ambos |
embossed | paginado | táctil | caracteres | estático |
handheld | ambos | visual, auditivo, vocal | ambos | ambos |
print | paginado | visual | mapa de bits | estático |
projection | paginado | visual | mapa de bits | interactivo |
screen | continuo | visual, auditivo | mapa de bits | ambos |
speech | continuo | vocal | (no tiene sentido) | ambos |
tty | continuo | visual | caracteres | ambos |
tv | ambos | visual, auditivo | mapa de bits | ambos |
La gran ventaja de CSS es que permite modificar los estilos de una página en función del medio en el que se visualiza. Existen cuatro formas diferentes de indicar el medio en el que se deben aplicar los estilos CSS.
Las reglas @media son un tipo especial de regla CSS que permiten indicar de forma directa el medio o medios en los que se aplicarán los estilos incluidos en la regla. Para especificar el medio en el que se aplican los estilos, se incluye su nombre después de @media. Si los estilos se aplican a varios medios, se incluyen los nombres de todos los medios separados por comas.
A continuación se muestra un ejemplo sencillo:
@media print { body { font-size: 10pt } } @media screen { body { font-size: 13px } } @media screen, print { body { line-height: 1.2 } }
El ejemplo anterior establece que el tamaño de letra de la página cuando se visualiza en una pantalla debe ser 13 píxel. Sin embargo, cuando se imprimen los contenidos de la página, su tamaño de letra debe ser de 10 puntos. Por último, tanto cuando la página se visualiza en una pantalla como cuando se imprimen sus contenidos, el interlineado del texto debe ser de 1.2 veces el tamaño de letra del texto.
Cuando se utilizan reglas de tipo @import para enlazar archivos CSS externos, se puede especificar el medio en el que se aplican los estilos indicando el nombre del medio después de la URL del archivo CSS:
@import url("estilos_basicos.css") screen; @import url("estilos_impresora.css") print;
Las reglas del ejemplo anterior establecen que cuando la página se visualiza por pantalla, se cargan los estilos definidos en el primer archivo CSS. Por otra parte, cuando la página se imprime, se tienen en cuenta los estilos que define el segundo archivo CSS.
Si los estilos del archivo CSS externo deben aplicarse en varios medios, se indican los nombres de todos los medios separados por comas. Si no se indica el medio en una regla de tipo @import, el navegador sobreentiende que el medio es all, es decir, que los estilos se aplican en todos los medios.
Si se utiliza la etiqueta <link> para enlazar los archivos CSS externos, se puede utilizar el atributo media para indicar el medio o medios en los que se aplican los estilos de cada archivo:
<link rel="stylesheet" type="text/css" media="screen" href="basico.css" /> <link rel="stylesheet" type="text/css" media="print, handheld" href="especial.css" />
En este ejemplo, el primer archivo CSS se tiene en cuenta cuando la página se visualiza en la pantalla (media="screen"). Los estilos indicados en el segundo archivo CSS, se aplican al imprimir la página (media="print") o al visualizarla en un dispositivo móvil (media="handheld"), como por ejemplo en un iPhone.
Si la etiqueta <link> no indica el medio CSS, se sobreentiende que los estilos se deben aplicar a todos los medios, por lo que es equivalente a indicar media="all".
CSS también permite mezclar los tres métodos anteriores para indicar los medios en los que se aplica cada archivo CSS externo:
<link rel="stylesheet" type="text/css" media="screen" href="basico.css" />
@import url("estilos_seccion.css") screen;
@media print {
/* Estilos específicos para impresora */
}Los estilos CSS que se aplican cuando se visualiza la página en una pantalla se obtienen mediante el recurso enlazado con la etiqueta <link> y mediante el archivo CSS externo incluido con la regla de tipo @import. Además, los estilos aplicados cuando se imprime la página se indican directamente en la página HTML mediante la regla de tipo @media.