print - estilos css3

¿Forma más rápida de desarrollar y probar hojas de estilo de impresión(evite la vista previa de impresión cada vez)? (10)

Al menos en Chrome: durante el desarrollo, agregue a la etiqueta del cuerpo onload="window.print()" . Esto hará que el modo de impresión se abra inmediatamente después de actualizar.

Desafortunadamente, no parece que las herramientas de desarrollo sean de gran utilidad ya que se trata esencialmente de un PDF incrustado.

A propósito, hay formas de eliminar el paso 2. Uno popular es LiveReload.

Este es mi proceso ahora mismo:

Guarde los cambios en print.css
Abre el navegador y actualiza la página.
Haga clic derecho y seleccione Imprimir> Vista previa de impresión (Firefox, pero cualquier navegador realmente)

Es el paso 3 el que me molesta y me pregunto si es posible cortarlo con un plugin o algo así. Simplemente elija ver una página como material de impresión y luego simplemente actualice para ver los cambios.

¿Cómo se prueban las hojas de estilo de impresión? ¿Siempre haces clic en la vista previa de impresión después de una actualización?

Como se describe en esta otra publicación (¿Cómo utilizar el Inspector de elementos de Chrome en el modo de vista previa de impresión? ), Puede usar chrome para simplemente emular la hoja de estilo de impresión. Esto es genial ya que puede usar el inspector para ver de dónde provienen los estilos en lugar de adivinar cuando aparece el cuadro de diálogo de impresión.

Acceda al cuadro de diálogo Configuración de modificaciones haciendo clic en el ícono de ajustes en la esquina inferior derecha del Inspector de elementos de Chrome. Luego seleccione imprimir como el tipo de medio de destino.

¡Increíble!

En Chrome 62, cmd-R / cmd-P funciona bien en una Mac para mostrar una buena vista previa de una página de estilo de impresión @media.

Esto es accesible a través del elipsis vertical en la esquina superior derecha de la ventana del navegador (no Herramientas del desarrollador) / Imprimir ...

Use esc para cancelar la ventana de vista previa.

Entonces, para mi flujo de trabajo con IntelliJ IDEA y Chrome, es: cmd-s, cmd-tab, cmd-r, cmd-p, esc, cmd-tab y estoy de vuelta en el IDE.

Chrome 62 en Windows 10 tiene el mismo menú Imprimir ... en el mismo lugar, accesible con ctrl-p:

En Firefox, puede escribir Shift+F2 para abrir una línea de comandos de la barra de herramientas de desarrollador y, a continuación, escribir media emulate print

También puede emular otros tipos de medios de esta manera.

La extensión de la barra de herramientas de Firefox + Web Developer tiene una forma de habilitar / deshabilitar varias hojas de estilo.

Mira debajo del menú CSS. Hay un menú para desactivar y habilitar hojas de estilo individuales y un menú "Mostrar por tipo de medio" también.

Además, para reducir los pasos para llegar a PrintPreview en Firefox, pruebe la extensión PrintPreview , que creará un botón en la barra de herramientas.

Para Chrome, hay un puerto de esa extensión . Por lo que puedo decir con la versión de Chrome, puedes elegir "Mostrar estilos de impresión"

No utilizaría ningún método de prueba que no implique vista previa de impresión. Existen demasiadas diferencias: las imágenes de fondo no funcionan en absoluto impresas, sino que aparecen en contextos de pantalla normales siendo las principales entre ellas.

En Chrome, control+p pasa inmediatamente a la vista previa de impresión. (Solo olvídate de subir a la barra de menú). Eso es bastante fácil.

Podría tratar de eliminar temporalmente su hoja de estilo normal y solo cargarla en la impresión con una etiqueta de enlace normal.

Puede usar la Emulación de tipo de medios de Chrome aceptada en la publicación Vea imprimir CSS en el navegador .

ACTUALIZACIÓN 21/11/2017

El documento de DevTools actualizado se puede encontrar aquí: Ver una página en modo de impresión .

Para ver una página en modo de impresión:
1. Abra el Menú de Comando . ( tl; dr Cmd + Shift + P (Mac) o Ctrl + Shift + P (Windows, Linux))
2. Comience a escribir Renderización y seleccione Show Rendering .
3. Para el menú desplegable Emular CSS , seleccione imprimir .

ACTUALIZACIÓN 29/02/2016

Los documentos de DevTools se han movido y el enlace anterior proporciona información inexacta. Los documentos actualizados con respecto a la emulación de tipos de medios se pueden encontrar aquí: Estilos de vista previa para más tipos de medios .

Abra el cajón de emulación DevTools haciendo clic en el icono Más anulaciones ••• más anulaciones en la esquina superior derecha de la ventana del navegador. Luego, selecciona Medios en el cajón de emulación.

ACTUALIZACIÓN 12/04/2016

Lamentablemente, parece que los documentos no se han actualizado con respecto a la emulación de impresión. Sin embargo, el emulador de medios de impresión se ha movido (nuevamente):

Abrir Chrome DevTools
Hit esc en tu teclado
Haga clic en ⋮ (puntos suspensivos verticales)
Elija Rendering
Tick emular los medios impresos

Ver captura de pantalla a continuación:

ACTUALIZACIÓN 28/06/2016

Los documentos de Google Developers sobre Chrome DevTools y la opción "Emular medios" se han actualizado para Chrome> 51:

https://developers.google.com/web/tools/chrome-devtools/settings?hl=en#emulate-print-media

Para ver una página en el modo de vista previa de impresión, abra el menú principal de DevTools, seleccione Más herramientas > Configuración de reproducción , y luego habilite la casilla de verificación emular medios con el menú desplegable configurado para imprimir .

ACTUALIZAR 24/05/2016

La asignación de nombres a las configuraciones ha cambiado una vez más:

Para ver una página en el modo de vista previa de impresión, abra el menú principal de DevTools, seleccione Más herramientas > Renderizado , y luego habilite la casilla de verificación Emular medios CSS con el menú desplegable configurado para imprimir .

Simplemente puede deshabilitar sus estilos de pantalla y cambiar su tipo de medio a "pantalla" para su hoja de estilo de impresión mientras prueba. Esto no será exactamente lo mismo que usar una vista previa de impresión real (saltos de página, ancho del documento, etc.), pero aún así le da una buena idea.

simple para mí (no tener partes @screen o similares ¹ ) con FF :

pon la @media print { ... parte al final de tu contenido CSS
out-comment only the wrapper declaration /*@media print {*/ ... /*}*/
- aplicando así las cosas de impresión a sus estilos anulándolos inmediatamente cuando corresponda
(Estoy usando LiveReload así que la página de mi navegador se actualiza inmediatamente después de guardar los cambios)
(de lo contrario , si no usa LiveReload :) presione CTRL+R para volver a cargar la página
ahora ya puedes hacer muchos ajustes típicos de CSS de impresión (estilo de fuente, tamaño de letra, espaciado, colores) donde no es necesario tener una vista previa de impresión todavía
presione ALT+F+V para abrir la vista previa de impresión y ALT+W para volver a cerrarla

¹ : si uno los tiene, comentarlos, dependiendo de los medios evaluados, puede que no sean un gran problema