¿Pero se imprimen las páginas web? Pues sí, aunque es un punto que se suele pasar por alto cuando se diseña una web, por ejemplo la plantilla que he utilizado de base para este blog no tenía definido ningún estilo especial para la impresión y cuando la adapte como a mí me pareció pues ni se me paso por la cabeza que debía de poner unos estilos para cuando alguien quiera imprimir algún artículo, y hace unos días recibí un comentario justo sobre el tema de la impresión, así que aprovecho para contar como se puede hacer y de paso dejo lista la web para poder imprimir sin gastar litros de tinta.
Al menos hay que tener en cuenta lo siguiente cuando se define un estilo para imprimir:
- Eliminar todo el contenido irrelevante para lo que estas imprimiendo como menús, barras laterales, anuncios, artículos relacionados, comentarios, videos, …
- Evitar los colores de fondo para evitar un gasto de tinta innecesario. En realidad, los propios navegadores cuentan con la opción de no imprimir el fondo, pero aunque el fondo no se quiera imprimir puede que determinados fondos se quieran imprimir como por ejemplo en las tablas y otros tipos de contenidos donde mantener el color de fondo puede resultar interesante, y los navegadores nos van a quitar todos los fondos.
- Al imprimir se pierde la interactividad y por tanto hay que tener en cuenta que por ejemplo normalmente no se pone la url de los enlaces pero a la hora de imprimir de poco sirven si no se sabe la url.
Se puede definir los estilos en un archivo de estilos independiente definiendo el atributo media=»print», pero con las media queries ya no es necesario y se puede definir en un único CSS del mismo modo que se hace para hacer las webs responsives.
@media print
Y con menos de 100 líneas se puede conseguir una versión imprimible de esta web que usaré como ejemplo práctico real de cómo hacerlo.
@media print {
body {
background: #fff !important;
}
header {
box-shadow: none;
background: #fff !important;
}
header h1 {
background: #fff;
}
#navigation {
display: none;
}
.main-container #page {
background: #fff;
box-shadow: none;
border: 2px solid #000;
}
.content aside.sidebar {
display: none;
}
.content article {
width: 100%;
float: none;
padding-left: 0;
background: #fff;
-webkit-print-color-adjust: exact; /*economy | exact*/
color-adjust: exact;
}
.content article #content_box {
background: #fff;
box-shadow: none;
border-top: 2px solid #000
}
.content article a[target=_blank]:after {
content: " (" attr(href) ")";
}
.content article #content_box .related-posts {
display: none;
}
.content article #disqus_thread {
display: none;
}
.content article .crayon-num {
display: none;
}
ins.adsbygoogle {
display: none !important;
}
footer {
background: #fff;
}
footer .container {
background: #fff;
box-shadow: none;
border: 2px solid #000;
}
}
Empecemos por el principio, los estilos deben de estar dentro de @media print que indica que estos son los estilos aplican solo para imprimir y que sobrescriben cualquier otro estilo definido, es decir que no tenemos que volver a diseñar toda la página, solo hay que cambiar las cosas necesarias para conseguir una versión imprimible decente.
El primer paso es ocultar todos los elementos que no queremos que se impriman con display: none y ajustar el contenido para que ocupe toda la página, en este caso el contenido de los post esta en article y solo hay que poner el ancho al 100%, eliminar el padding y quitar el float que puede hacer cosas raras al imprimir como saltos de página.
Definir color de fondo para imprimir con CSS
Con -webkit-print-color-adjust para chrome y safari y color-adjust para el resto de navegadores se puede forzar para que se use un color de fondo cuando se imprima para que los navegadores no quiten el fondo de forma automática.
.content article {
-webkit-print-color-adjust: exact; /*economy | exact*/
color-adjust: exact;
}
Recordar que en CSS existe la herencia de estilos por lo que se podría aplicar al body para que coja todos los colores de fondo que tengamos definidos.
Le aplico fondo blanco a todo, ¿y entonces para qué quieres que coja el fondo que pongas si el blanco es el que coge por defecto? pues si parece un poco absurdo pero de este modo tengo toda la página con fondo blanco pero se mantienen los colores de fondo de los elementos que están dentro del article que es donde está definido y así se mantiene el gris de fondo de las líneas pares del código por ejemplo, y lo mismo ocurriría con cualquier otra cosa que tenga un background-color.
Mostrar la url de los enlaces con CSS
Uno de los problemas de una versión impresa de un web es que deja de ser interactiva y por lo tanto los enlaces pasan a ser como mucho textos de otros colores, pero desde luego inútiles si no se incluye el enlace, por suerte añadir la url de los enlaces es muy sencillo con CSS usando :after que nos permite añadir contenido después de un elemento y poniéndole como contenido la url del enlace con attr(href) y para que quede un poco más limpio le podemos añadir unos paréntesis.
/*Todos los enlaces*/
a:after {
content: " (" attr(href) ")";
}
¿Pero quieres que se muestren las urls de todos los enlaces? Pues probablemente no, por ejemplo usando a[href^=http] podríamos evitar los enlaces internos siempre que estos tengan rutas relativas.
/*Los enlaces que tienen una url que empieza con http*/
a[href^=http]:after {
content: " (" attr(href) ")";
}
En mi caso la solución anterior no me sirve porque todos los enlaces tienen la url completa, pero siempre hay una salida, con a[target=_blank] se puede aplicar solo a los enlaces que están definidos para que se abran en una nueva pestaña/pagina y que siempre uso para los enlaces externos que son los que sería interesante imprimir.
/*Enlaces que se abren en nueva pagina*/
a[target=_blank]:after {
content: " (" attr(href) ")";
}
