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

Este es mi proceso en este momento:

  1. Guarde los cambios para imprimir.css
  2. Abra el navegador y actualice la página.
  3. Haga clic derecho y elija Imprimir > Vista previa de impresión (Firefox, pero cualquier navegador realmente)

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

¿Cómo prueba sus hojas de estilo de impresión? ¿Siempre haga clic en vista previa de impresión después de una actualización?

 148
cssfirefox
Author: Michael, 2012-03-01
Source

10 answers

Puede utilizar el Chrome Emulación de tipo de medio como se acepta en el post Consulte imprimir css en el navegador.

ACTUALIZACIÓN 21/11/2017

El documento actualizado de DevTools 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 comandos . (tl;dr Cmd + Shift + P (Mac) o Ctrl + Shift + P (Windows, Linux))
2. Empieza a escribir Renderizando y seleccionando Show Rendering.
3. Para el menú desplegable Emular medios 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 sobre 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 de DevTools haciendo clic en Más anulaciones * * * más anula el icono en la esquina superior derecha de la ventana del navegador. A continuación, seleccione Media en el cajón de emulación.

ACTUALIZACIÓN 12/04/2016

Desafortunadamente, parece que los documentos no se han actualizado en lo que respecta a la emulación de impresión. Sin embargo, el Emulador de Medios Impresos se ha movido (de nuevo):

  1. Abrir Chrome DevTools
  2. Pulsa esc en tu teclado
  3. Haga clic ⋮ (puntos suspensivos verticales)
  4. Elija Renderización
  5. Tick Emular medios impresos

Ver captura de pantalla a continuación:

configuración de renderizado 12/04/2016

ACTUALIZACIÓN 28/06/2016

Google Developers Docs alrededor de 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 la página principal de DevTools menú, seleccione Más herramientas > Configuración de renderizado , y luego habilite la casilla de verificación emular medios con el menú desplegable establecido en imprimir.

configuración de renderizado 28/06/2016

ACTUALIZACIÓN 24/05/2016

El nombre de los ajustes ha cambiado una vez más:

Para ver una página en modo de vista previa de impresión, abra el menú principal de DevTools, seleccione Más Herramientas > , y luego habilitar el Emular CSS Media casilla de verificación con el menú desplegable establecido en print.

emular medios CSS

 174
Author: Patrik Affentranger,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-21 09:43:09

En Firefox puedes escribir Shift+F2 para abrir una línea de comandos de la barra de herramientas del desarrollador, y luego escribir media emulate print

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

 160
Author: Szymon Świtała,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-05 08:47:24

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

Busque en el menú CSS. Hay un menú para deshabilitar y habilitar hojas de estilo individuales y un menú "Mostrar por tipo de medio" también.

También, 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, puede elegir "Mostrar estilos de impresión"

 20
Author: slolife,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-01 17:57:01

No usaría ningún método de prueba que no implique vista previa de impresión. Hay demasiadas diferencias: las imágenes de fondo no funcionan en absoluto en la impresión, pero aparecen en contextos de pantalla normales siendo la principal de ellas.

En Chrome, control+p va inmediatamente a la vista previa de impresión. (Olvídate de pasar el ratón por la barra de menú). Eso es bastante fácil.

 10
Author: Faust,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-01 16:34:22

Simplemente puede deshabilitar sus estilos de pantalla y cambiar su tipo de medio a "pantalla" para su hoja de estilos de impresión mientras realiza la 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 todavía te da una idea bastante buena.

 5
Author: Leo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-01 16:12:33

Simple para mí (no tener @screen partes o similar1) con FF:

  • poner el @media print { ... parte al final de su contenido CSS
  • out-comment solo la declaración wrapper/*@media print {*/ ... /*}*/
    • aplicando así el material de impresión a sus estilos inmediatamente anulándolos cuando corresponda
  • (estoy usando LiveReload por lo tanto, mi página del navegador se actualiza inmediatamente después de guardar cambios)
  • (de lo contrario, si no se usa LiveReload:) presione CTRL+R para recargar la página
  • ahora ya puede hacer muchos ajustes típicos de CSS de impresión (estilo de fuente, tamaño de fuente, espaciamientos, colores) donde uno no necesita la vista previa de impresión todavía
  • pulse ALT+F+V para abrir la vista previa de impresión y ALT+W para cerrar de nuevo

1: si uno los tiene, out - / in-comentándolos, dependiendo de su medios probados, puede no ser un gran problema de lo contrario

 3
Author: Andreas Dietrich,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-11 01:19:50

Como se describe en este otro post ( Utilizando el Inspector de Elementos de Chrome en el modo de vista previa de impresión?), puede utilizar chrome para emular simplemente la hoja de estilo de impresión. Esto es genial, ya que puede usar el inspector para ver de dónde vienen los estilos en lugar de adivinar cuando vea que aparece el cuadro de diálogo imprimir.

Acceda al diálogo de Configuración de anulaciones haciendo clic en el icono de engranaje en la esquina inferior derecha del Inspector de Elementos de Chrome. A continuación, seleccione imprimir como medio de destino tipo.

Impresionante!

 2
Author: Charity,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:10:47

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

Desafortunadamente, no parece que las herramientas para desarrolladores sean muy útiles ya que es esencialmente un PDF incrustado.

Por cierto, hay formas de eliminar el paso 2. Uno popular es LiveReload.

 1
Author: nafg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-12-14 22:40:05

Puede intentar eliminar temporalmente su hoja de estilo normal, y solo cargar en la de impresión con una etiqueta de enlace normal.

 0
Author: Andrew,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-01 16:16:07

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

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

Utilice 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 la misma impresión... menu en el mismo lugar, accesible con ctrl-p: imprimir en Cromo 62

 0
Author: Mojo Techno,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-28 13:13:03