10Aug

Geek Rants: ¿Por qué tantos sitios web no pueden usar hojas de estilo de impresión?

click fraud protection

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 teniendo en cuenta que hay una tecnología milagrosa que hace que ese paso sea innecesario. Lamentablemente, casi nadie lo usa, a pesar de que es. .. 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 usan impresión a PDF para guardar artículos para más tarde sin desperdiciar 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 los elementos que se ocultan cuando el navegador imprime la página.

instagram viewer

Para aquellos que no están familiarizados, CSS significa hojas de estilo en cascada, y es la forma en que 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 estilos.

Agregar una hoja de estilo de impresión es tan simple como conectar esta única línea en el HTML de su página: la parte del código de medios = impresión le dice al navegador que solo use esta hoja de estilos cuando imprima.

& lt; link rel = "stylesheet" href = "print.css" type = "text / css" media = "print" & gt;

Este archivo generalmente se ve así:

#sidebar, #footer, #navigation, #sharinglinks, #topad, #comments{ display: none}

Sí, es realmente así de simple.¿Entonces, cómo funciona? Aquí hay 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, ya la derecha, la misma página con la hoja de estilo de impresión aplicada, ocultando todos esos elementos.

Obviamente, prefiere imprimir uno de estos sobre el otro, ¿verdad?

Ejemplos de fallas en hojas 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 aún peores. No solo no tienen una vista imprimible, cuando lo intentas e imprimes, se parece a la sopa de tinta. Por lo que podemos decir, no hay forma de imprimir desde un sitio de Gawker sin usar un servicio separado como legibilidad, o resaltar manualmente el contenido en la página, lo cual es casi imposible en su nuevo diseño.

Es triste, realmente. La gran cantidad de sitios más grandes simplemente no se molesta en implementar esta función.

Afortunadamente, algunos sitios los usan

Aquí hay un ejemplo de una vista imprimible formateada correctamente, sin tener que molestarse en encontrar algún enlace impreso. El sitio de BBC News formatea prolijamente los artículos para imprimir, con un encabezado personalizado. Incluyen comentarios en la vista de impresión, pero todavía es un trabajo bien hecho.

Hay muchos otros sitios que hacen lo mismo, como ArsTechnica y. .. nuestro sitio, pero sería absurdo mostrar capturas de pantalla de todos ellos. En nuestra investigación, los sitios que los implementaron correctamente son pocos y distantes.

Entonces, para concluir. .. ¡tome los 5 minutos requeridos para implementar una hoja de estilo de impresión para su sitio!