Una de las gracias que tiene el CSS es presentar un mismo contenido de diferentes formas. Por tanto, podemos crear diferentes presentaciones dependiendo del dispositivo en el que se vaya a visualizar nuestra página. Por ejemplo, no será lo mismo mostrar una página en un ordenador convencional que en una PDA.
Para ello tenemos una serie de valores que aplicar a las etiquetas <style> o <link> con el parámetro media.
Si a media le damos el valor:
- all: ese fichero CSS será cargado para todos los dispositivos
- screen: para monitores de ordenador normales (valor por defecto)
- print: para impresión
- aural: sintetizadores de voz
- handheld: asistentes personales (PDA’s)
- braille: máquinas capaces de reproducir formato braille para personas invidentes
- embossed: para imprimir texto en braille
- projection: proyectores y transparencias
- tty: terminales
- tv: televisores
Puede ser un solo valor o varios separados por comas.
Veamos un ejemplo en el que dependiendo de si han accedido a nuestra página a través de un ordenador o a través de una PDA, cargamos una hoja de estilos u otra:
<style type="text/css" media="screen">
@import "estilos_normal.css";
</style>
<style type="text/css" media="handheld">
@import "estilos_pda.css";
</style>
Pero también podemos hacer esto dentro de una única hoja de estilos con la regla @media. Ésta permite aplicar diferentes estilos dentro de una misma hoja dependiendo del medio. Ejemplos:
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 12pt }
}
@media screen, print {
body { line-height: 1.2 }
}