¿Por qué mis páginas web no imprimen lo que veo en mi navegador?
La razón por la que algunas de sus páginas web se imprimen de forma diferente es porque tienen una hoja de estilos de impresión.
¿Qué es una hoja de estilos de impresión?
Una hoja de estilos de impresión formatea una página web para que, al imprimirla, lo haga automáticamente en un formato fácil de usar. Las hojas de estilo de impresión existen desde hace años y se ha escrito mucho sobre ellas. Sin embargo, muy pocos sitios web las implementan, lo que significa que nos quedamos con páginas web que frustrantemente no se imprimen correctamente en papel.
Es sorprendente que tan pocos sitios web utilicen hojas de estilo de impresión como:
- Las hojas de estilo de impresión mejoran enormemente la usabilidad, especialmente en páginas con mucho contenido (¡como ésta!)
- Son fenomenalmente rápidas y fáciles de configurar
Algunos sitios web ofrecen un enlace a una versión de la página para imprimir, pero, por supuesto, hay que configurarlo y mantenerlo. También es necesario que los usuarios vean este enlace en la pantalla y lo utilicen antes que la forma habitual de imprimir las páginas (por ejemplo, seleccionando el botón de impresión en la parte superior de la pantalla). Sin embargo, las versiones para imprimir son útiles cuando se imprimen varias páginas web al mismo tiempo, como un artículo que se extiende por varias páginas web.
Fuente Desactivar las hojas de estilo de impresión (CSS) al imprimir un sitio web
¿Cómo desactivo una hoja de estilo de impresión?
Hace poco necesité obtener una instantánea de un sitio web exactamente como se muestra en mi pantalla. Es decir, quería el color de fondo, quería los anuncios, quería el diseño completo.
Una opción es hacer capturas de pantalla secuenciales a medida que te desplazas por la página, y luego unirlas en Photoshop. Esto lleva mucho tiempo y deja una imagen de baja resolución (72dpi).
Otra forma de hacer esto es imprimir la página, y luego “guardar como” un PDF en lugar de imprimir. Esto funciona bastante bien para las páginas que no definen un diseño diferente para la impresión de una página frente a la visualización de la misma.
Desafortunadamente para mí, se ha vuelto cada vez más popular incluir una hoja de estilos de “impresión” en un sitio web, que define nuevos estilos de página cuando un usuario intenta imprimir el sitio web. Esto se define en la cabecera y se parece a esto:
Sólo he encontrado una opción que realmente responde a mis necesidades: El complemento/extensión “Web Developer” desarrollado por Chris Pederick.
Con este complemento puedes desactivar muy fácilmente TODOS los estilos, los estilos por defecto, los estilos en línea, los estilos incrustados y, lo has adivinado, ¡los estilos de impresión!
Actualmente está disponible para Firefox y Chrome. Espero de verdad que algún día llegue una extensión para Safari, ya que yo uso principalmente Safari. La única opción que he encontrado para Safari es desactivar TODOS los estilos, una función que viene por defecto con la versión más reciente (5.0.3) del navegador. Esto es útil durante el desarrollo para ver cómo se verá su sitio en un navegador de sólo texto, pero sin la capacidad de seleccionar qué estilos está deshabilitando tiene una utilidad limitada.
Este es un ejemplo de cómo deshabilitar los estilos de impresión con la extensión anterior en Firefox:
Fuente Print stylesheet - the definitive guide