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í:
