Diferente CSS según quien nos mire

Categorías: Introducción por loretahur el 4 de Enero, 2007

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 }
}