Una guía sobre el estado de las hojas de estilo de impresión en 2018

Hoy, me gustaría volver a un tema que ya se ha tratado en Smashing Magazine en el pasado: el tema de la hoja de estilo impresa. En este caso, estoy hablando de imprimir páginas directamente desde el navegador. Es una experiencia que puede llevar a la frustración con la impresión de imágenes enormes (e incluso publicidad). Sin embargo, solo a veces, agrega un poco de placer cuando una página bien optimizada sale de la impresora usando un mínimo de tinta y papel y asegurando que todo sea fácil de leer.

Este artículo explorará cómo podemos crear mejor esa segunda experiencia. Echaremos un vistazo a cómo debemos incluir estilos de impresión en nuestras páginas web, y veremos las especificaciones que realmente se destacan una vez que se imprimen. Averiguaremos sobre el estado del soporte del navegador y cómo probar mejor nuestros estilos de impresión. Luego le daré algunos consejos sobre qué hacer cuando una hoja de estilo de impresión no es suficiente para sus necesidades de impresión.

Lugares clave para soporte de impresión

Si aún no ha implementado ningún estilo de impresión en su sitio, hay algunos lugares clave donde una experiencia de impresión sólida será útil para sus usuarios. Por ejemplo, muchos usuarios querrán imprimir una página de confirmación de la transacción después de realizar una compra o una reserva, incluso si envía los detalles por correo electrónico.

Cualquier información que su visitante pueda querer usar cuando está lejos de su computadora también es un buen candidato para una hoja de estilo de impresión. Lo más común que imprimo son recetas. Podría cargarlos en mi iPad, pero a menudo es más conveniente simplemente imprimir la receta para colocarla en la puerta del refrigerador mientras cocino. Otros ejemplos de este tipo podrían ser direcciones o información de viaje. Cuando viaja al extranjero y no siempre tiene acceso a los datos, estas impresiones pueden ser invaluables.

También se suelen imprimir materiales de referencia de cualquier tipo. Para muchas personas, poder tomar notas en copias en papel es la forma en que mejor aprenden. Nuevamente, significa que se puede acceder a la información en un formato sin conexión. Es fácil para nosotros preguntarnos por qué la gente quiere imprimir páginas web, sin embargo, nuestro trabajo a menudo es hacer que el contenido sea accesible, en el mejor formato para nuestros visitantes. Si ese mejor formato se imprime en papel, ¿quiénes somos nosotros para discutir?

¿Por qué se imprimiría esta página?

Una buena pregunta para hacerse al decidir qué contenido incluir u ocultar en la hoja de estilo de impresión es: "¿Por qué el usuario está imprimiendo esta página?" Bueno, tal vez hay una receta que les gustaría seguir mientras cocinan en la cocina o llevar con ellos cuando van de compras para comprar ingredientes. O les gustaría imprimir una página de confirmación después de comprar un boleto como prueba de reserva. O tal vez les gustaría que se imprimiera un recibo o una factura (o que se imprimiera en PDF) para almacenarlo en las cuentas, ya sea en papel o electrónicamente.

Considerar el uso del documento impreso puede ayudarlo a producir una versión impresa de su contenido que sea más útil en el contexto en el que se encuentra el usuario cuando se refiere a esa impresión.

flujo de trabajo

Una vez que hayamos decidido incluir estilos de impresión en nuestro CSS, debemos agregarlos a nuestro flujo de trabajo para asegurarnos de que cuando hagamos cambios en el diseño, también incluyamos esos cambios en la versión impresa.

Adición de estilos de impresión a una página

Para habilitar una “hoja de estilos de impresión” lo que estamos haciendo es decirle al navegador para qué sirven estas reglas CSS cuando se imprime el documento. Un método para hacer esto es vincular una hoja de estilo adicional usando el elemento <link> .

 <link rel="stylesheet" media="print" href="print.css">

Este método mantiene sus estilos de impresión separados de todo lo demás que podría considerar más ordenado, sin embargo, eso tiene desventajas.

La hoja de estilo vinculada crea una solicitud adicional al servidor. Además, esa separación agradable y ordenada de los estilos de impresión de otros estilos puede tener un inconveniente. Si bien puede tener cuidado de actualizar los estilos separados antes de publicarse, la hoja de estilo puede verse afectada debido a que no está a la vista y, por lo tanto, no se tiene en cuenta; en última instancia, se vuelve inútil ya que las funciones se agregan al sitio pero no se reflejan en los estilos de impresión.

El método alternativo para incluir estilos de impresión es usar @media de la misma manera que incluye CSS para ciertos puntos de interrupción en su diseño receptivo. Este método mantiene todo el CSS junto para una característica. Estilos para puntos de corte angostos a anchos y estilos para impresión. Junto con las consultas de funciones con @supports , esto fomenta una forma de desarrollo que garantiza que todo el CSS para una función de diseño se mantenga unido.

 @media print { }

Sobrescribir CSS de pantalla o crear reglas separadas

La mayor parte del tiempo es probable que descubra que el CSS que usa para la visualización en pantalla funciona para imprimir con algunos pequeños ajustes. Por lo tanto, solo necesita escribir CSS para imprimir, para cambios en ese CSS básico. Puede sobrescribir un tamaño de fuente o familia, pero dejar otros elementos en el CSS solo.

Si realmente desea tener estilos completamente separados para imprimir y comenzar con una pizarra en blanco, deberá envolver el resto de los estilos de su sitio en una consulta de medios con la palabra clave de pantalla.

 @media screen { }

En ese sentido, si está utilizando consultas de medios para su diseño receptivo, es posible que las haya escrito para la pantalla.

 @media screen and (min-width: 500px) { }

Si desea que estos estilos se utilicen al imprimir, debe eliminar la palabra clave de screen . En la práctica, sin embargo, a menudo encuentro que si trabajo "primero en dispositivos móviles", el diseño móvil de una sola columna es un muy buen punto de partida para mi diseño de impresión. Al tener las consultas de medios que traen los diseños más complejos solo para la pantalla, tengo mucho menos sobrescritura de estilos para imprimir.

Agregue sus estilos de impresión a sus bibliotecas de patrones y guías de estilo

Para ayudar a garantizar que sus estilos de impresión se vean como una parte integral del diseño del sitio, agréguelos a su guía de estilo o biblioteca de patrones para el sitio, si tiene una. De esa manera, siempre hay un recordatorio de que los estilos de impresión existen y que cualquier patrón nuevo creado deberá tener una versión de impresión equivalente. De esta manera, está dando visibilidad a los estilos de impresión como ciudadanos de primera clase de su sistema de diseño.

Conceptos básicos de CSS para imprimir

Cuando se trata de crear el CSS para imprimir, hay tres cosas que es probable que te encuentres haciendo. Querrá ocultar y no mostrar contenido que es irrelevante cuando se imprime. También puede agregar contenido para que la versión impresa sea más útil. También es posible que desee ajustar las fuentes u otros elementos de su página para optimizarlos para la impresión. Echemos un vistazo a estas técnicas.

Ocultar contenido

En CSS, el método para ocultar contenido y también evitar la generación de cuadros es usar la propiedad de visualización con un valor de none .

 .box { display: none; }

Usando display: none colapsará el elemento y todos sus elementos secundarios. Por lo tanto, si tiene una galería de imágenes marcada como una lista, todo lo que necesita hacer para ocultar esto cuando se imprime es configurar display: none en el ul .

Las cosas que quizás desee ocultar son imágenes que serían innecesarias cuando se impriman, navegación, paneles publicitarios y áreas de la página que muestran enlaces a contenido relacionado, etc. Consultar por qué un usuario podría imprimir la página puede ayudarlo a decidir qué eliminar.

Insertar contenido

Puede haber algún contenido que tenga sentido mostrar cuando se imprime la página. Podría tener algún contenido configurado para display: none en una hoja de estilo de pantalla y mostrarlo en su hoja de estilo de impresión. Además, sin embargo, puede usar CSS para exponer contenido que normalmente no se muestra en la pantalla. Un buen ejemplo de esto sería la URL de un enlace en el documento. En su documento de pantalla, un enlace normalmente mostraría el texto del enlace en el que luego se puede hacer clic para visitar esa nueva página o sitio web externo. Sin embargo, cuando no se pueden seguir los enlaces impresos, podría ser útil que el lector pudiera ver la URL en caso de que desee visitar el enlace en otro momento.

Logramos esto mediante el uso de contenido generado CSS. El contenido generado le brinda una forma de insertar contenido en su documento a través de CSS. Al imprimir, esto se vuelve muy útil.

Puede insertar una cadena de texto simple en su documento. El siguiente ejemplo apunta al elemento con una clase de wrapper e inserta antes de él la cadena, "Consulte www.mysite.com para obtener la última versión de esta información".

 .wrapper::after { content: "Please see www.mysite.com for the latest version of this information."; }

Puede insertar cosas que ya existen en el documento, sin embargo, un ejemplo sería el contenido del enlace href . Agregamos contenido generado después de cada instancia de con a atributo de href y el contenido que insertamos es el valor del atributo href , que será el enlace.

 a[href]:after { content: " (" attr(href) ")"; }

Puede usar el selector CSS :not más nuevo para excluir enlaces internos si lo desea.

 a[href^="http"]:not([href*="example.com"]):after { content: " (" attr(href) ")"; }

Hay algunos otros consejos útiles como este en el artículo, "Me olvidé por completo de las hojas de estilo de impresión", escrito por Manuel Matuzovic.

Estilo de impresión avanzado

Si su versión impresa encaja perfectamente en una página, entonces debería poder crear una hoja de estilo de impresión de manera relativamente simple utilizando las técnicas de la última sección. Sin embargo, una vez que tiene algo que se imprime en varias páginas (y en particular si contiene elementos como tablas o figuras), es posible que los elementos se dividan en páginas nuevas de una manera subóptima. También puede querer controlar cosas sobre la página en sí, por ejemplo, cambiar el tamaño del margen.

CSS tiene una manera de hacer estas cosas, sin embargo, como veremos, el soporte del navegador es irregular.

Medios paginados

La especificación de medios paginados de CSS se abre con la siguiente descripción de su función.

“Este módulo CSS especifica cómo se generan y distribuyen las páginas para contener contenido fragmentado en una presentación paginada. Agrega funcionalidad para controlar los márgenes de página, el tamaño y la orientación de la página, y los encabezados y pies de página, y amplía el contenido generado para permitir la numeración de páginas y la ejecución de encabezados y pies de página”.

La pantalla es un medio continuo ; si hay más contenido, hacemos scroll para verlo. No existe el concepto de que se divida en páginas individuales. Tan pronto como estamos imprimiendo, damos salida a una página de tamaño fijo, que se describe en las especificaciones como medios paginados . La especificación de medios paginados no se ocupa de cómo se fragmenta el contenido entre páginas, lo abordaremos más adelante. En su lugar, analiza las características de las propias páginas.

Necesitamos una forma de dirigirnos a una página individual y lo hacemos usando la regla @page . Esto se usa de manera muy similar a un selector regular, en el que apuntamos a @page y luego escribimos CSS para que lo use la página. Un ejemplo simple sería cambiar el margen en todas las páginas creadas cuando imprima su documento.

 @page { margin: 20px; }

Puede dirigirse a páginas específicas con los selectores de pseudoclase extendidos :left y :right . La primera página se puede orientar con el selector de pseudoclase :first y las páginas en blanco causadas por saltos de página se pueden seleccionar con :blank . Por ejemplo, para establecer un margen superior solo en la primera página:

 @page :first { margin-top: 250pt; }

Para establecer un margen mayor en el lado derecho de una página de la izquierda y el lado izquierdo de una página de la derecha:

 @page :left { margin-right: 200pt; } @page :right { margin-left: 200pt; }

La especificación define la posibilidad de insertar contenido en los márgenes creados, sin embargo, ningún navegador parece admitir esta función. Describo esto en mi artículo sobre la creación de hojas de estilo para usar con agentes de usuario específicos de impresión, Diseño para impresión con CSS.

Fragmentación de CSS

Mientras que el módulo de medios paginados se ocupa de los cuadros de página en sí, el módulo de fragmentación de CSS detalla cómo se divide el contenido entre fragmentainers . Un fragmentainer (o contenedor de fragmentos ) es un contenedor que contiene una parte de un flujo fragmentado. Este es un flujo que, cuando llega a un punto en el que se desbordaría, irrumpe en un nuevo contenedor.

Los contextos en los que encontrará fragmentación actualmente se encuentran en medios paginados, por lo tanto, al imprimir y también al usar el diseño de varias columnas y el contenido se rompe entre los cuadros de columna. La especificación de fragmentación define varias reglas para dividir las propiedades CSS que le brindan cierto control sobre cómo el contenido se divide en nuevos fragmentos, en estos contextos. También define cómo se divide el contenido en la especificación de Regiones CSS, aunque esto no es algo utilizable entre navegadores en este momento.

Y, hablando de navegadores, la fragmentación es un poco complicada en términos de soporte en este momento. Las tablas de compatibilidad del navegador para cada propiedad en MDN parecen ser precisas en cuanto al soporte, sin embargo, será necesario probar cuidadosamente el uso de estas propiedades.

Propiedades antiguas de CSS2

Además de las propiedades break-* de CSS Fragmentation Level 3, tenemos propiedades page-break-* que provienen de CSS2. En términos de especificaciones, estas han sido reemplazadas por las nuevas propiedades break-* , ya que son más genéricas y se pueden usar en los diferentes contextos en los que ocurre la ruptura. No hay mucha diferencia entre una página y un salto multicolor. Sin embargo, en términos de compatibilidad con navegadores, existe una mejor compatibilidad con navegadores para las propiedades más antiguas. Esto significa que es posible que necesite usarlos en el momento actual para controlar la rotura. Los navegadores que implementan las propiedades más nuevas deben alias de las más antiguas en lugar de descartarlas.

En los ejemplos que siguen, mostraré tanto la nueva propiedad como la antigua donde exista.

break-before y break-after

Estas propiedades se ocupan de los saltos entre cuadros y aceptan los siguientes valores, siendo el valor inicial automático. Los últimos cuatro valores no se aplican a los medios paginados, sino que se aplican a varias columnas y regiones.

• auto
• avoid
• avoid-page
• page
• left
• right
• recto
• verso
• avoid-column
• column
• avoid-region
• region

Las propiedades anteriores de page-break-before y page-break-after aceptan un rango de valores más pequeño.

• auto
• always
• avoid
• left
• right
• inherit

Para causar siempre un salto de página antes de un elemento h2 , usaría lo siguiente:

 h2 { break-before: page; }

Para evitar que un párrafo se separe del encabezado inmediatamente anterior:

 h2, h3 { break-after: avoid-page; }

La antigua propiedad page-break-* para provocar siempre un salto de página antes de h2 :

 h2 { page-break-before: always; }

Para evitar que un párrafo se separe del encabezado inmediatamente anterior:

 h2, h3{ page-break-after: avoid; }

En MDN encuentre información y ejemplos de uso para las propiedades:

• romper antes
• descanso después
• página-salto-antes
• salto de página después

break-inside

Esta propiedad controla los saltos dentro de los cuadros y acepta los valores:

• auto
• avoid
• avoid-page
• avoid-column
• avoid-region

Al igual que con las dos propiedades anteriores, hay un page-break-inside de CSS2, que acepta los valores:

• auto
• avoid
• inherit

Por ejemplo, quizás tenga una figure o una table y no quiera que la mitad termine en una página y la otra mitad en otra página.

 figure { break-inside: avoid; }

Y al usar la propiedad anterior:

 figure { page-break-inside: avoid; }

En MDN:

• irrumpir en el interior
• página-salto-dentro

huérfanos y viudas

La especificación de Fragmentación también define las propiedades orphans y widows . La propiedad de orphans define cuántas líneas se pueden dejar en la parte inferior de la primera página cuando el contenido, como un párrafo, se divide entre dos páginas. La propiedad de las widows define cuántas líneas pueden quedar en la parte superior de la segunda página.

Por lo tanto, para evitar terminar con una sola línea al final de una página y una sola línea en la parte superior de la página siguiente, puede usar lo siguiente:

 p { orphans: 2; widows: 2; }

Las propiedades widows y orphans están bien soportadas (la implementación del navegador que falta es Firefox).

En MDN:

• viudas
• huérfanos

box-decoration-break

La propiedad final definida en el módulo Fragmentación es box-decoration-break . Esta propiedad se ocupa de si los bordes, los márgenes y el relleno rompen o envuelven el contenido. Los valores que acepta son:

• slice
• clone

Por ejemplo, si mi área de contenido tiene un borde gris de 10 píxeles e imprimo el contenido, entonces la forma predeterminada en que esto se imprimirá es que el borde continuará en cada página; sin embargo, solo se ajustará al final del contenido. . Así que tenemos un descanso antes de pasar a la página siguiente y continuar.

Si uso box-decoration-break: clone , el borde y cualquier relleno y margen se completarán en cada página, dando así a cada página un borde gris.

Actualmente, esto solo funciona para Paged Media en Firefox, y puedes obtener más información sobre box-decoration-break en MDN.

Compatibilidad con navegador

Como ya se mencionó, el soporte del navegador es irregular para los medios paginados y la fragmentación. En lo que respecta a la fragmentación, un problema adicional es que se debe especificar e implementar la ruptura para cada método de diseño. Si esperaba usar Flexbox o CSS Grid en las hojas de estilo de impresión, probablemente se sentirá decepcionado. Puede consultar los errores de Chrome para Flexbox y para Grid.

La mejor sugerencia que puedo dar en este momento es mantener sus hojas de estilo de impresión razonablemente simples. Agregue propiedades de fragmentación, incluidas las antiguas propiedades page-break-* y las nuevas propiedades. Sin embargo, acepte que es posible que no funcionen en todos los navegadores. Y, si encuentra frustrante la falta de soporte del navegador, plantee estos problemas con los navegadores o vote por los problemas ya planteados. La fragmentación, en particular, debe tratarse como una sugerencia en lugar de un comando, incluso cuando se admite. Sería posible ser tan específico acerca de dónde y cuándo desea que se rompan las cosas que es casi imposible diseñar las páginas. Debe asumir que a veces puede obtener un rompimiento subóptimo.

Prueba de hojas de estilo de impresión

Probar las hojas de estilo de impresión puede ser algo aburrido, ya que generalmente requiere usar la vista previa de impresión o imprimir en un PDF repetidamente. Sin embargo, las DevTools del navegador nos lo han facilitado un poco. Tanto Chrome como Firefox tienen una forma de ver solo los estilos de impresión.

Firefox

Abra la barra de herramientas del desarrollador y luego escriba media emulate print en el indicador.

Cromo

Abra DevTools, haga clic en el ícono de tres puntos y luego seleccione "Más herramientas" y "Renderizado". A continuación, puede seleccionar imprimir en Emular CSS Media.

Esto solo será útil para probar cambios en el diseño CSS, contenido oculto o generado. No puede ayudarlo con la fragmentación: deberá imprimir o imprimir en PDF para eso. Sin embargo, le ahorrará algunos viajes de ida y vuelta a la impresora y puede ayudarlo a verificar a medida que desarrolla nuevas partes del sitio que todavía está ocultando y mostrando las cosas correctas.

Qué hacer cuando una hoja de estilo de impresión no es suficiente

En un mundo ideal, los navegadores habrían implementado más de la especificación de medios paginados al imprimir directamente desde el navegador, y la fragmentación se implementaría de manera más completa y consistente. Sin duda, vale la pena plantear los errores que encuentre al imprimir desde el navegador con los navegadores en cuestión. Si no solicitamos que estas cosas se arreglen, seguirán siendo de baja prioridad para ser reparadas.

Si necesita tener un alto nivel de soporte de impresión y quiere usar CSS, actualmente necesitaría usar un agente de usuario específico para impresión, como Prince. Detallo cómo puede usar CSS para dar formato a los libros cuando se exportan a Prince en mi artículo "Diseñar para imprimir con CSS".

Prince también está disponible para instalar en su servidor con el fin de generar documentos bien impresos usando CSS en la web, sin embargo, tiene un precio alto. Una alternativa es un servidor como DocRaptor que ofrece una API además del motor de renderizado Prince.

Existen generadores de HTML y CSS a PDF de código abierto, como wkhtmltopdf, pero la mayoría utiliza motores de representación de navegador para crear la salida impresa y, por lo tanto, tienen las mismas limitaciones que los navegadores cuando se trata de implementar las especificaciones de fragmentación y medios paginados. Una excepción es WeasyPrint, que parece tener su propia implementación y admite funciones ligeramente diferentes, aunque no tiene tantas funciones como Prince.

Encontrará más información sobre los agentes de usuario para imprimir en el sitio print-css.rocks.

Otros recursos

Debido al hecho de que la impresión desde CSS realmente ha avanzado muy poco en los últimos años, muchos recursos antiguos en Smashing Magazine y en otros lugares siguen siendo válidos. Se pueden encontrar algunos consejos y trucos adicionales en los siguientes recursos. Si ha descubierto un flujo de trabajo de impresión útil o un consejo técnico, agréguelo a los comentarios a continuación.

• "Me olvidé por completo de las hojas de estilo de impresión", Manuel Matuzovic, UX Collective
• "Enfoques de hoja de estilo de impresión: lista negra frente a lista blanca", Chris Coyier, CSS-Tricks
• “La hoja de estilo de impresión perfecta”, Andreas Hecht, Noupe
• "Cómo configurar una hoja de estilo de impresión", Christian Krammer, Smashing Magazine
• “5 poderosos consejos y trucos para imprimir hojas de estilo”, Dudley Storey, Smashing Magazine