Credit image

¿Te gusta el diseño web? ¡Echa un vistazo a la documentación de LenguajeCSS.com!

CSS print : Facilitando la impresión al usuario

Cuando estamos creando o modificando una web, algunos diseñadores trabajan en un CSS para que el usuario pueda ver la página correctamente desde un navegador, otros se preparan unas hojas de estilo para cada navegador concreto, y otros hacen cada locura que cuando ves la página lo único que piensas es... ¡Que web!.

El caso es que, independientemente de tener diseñado el aspecto "visto" desde el navegador, podemos ir, aún, un poco más allá.

Me estoy refiriendo al media="print". Colocando en la cabecera head de nuestro HTML, al márgen de tener otro CSS para nuestro sitio, podemos ubicar lo siguiente:

<link rel="stylesheet" href="estilo-impresion.css" media="print">

Con esto le decimos al navegador que en el caso de que el usuario mande a imprimir alguna sección o artículo de nuestra página no va a cargar el CSS que "ve" el navegador, sino una hoja de estilos CSS especial, hecha expresamente para impresión.

Asi pues, en esta hoja podemos hacer cambios significativos como quitar todos los elementos interactivos como menús, formularios, etc., cambiar las zonas negras u oscuras del sitio para reducir el gasto de tinta a grises o blancas, para lo mismo Eliminar el fondo del sitio, etc.

Además, una cosa a tener en cuenta para éste CSS es el siguiente código:

a:after {
content : " ( " attr(href) " ) ";
font-size : small;
}

Con él conseguimos que los enlaces (hipervínculos) que, evidentemente, no van a poderse cliquear en nuestro documento impreso, aparezcan a continuación del enlace de una manera similar a esta:

Google ( http://www.google.es/ )

Escrito por Manz, el , en css. Comentarios recibidos: 8.

8 comentarios de lectores
Manz
Manz
2

Efectivamente, es un artículo donde hablan del mismo tema, pero que no conocía. Aún así, ¡ni compares mis pobres definiciones con los grandes maestros de Alistapart! Gracias por el link, Juanjo.

Netito
Netito
3

Es algo muy útil, lo de media print, aunque creo que lo del a:after, que sumamente práctico al imprimir, no funciona en Explorer... :(

Manz
Manz
4

Efectivamente... El atributo content no lo reconoce Internet Explorer a pesar de ser estándar. ¿Tal vez el nuevo IE7?

Driadan
Driadan
5

Offtopic: No esperes un soporte completo de css porque creo que dijeron que no lo iban a dar (o al menos no en la primera release oficial) Iban a mejorarlo un poco, pero no a soportarlo de forma completa. Gracias por la info del articulo, a ver si un dia me pongo y le meto un css para impresion (aun cuando no haya mucho que imprimir )

balmasedano
balmasedano
6

Pues la verdad es que está muy bien poder especificar una hoja de estilos a la hora de imprimir. En una de mis páginas web la utilicé y da muy buenos resultados, además te permite eliminar partes del documento como los menús, siempre y cuando les hayas especificado un estilo determinado. Gracias por la información

aLhernandez
aLhernandez
8

Que tal: Muy bien esto de poder acomodar la impresion a como nos convenga. Pero tengo un problema, ya que requiero imprimir una imagen de fondo, en concreto, la imagen de fondo que coloque a una tabla (backgroun='...'). ¿Es esto posible? o todos los navegadores al momento de imprimir ignoran los fondos ¿? saludos.

Publica tu opinión

Si lo deseas, puedes utilizar el siguiente formulario para publicar tu opinión o responder a alguna de las existentes:

Previsualización

Aquí se previsualizará su comentario. Revise que sea correcto antes de publicarlo.