CSSLab

Tip Precoz 2: combinando @media

Tweet

Los media type especifican el soporte al cual apunta la hoja de estilos definida: pantalla (screen), papel (print), móviles (handheld), etc. Algunas propiedades CSS están diseñadas para medios específicos (page-break-after y page-break-before se usan para media="print" por ejemplo), y en otros casos propiedades son compartidos por diferentes medios, pero usan diferentes unidades (pixel para pantalla, centímetros para papel).

Usualmente se especifican los medios al cual apuntan las hojas de estilos como atributo de la etiqueta <link />, de la siguiente forma:

<link href="estilos/layout.css" rel="stylesheet" type="text/css" media="screen" />
<link href="estilos/print.css" rel="stylesheet" type="text/css" media="print" />

Sin embargo existen otros 2 métodos, los cuales pueden ser utilizados dentros mismo de las hojas de estilos. El segundo mediante @import:

@import url("sintetizado.css") aural;

Y el tercero, a través de la regla @media:

@media print {
     body { font-size: 14pt }
}

Con esta regla, podemos definir dentro de nuestras hojas de estilos las propiedades y valores para cada medio, sin necesidad de linkear otras hojas de estilo externas:

@media screen {  
     body {
          color: #666;
          font-size: 12px;
          padding: 15px 0;
     }
}
@media print {  
     body {
          background-color: #fff
          color: #000;
          padding: 1cm;
     }
}

Para entregar información más completa, todos los medios disponibles en CSS 2 son:

all

todos los medios

aural

para sintetizadores de voz

braille

para dispositivos táctiles que usan braille

embossed

utilizada para impresoras para braille

handheld

dispositivvos móviles

print

material impreso

projection

proyectores o impresores de transparencias

screen

pantallas en color en general

tty

medios con caracter en grilla, como teletipos, terminales o dispositivos móviles con capacidad limitada. Al tener nula resoución, no se debe usar la unidad de pixeles.

tv

dispositivos de televisión (baja resolución)

Link:

• Media types