Tip Precoz 2: combinando @media

24/jun/2008 4

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:

Comentarios

  1. fearlex [#]

    Interesante el tip, algo para tener a mano, nunca se sabe, cuando se va a necesitar algo asi 😀

    Gracias.

  2. Oscar [#]

    Recientemente he añadido un css para moviles, pero no se porque testeo la pagina desde un movil y no coge la hoja de estilo, supongo que sera por las caracteristicas del movil o preferencias, la verdad que no lo he mirado mucho.
    En el device central de adobe se ve bien.

    Muy util tu pagina. Un saludo

  3. Impresión portarretrato con CSS3 → CSSLab [#]

    […] imprimir en este modo (en mi caso era sólo una imagen), y darle estilos dentro de un media="print" rotando este(os) elemento(s) aprovechando la impresión vertical pero con el elemento […]

  4. | Andrés Karp [#]

    […] CSS: @media General /* […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab