Tip Precoz 2: combinando @media

24/Jun/2008 155

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. whatismodafinil [#]

    provigil for depression provigil online

  2. bactrim [#]

    Sulfamethoxazole and alcohol trimoxazole syrup

  3. stromectolforte.com [#]

    stromectol cvs https://stromectolforte.com/# reputable indian online pharmacy stromectol price

  4. side effects for ivermectin [#]

    ed problem solutions http://ivermcov.com – stromectol 3mg

  5. stromectol coronavirus [#]

    cumpДѓraИ›i stromectol http://stromectolforte.com/ ivermectin for sale pierre kory ivermectin

CSSLab