Geek Rants ¿Por qué tantos sitios web no utilizan las hojas de estilo de impresión?
Nunca deja de sorprenderme que las personas tengan que buscar un enlace o un botón que diga "Imprimir" en una página web, especialmente considerando que hay una tecnología milagrosa que hace que ese paso sea innecesario. Lamentablemente casi nadie lo usa, aunque tiene… 10 años.
No solo es tonto 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 mucha gente que usa la función de impresión en PDF para guardar artículos para más tarde sin perder papel..
¿Qué son las hojas de estilo de impresión??
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 Print Stylesheets, 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 es así como su navegador sabe cómo dar formato al 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 conectar esta única línea en su página HTML-the media = print parte del código le dice al navegador que solo use esta hoja de estilo al imprimir.
Este archivo generalmente se ve algo como esto:
#sidebar, #footer, #navigation, #sharinglinks, #topad, #comments display: none
Sí, es realmente tan simple como eso. ¿Entonces, cómo funciona? Este es 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, que oculta todos esos elementos.
Obviamente preferirías imprimir uno de estos sobre el otro, ¿verdad??
Ejemplos de fallas en la hoja de estilo de impresión
Desafortunadamente, solo hay un montón de 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 la 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..
Es triste, de verdad. Las cargas de los sitios más grandes simplemente no molestan en implementar esta función.
Afortunadamente, algunos sitios los usan
Este es un ejemplo de una vista de impresión con el formato correcto, sin tener que molestarse en encontrar algún enlace impreso. El sitio de noticias de la BBC formatea perfectamente los artículos para imprimir, 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 muy pocos.
Así que para finalizar ... tome los 5 minutos necesarios para implementar una hoja de estilo de impresión para su sitio.!
