CSS: Media Types, o cambiar de estilo según el medio donde vamos a mostrar nuestra web

Media Types nos permite especificar cómo se va a mostrar nuestra web dependiendo del medio donde la mostremos. No es lo mismo mostrar nuestra web en una pantalla de ordenador que en una impresora o en un dispositivo de Braille.

¿Cómo utilizamos esta posibilidad? Muy sencillo:

<style>
@media screen
{
p.testeando {font-family:verdana; font-size:10px}
}

@media print
{
p.testeando {font-family:arial; font-size:15px}
}

@media screen,print
{
p.testeando {font-weight:bold}
}

</style>


<p class="testeando">
Esto es una prueba :)

</p>

En este ejemplo veríamoscómo cuando imprimimos la página el texto del párrafo con la clase testeando no sale igual en pantalla que en la página imprimida.

¿Qué tipos de media hay? Pues estos:

all: Para todos los medios
aural: Para voces sintetizadas
braille: Para dispositivos Braille
embossed: Para impresoras Braille
handheld: Para dispositivos con pantalla pequeña cómo una PDA
print: Para impresoras
projection: Para presentaciones
screen: Para pantallas de ordenador
tty: Para medios que imprimen por puntos en un grid como por ejemplo un teletipo.
tv: Para televisiones.

En la práctica cuando hay que definir media es debido a que necesitamos especificar los estilos para imprimir, el resto de opciones salvo la Braille cuando es necesaria están en desuso ya que hoy en día hasta el cacharro más pequeño lleva una buena pantalla. Y bueno, con la Aural nunca he visto nada.



Comparte este Post: