1. Inicio
  2. Pregunta y respuesta
  3. Detectar compatibilidad con imágenes de fondo y colores de fondo al imprimir desde el navegador

Detectar compatibilidad con imágenes de fondo y colores de fondo al imprimir desde el navegador

2012-05-17 17 views
6

Al imprimir una página desde un navegador, hace referencia a una hoja de estilo print.css declarada con media="print". El navegador deshabilita algunas reglas de CSS como background-image y background-color, algunos navegadores tienen opciones para habilitarlas.Detectar compatibilidad con imágenes de fondo y colores de fondo al imprimir desde el navegador

Según lo dicho en this answer, no es posible anular este comportamiento del código de la página.

Tengo dos preguntas sobre este:

  • ¿Hay alguna documentación o buena referencia sobre estas reglas de impresión? Por ejemplo:
    • ¿Qué reglas de CSS están deshabilitadas?
    • ¿Puede Javascript hacer algo en la página antes de imprimir?
  • ¿Hay alguna forma de detectar un navegador en modo de impresión con Javascript y luego hacer un sistema de degradación elegante?

Fuente

2012-05-17 Loïs Di Qual

Respuesta

3

Cómo navegadores imprimir páginas es un poco de una caja negra; No he podido encontrar ninguna referencia definitiva.

Todos los principales navegadores tienen opciones de impresión para "contraer" la página web en la página de papel (habilitada de manera predeterminada), e imprimir imágenes de fondo y colores (desactivada por defecto). La mayoría de los usuarios dejarán estos valores predeterminados tal como están, si son conscientes de que existen estas opciones. No he visto navegadores que "deshabiliten" otras reglas de CSS al imprimir.

Firefox e IE son compatibles con los eventos onbeforeprint y onafterprint, por lo que puede detectar cuándo se está imprimiendo con JavaScript, aunque obviamente esto no es una solución de navegador múltiple.

La mayoría de los ajustes necesarios para la impresión pueden ser manejados por CSS (ya sea en una hoja de estilos de impresión independiente o como un bloque @media print { ... } en su hoja de estilo principal):

  • El CSS-Discuss Wiki tiene una buena página de la cantidad que puede control a través de CSS.

  • Sugiero echar un vistazo a los estilos de impresión de HTML5 Boilerplate como un buen punto de partida.

  • Si tiene imágenes de fondo que deben imprimirse, puede incluir <img> elementos en su página, ocultos con display: none, a continuación, hacerlos visibles con display: block (o inline) en el CSS de impresión.

Si tiene que modificar en gran medida la página para la impresión, sugiero que ofrecen una versión de sólo impresión separada de la página, en lugar de tratar de hacer ajustes con JavaScript.

Fuente

2012-06-19 05:00:04

0

No estoy seguro del primer punto, pero para detectar el navegador en modo de impresión, puede hacer lo mismo que para la pantalla. O bien utilizar Modernizr y condicionalmente agregar clases a las funciones soportadas, a continuación, hacer las reglas CSS específicas como:

body.whateverfeature .yourrule { }

o si es sólo IE desea probar para, usar algo como h5bp hace:

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->

Fuente

2012-05-18 12:13:15 BaronVonKaneHoffen

+0

Eso no es realmente lo que pedí. Necesito una forma de detectar un navegador en modo de impresión (sí, print.css funcionará, pero necesito modificar el DOM y CSS no puede hacerlo). Hay un evento 'onbeforeprint' en IE, pero ¿hay un equivalente en otros navegadores? Ese es un tema que hace a Google tonto: S –

Cuestiones relacionadas

 Cuestiones relacionadas