Aplicar los estilos a diferentes dispositivos


Por lo general cuando pensamos en los estilos, sólo pensamos en ellos para modificar la apariencia de nuestras páginas por la pantalla de un PC, sin embargo hay otros dispositivos en los que los usuarios pueden visitar nuestra Web como por ejemplo sacándola por la impresora o en los cada vez mas comunes ordenadores de mano. Cuantas veces nos ha pasado que al imprimir una página Web, está aparece ilegible?
Los estilos además de dar formato a la Web cuando sale por pantalla, también lo puede dar para cuando salga por impresora o por otras salidas y lo que es más útil, ser independientes unos de otros.

Para que los estilos se apliquen en una salida u otra debemos usar el atributo "media", este atributo tiene los siguientes valores reconocidos actualmente por el W3C:


screenPara pantallas de ordenador no paginadas
ttyPara medios de comunicación que usan una rejilla de carácter de diapasón fijo, como teletipos, terminales, o dispositivos portátiles con capacidades de demostración limitadas.
tvPara dispositivos de tipo televisión (resolución baja, scroll limitado, ...)
projectionPara proyectores
handheldPara dispositivos de mano (pequeña pantalla, limitada paleta de colores o monocroma, ...)
printPara salida por dispositivos de página, opacos o vista preliminar
braillePara dispositivos braille
embossedPara impresoras braille
auralPara salida por dispositivos de audio
allPara todos los dispositivos

Aunque esta lista puede ampliarse en un futuro.

Si quisiéramos definir los estilos para mas de un dispositivo, deberíamos enumerarlos separados por comas, por ejemplo para los dispositivos de pantalla e impresora: media="print, screen"

Este atributo puede ser establecido de las siguientes formas:

1. directamente al ser llamado un archivo de estilos con la etiqueta "link":
<!--establer los estilos de la impresora:-->
<link rel="stylesheet" type="text/css" href="archivo_estilos_impresora.css" media="print">
<!--Establecer estilos para dispositivos de TV y de mano:-->
<link rel="stylesheet" type="text/css" href="archivo_estilos.css" media="tv, handheld">


2. Dentro del texto CSS:
<style type="text/css">
@media screen, handheld{
/*Aquí ponemos los estilos para la salida por pantalla y proyectores, por ejemplo el color de fondo blanco*/
body{background-color:#ffffff}
}
@media all{
/*Aquí ponemos los estilos para la salida para todos los dispositivos*/

}
<style>


3. Al llamar a un archivo de estilos dentro del texto CSS con "@import":
<style type="text/css">
@import url("archivo_estilos_sonido.css") aural;
<style>
Esta última opción no la recomendamos, ya que la instrucción "@import" no es reconocida por el Internet Explorer de Microsoft.

Para ver como quedaría el ejemplo, imprimir esta página o bien ir a la "Vista preliminar" del explorador, en Internet Explorer: "Archivo->Vista preliminar", en NetScape: "Archivo->imprimir Vista Preliminar".
Podéis ver las diferencias haciendo esto mismo con cualquier otro artículo.


Código:
<!--Copyright © McAnam.com-->
<!--
Con este ejemplo, al imprimir la página, los input como el botón no aparecerán, y el texto aparecerá mas pequeño y de color negro para una mejor lectura. Además se han adaptado las dimensiones para que quepan en un DIN A4
-->
<style type="text/css">
    @media print{
        input{
            display:none;
        }
        body{
            font-weight: 400;
            font-size: 3mm;
            color: #000000;
        }
        p{
            width:5in;
            font-weight: 400;
            font-size: 3mm;
            color: #000000;
        }
        td{
            font-weight: 400;
            font-size: 3mm;
            color: #000000;
        }
    }
</style>

Links relacionados:
Como usar los estilos
Imprimir página Web
Arquitectura de software en capas
Maquetación con divs y CSS (margin y position absolute)
Maquetación con divs y CSS (float)


Para cualquier duda, consulta, sugerencia, opinión, colaboración, etc; no dude en ponerse en contacto con nosotros

Copyright © 2002-2017 [McAnam]. Reservados todos los derechos.
www.mcanam.com