Nunca deja de sorprenderme que la gente tenga que buscar un enlace o un botón que diga "Imprimir" en una página web, especialmente considerando que existe una tecnología milagrosa que hace que ese paso sea innecesario. Lamentablemente, casi nadie lo usa, a pesar de que tiene ... 10 años.
No solo es una tontería requerir un paso adicional para imprimir, sino que el uso de hojas de estilo de impresión ahorraría algo de tinta para cualquiera que no use el enlace imprimible. Y, por supuesto, hay muchas personas que utilizan la función de impresión en PDF para guardar artículos para más adelante sin desperdiciar papel.
¿Qué son las hojas de estilo impresas?
La mayoría de los sitios web implementan su función de impresión al llevarlo a otra página, que tiene un formato diferente para las impresoras, pero esto realmente no es necesario. Cada navegador implementa una tecnología CSS simple conocida como Imprimir hojas de estilo , que no es más que un archivo que especifica elementos para ocultar cuando su navegador imprime la página.
Para aquellos que no están familiarizados, CSS significa hojas de estilo en cascada, y así es como su navegador sabe cómo formatear el código fuente HTML de una página web en lo que realmente ve en la pantalla. Todo, desde fuentes, colores, bordes e incluso imágenes de fondo, se puede especificar en la hoja de estilo.
Agregar una hoja de estilo de impresión es tan simple como insertar esta única línea en el HTML de su página; la parte media = print del código le dice al navegador que solo use esta hoja de estilo al imprimir.
<link rel = ”stylesheet” href = ”print.css” type = ”text / css” media = ”print”>
Este archivo generalmente se parece a esto:
#sidebar, #footer, #navigation, #sharinglinks, #topad, #comments { display:none }
Sí, es tan simple como eso. ¿Entonces, cómo funciona? A continuación, se muestra un ejemplo de una página web normal a la izquierda, con toda la navegación, el logotipo y los anuncios claramente visibles con el ID asociado; y a la derecha, la misma página con la hoja de estilo de impresión aplicada, ocultando todos esos elementos.
Obviamente, preferiría imprimir uno de estos sobre el otro, ¿verdad?
Ejemplos de fallos de la hoja de estilo de impresión
Desafortunadamente, hay muchos sitios web enormes que no se han molestado en implementar esto en absoluto. Eche un vistazo a lo que sucede cuando intenta imprimir desde el New York Times:
Algunos sitios, como la red de sitios de Gawker, son incluso peores. No solo no tienen una vista imprimible, cuando intenta imprimir, se parece a una sopa de tinta. Por lo que sabemos, no hay forma de imprimir desde un sitio de Gawker sin usar un servicio separado como Readability, o resaltar manualmente el contenido de la página, lo cual es casi imposible en su nuevo diseño.
Realmente es triste. Muchos de los sitios más grandes simplemente no se molestan en implementar esta función.
Afortunadamente, algunos sitios los usan
A continuación, se muestra un ejemplo de una vista imprimible con el formato adecuado, sin tener que molestarse en buscar un enlace de impresión. El sitio de BBC News formatea cuidadosamente los artículos para imprimirlos, con un encabezado personalizado. Incluyen comentarios en la vista de impresión, pero sigue siendo un trabajo bien hecho.
Hay muchos otros sitios que hacen lo mismo, como ArsTechnica y ... nuestro sitio, pero sería una tontería mostrar capturas de pantalla de todos ellos. En nuestra investigación, los sitios que los implementaron correctamente son pocos y distantes entre sí.
Así que para terminar ... ¡tómese los 5 minutos necesarios para implementar una hoja de estilo de impresión para su sitio!
