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.

Medios definidos con las reglas de tipo @media

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.

Medios definidos con las reglas de tipo @import

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".

Medios definidos mezclando varios métodos

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.

Como Convertir un Celular en una Laptop Uno de los productos que más llamó la atención en la CES 2012 realizada hace unos días fue LightPad G1, dispositivo diseñado por la compañía china...
Skype Translator ofrecerá traducciones en voz y texto Microsoft anunció hoy que empezará a habilitar su traductor Skype Translator a millones de personas en todo el mundo, ofreciendo voz en inglés, francé...
Las libertades del software libre De acuerdo con tal definición, un software es "libre" cuando garantiza las siguientes libertades:2 Libertad Descripción 0 la libertad de...
Cual es el Perfil de Un Usuario Promedio de Facebook? Facebook ya cuenta con más de 750 millones de usuarios registrados. Proceden de todas partes del mundo. Unos simplemente se registraron pero nunca o c...
Desarrollo de Aplicaciones Cada software desarrollado por Ventics es entregado en un 100% el código y su documentación al cliente.
Ranking Lenguajes de Programación Febrero 2013 Java recupera la primera posición de este ranking mensual con el que dar una referencia para comprobar si nuestras habilidades de programación siguen ...
Ranking Lenguajes de Programación Mayo 2012 La popularización de un determinado lenguaje de programación es un proceso lento que raramente sorprende con cambios inmediatos, esto es debido a vari...
Las funciones en PHP Muchas veces, cuando trabajamos en el desarrolo de una aplicación, nos surge la necesidad de ejectar un mismo bloque de código en diferentes partes d...
Cómo comprarte un ordenador y no morir en el intento Decidir el tipo de ordenador que mejor encaja en nuestras necesidades no es algo que podamos dejar resuelto en unos minutos de búsqueda por In...
Síragon lanza su primera laptop Ultrabook tan delgada y ligera como una tablet Síragon anunció el lanzamiento en el mercado venezolano de su primera laptop ULTRABOOK, en sus tres versiones Serie 3000, 5000 y 7000, un nuevo dispos...
Medios CSS
Tagged on: