La consulta de medios impresos es la primitiva de diseño responsivo más antigua que existe, y la mayoría de los sitios la dejan vacía, por lo que Ctrl+P incluye barras de encabezado, pancartas de cookies y un fondo oscuro que desperdicia tinta. Cinco reglas arreglan todo su sitio para el papel.

@media print {
  header nav, footer, .cookie, aside { display: none; }

  body { background: white; color: black; }
  a { text-decoration: none; }
  article a::after { content: " (" attr(href) ")";
    font-size: 0.85em; }

  details { display: block; }
  details > *:not(summary) { display: block; }
}

Las cinco reglas que se amortizan solas

  • Oculte la navegación, los enlaces de pie de página y cualquier cromo superpuesto: los lectores en papel navegan a simple vista, no hacen clic.
  • Forzar valores claros: el modo oscuro es una preferencia de la pantalla y, si se coloca mal en el papel, quema tinta y se vuelve granulado.
  • Agregar destinos de enlace en los enlaces de texto del artículo: una cita impresa en la que no puede hacer clic es una cita falsa; attr(href) lo hace real.
  • Expanda el contenido plegable, los mismos paneles de detalles de los acordeones zero-JS: los paneles contienen la respuesta y desaparecen silenciosamente en el papel sin esta regla.
  • Evite elementos de posición fija; Salto de página en el interior: evitar en tarjetas y figuras mantiene una tabla entera en lugar de romperla entre hojas.

La reseña que lo hace real.

  1. Imprima la página de inicio, un artículo y la página de búsqueda en un PDF real; Tres páginas son lo que la mayoría de los sitios parecen vacíos.
  2. Verifique la cobertura de tinta: las áreas sólidas grandes tienen un valor predeterminado de "fondos sin impresión" en la mayoría de los navegadores, por lo que los matices sutiles pueden desaparecer sin pasarse por alto.
  3. Pruebe la regla de expansión de detalles con cada componente plegable del sitio, no solo con uno.
  4. Considere las propiedades de salto de página para cualquier tarjeta o cuadro de cotización; cinco minutos aquí deciden si una receta abarca dos hojas.

El ángulo de la equidad es genial: alguien en una zona muerta con una impresora térmica de recibos Bluetooth también es un lector real, y la hoja de estilo de impresión es la forma en que su sitio los respeta por el costo de un bloque de medios.