Optimiza tu CSS para Imprimir y añade un Botón

Noviembre 20, 2009

Css

Si bien es posible imprimir un artículo de una página web, normalmente al intentarlo, lo que ocurrirá es que se imprimirá toda la página incluyendo los elementos innecesarios, como el menú.

Pero esto tiene una sencilla solución, basta con añadir una hoja de estilos CSS, orientada exclusivamente para imprimir.

Hoja CSS para Imprimir

La hoja de estilos se invoca en el <head>, desde un documento externo:




<link rel="stylesheet" href="estilos.css" type="text/css" />

La idea es crear otra hoja de estilos CSS para imprimir, añadiendo la propiedad media="print".




<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Modificar CSS

Ahora, hay que modificar la nueva hoja, para eliminar todas las propiedades que no correspondan al artículo, que es lo que interesa mostrar.

Para ocultar un elemento hay que usar la propiedad "display : none".




#menu {display: none!important}

No olvides usar la regla !important para que tenga prioridad sobre la otra hoja de estilos.

También puedes hacer visible la URL de los enlaces con la siguiente propiedad:




a:after {content: " [" attr(href) "] "!important;}

Se verá así: MirarPorMirar [http://www.mirarpormirar.com/]

Además, recomiendo aumentar el tamaño de la fuente, la anchura de los artículos para que ocupe toda la página, e incluso el color de la fuente para que gaste menos tinta.

Botón para Imprimir

Ahora recurrimos al JavaScript para colocar un botón que permita al usuario imprimir un determinado artículo.

Código del botón




<a href="#" onclick="window.print(); return false;">

  <img src="imagen.png" />

</a>

Vista previa

Puedes previsualizar los resultados sin necesidad de tener que imprimir, para ello, mediante el navegador Firefox, haz clic en Archivo / Vista Preliminar.

Tags: Javascript Css

Comentarios [1]

Si te gustó el artículo...

Puedes seguir el blog a través de Twitter, Facebook o tu lector de feeds RSS.

1 Comentario

#1 Israel

Hola, realmente esto es útil, hacía tiempo que buscaba algo así, muchas gracias por el dato.

Dicembre 20, 2009

Responder

Deja tu Comentario

Asigna una imagen a tu email con Gravatar, si no sabes accede al siguiente Tutorial.

Información

Aplicamos el tag nofollow, y los enlaces con keywords en los comentarios podrían ser eliminados, intentamos mantener limpio el blog de spam.
Puedes usar las etiquetas <i>, <b>, <em>, <strong>, <a>, href, procura cerrarlas adecuadamente o tu comentario podria no mostrarse del modo que deseas.
Si necesitas que se vean en el comentario caracteres especiales como los usados en lenguajes de programacion como php, xhtml, etc., debes escribirlo dentro de las etiquetas [code] [/code], de lo contrario no se mostrará.
Procura no escribir enlaces que no tengan ninguna relación con el tema.
Si realizas una crítica procura argumentarla, pero sobretodo evita los insultos.