Configurar CSS para mejorar impresión de nuestro sitio web

Es muy curioso pero es cierto, no hay muchos sitios web que dediquen un espacio del diseño a presentar un buen contenido al momento de que el usuario decida imprimir; es decir, no muchos sitios preparan sus páginas para ser impresas, terminando en un alboroto total.

Hoy vamos a ver cómo configurar nuestro sitio con CSS para mejorar la impresión, para que cuando el usuario de imprimir, sólo salga el contenido que le importa y nada más.

¿A qué te refieres exactamente?

Si todavía no entienden lo que estoy diciendo les daré un ejemplo. En Firefox tenemos la posibilidad de pre visualizar cómo va a ser impresa la página web que queremos imprimir.

El ejemplo que tomo es de una noticia del Universal, y como podemos ver, el formato no es el mejor para que la noticia sea impresa, haciendo que el usuario decida copiar y pegar la información en un documento de procesador de textos.

Entonces para eso vamos a usar los estilos CSS, para configurar bien nuestra página, y que al momento de imprimirla no decepcionemos al usuario.

Configurando CSS

Lo que tenemos que hacer es mencionar el tipo de “media” que queremos usar para activar ciertos estilos a nuestra página, siendo el siguiente necesario para configurar la impresión:

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

o también este directamente en nuestro archivo:

<style media='print' type='text/css'>

Después vamos a buscar las capas, id’s o estilos que no queremos que aparezcan al momento de imprimir y hacemos lo siguiente:

#id1, .estilo1, h3, #id2, .estilo2{
     display: none;
}

Obviamente hay que cambiar los nombres que puse arriba por los de ustedes, de esa forma tendrán un sitio más o menos así: