CSS específico para impresión, pantalla, móviles, etc.

De nuevo me topo con un problema y os cuento la solución para intentar solucionaros un poquito la vida (o la maquetación, mejor dicho) :)

Estoy haciendo una web en la que el usuario debe imprimir una página con datos, pero claro, cuando el usuario le da al botoncito imprimir ( <a href=»javascript:window.print();» title=»imprimir»>imprimir</a> ) se imprimen los datos y el resto de floripondios que tiene la web, por lo que le hacemos gastar tinta innecesaria (que hay que ahorrar!).

La primera solución que encuentro es que el botón imprimir se direccione a otra página que tenga sólo los datos del cliente y sin estilo, por lo que tendría que crear otra página más.. ¡Me niego a trabajar doble!

Yo sabía que mi querido css maravilloso de la vida me iba a dar una solución más bonita.. y así es.

Una de las mejores cosas que tiene css es que permite definir los estilos según el medio al que vayan dirigidos. Useasé podemos asignar estilos a la misma web, para que se vea diferente según los medios por los que se visualice, ya sea un dispositivo móvil, una proyeccion, una pantalla, una hoja impresa, etc.

Para especificar a que medio va dirigido el estilo, hay 3 opciones: en la etiqueta link, con la regla @media, o con la regla @import. Ejemplos:

//etiqueta link
<link rel="stylesheet" type="text/css" href="estilos_impresion.css" media="print" />
//regla @media
@media print {
body { background-color:#FFFFFF;}
}
//regla @import
@import url("estilos_impresion.css") print;

Con link e @import asignamos hojas de estilo completas al medio y con @media asignamos estilos solos en la misma hoja de estilos que estemos trabajando.

Aparte de print, hay otros medios que podemos utilizar cómo son:
all (todos los medios) braille (dispositivos tactiles con sistema braille) embosed (impresoras braille) handheld (pdas, móviles y similares) projection (proyectores) screen (pantallas de ordenador) speech (sintonizadores de voz para personas discapacitadas) tty (dispositivos textuales limitados como teletipos y terminales de texto – estos no se ni lo que son -) y tv (televisores).

Así que ya sabéis todos a modificar vuestras webs/blogs para impresión y móviles (al menos).. yo me lo apunto en mi lista de tareas pendientes :P

  • 2 diciembre 2008
  • css
  • , ,

3 comments on “CSS específico para impresión, pantalla, móviles, etc.”

Responder a nnatali Cancelar respuesta

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