Sugerencias para depurar hojas de estilo de impresión

Recientemente he estado trabajando en una hoja de estilo de impresión para un sitio web, y me di cuenta de que no tenía forma efectiva de ajustarlo. Una cosa es tener un ciclo de recarga para trabajar en el diseño en pantalla:

  • cambiar el código
  • pestaña de comando
  • recargar

pero todo ese proceso se vuelve mucho más arduo cuando intentas imprimir:

  • cambiar el código
  • pestaña de comando
  • recargar
  • impresión
  • entrecerrar los ojos al imprimir la imagen de vista previa
  • abrir PDF en Vista previa para una mayor inspección

¿Hay herramientas que me estoy perdiendo aquí? ¿El inspector de WebKit tiene una checkbox “pretender que este es un medio paginado”? ¿Hay algo de magia que Firebug ( estremecimiento ) puede hacer?

Hay una opción para eso en el inspector de Chrome.

  1. Abra el inspector DevTools (mac: Cmd + Shift + C , ventanas: Ctrl + Shift + C )
  2. Haga clic en el icono del modo Alternar dispositivo Alternar el botón de modo del dispositivo , ubicado en la esquina superior izquierda del panel DevTools. (ventanas: Ctrl + Shift + M , mac: Cmd + Shift + M ).
  3. Haga clic en Más anulaciones más anulaciones icono en la esquina superior derecha de la ventana del navegador para abrir el cajón devtools.
  4. A continuación, seleccione Medios en el cajón de emulación y marque la checkbox Medios de CSS .

    enter image description here

Esto debería funcionar.

Actualización: los menús han cambiado en DevTools. Ahora se puede encontrar haciendo clic en el menú “tres puntos” en la esquina superior derecha> Más herramientas> Configuración de reproducción> Emular medios> imprimir.

Fuente: página de Google DevTools *

Supongo que desea tanto control de la ventana impresa como sea posible sin usar un enfoque de HTML a PDF … Utilice la pantalla de @media para depurar – @media print para css final

Los navegadores modernos pueden darle una visión rápida de lo que sucederá en el momento de la impresión usando pulgadas y puntos en una @media query .

 @media screen and (max-width:8.5in) { /* resize your window until the event is triggered */ html { width:8.5in; } body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */ ... } 

Una vez que su navegador muestre “pulgadas”, tendrá una mejor idea de qué esperar. Este enfoque debería terminar con el método de vista previa de impresión. Todas las impresoras trabajarán con pt y in unidades, y el uso de la técnica @media le permitirá ver rápidamente lo que va a suceder y ajustarse en consecuencia. Firebug (o equivalente) agilizará absolutamente ese proceso. Cuando haya agregado sus cambios a @media, tiene todo el código que necesita para un archivo CSS vinculado utilizando el atributo media = "print" ; simplemente copie / pegue las reglas de la pantalla @media en el archivo al que se hace referencia.

Buena suerte. La web no fue construida para imprimir. Crear una solución que ofrezca todo su contenido, estilos equivalentes a lo que se ve en el navegador puede ser imposible a veces. Por ejemplo, un diseño fluido para una audiencia predominantemente de 1280 x 1024 no siempre se traduce fácilmente en una impresión láser agradable y nítida de 8.5 x 11.

Referencia W3C para purusal: http://www.w3.org/TR/css3-mediaqueries/

En Chrome v41, está ahí, pero en un lugar ligeramente diferente.

enter image description here

Chrome 48 puede depurar estilos de impresión dentro de la pestaña Renderización .

Haga clic en el ícono de menú arriba a la derecha del inspector y Configuración de representación .

Editar
Para Chrome 58, la ubicación ha cambiado a Web Inspector> Menú> Más herramientas> Renderización

Hay una manera fácil de depurar su hoja de estilo de impresión sin cambiar ningún atributo de medios en su código HTML (por supuesto, como se señaló, no resuelve el problema de ancho / páginas):

  • Use la extensión Firefox + Web Developer.
  • En el menú Desarrollador web, elija CSS / Mostrar CSS por Tipo de medio / Imprimir
  • Regrese al menú del desarrollador web, elija Opciones / Persistir características

Ahora está viendo el CSS impreso y puede volver a cargar su página indefinidamente. Una vez que haya terminado, desmarque “Persistir características” y vuelva a cargar, obtendrá la pantalla CSS de nuevo.

HTH.

La interfaz de usuario de Chrome es diferente a partir de v53.

No necesito usar esta característica a menudo, pero cada vez que lo hago, me lleva mucho tiempo averiguar dónde se movió el equipo de Chrome desde la última vez que grabé ciclos tratando de rastrearlo.

Observe que es el … menú en el panel Herramientas del desarrollador, no el … en el panel del navegador Chrome.

Vista previa de la impresora a partir de v53 en MacOS

Ahora desplácese hacia abajo en la sección Rendering. A menudo está debajo del doblez.

Siguiendo la respuesta de rflnogueira, la configuración actual de Chrome (40.0. *) Se verá a continuación:

emulación de CSS cromo print

Simplemente muestre la hoja de estilo de impresión en su navegador usando media="screen" mientras depura. La vista previa de impresión usa el mismo motor de representación que el modo de navegación normal para que pueda obtener resultados precisos al usarlo.

Si tiene una función de impresión que reescribe el contenido de la página en una nueva ventana con la hoja de estilo de impresión a la que se hace referencia, obtendrá una idea mucho mejor de cómo se verá en papel, y podrá depurarla con los gustos de Firebug también.

Aquí hay un ejemplo de cómo se puede hacer esto con JavaScript / jquery

  $("#Print").click(function () { var a = window.open('', '', 'scrollbars=yes,width=1024,height=768'); a.document.open("text/html"); a.document.write(""); a.document.write(''); a.document.write(''); a.document.write(""); a.document.write($('#Content').html()); a.document.write(''); a.document.close(); a.print(); }); 

enter image description here

En DreamWeaver hay una barra de herramientas que muestra prácticamente cualquier opción de renderizado que desee: pantalla, impresión, medios portátiles, pantalla de proyección, medios de televisión, hojas de estilo de tiempo de destino, etc. Esto es lo que uso especialmente porque: muestra instantáneamente una vista previa con 1 solo presionar un botón.

Utilizo macros para enviar clics de tecla y de mouse repetidamente. En Windows, AutoHotKey es un excelente software y, en OS X, puede leer acerca de Automator, una especie de AHK alternativo para OsX .

En Windows (reemplazar Ctrl por Cmd en OS X) “Ctrl-s / cambiar a la ventana Fx donde sea que esté en la lista de ventanas abiertas / Ctrl-r” vinculado a 1 tecla no utilizada evita la frustración de tareas poco interesantes y finalmente salvará mis arms de RSI 🙂