Hojas de estilo de impresión: hacer que una página web sea utilizable en papel y como PDF

Objetivo

Una página que, al imprimirse o guardarse como PDF, contenga el contenido y nada más, con un tipo de letra legible, tablas intactas, destinos de enlace visibles y saltos de página en lugares razonables.

Requisitos previos

Marcado semántico (las reglas de impresión se dirigirán a nav, header, footer, aside, main), una vista previa de impresión del navegador para hacer pruebas, y conocer los mecanismos que describe la guía de impresión de MDN: @media print para reglas exclusivas de impresión, la regla @page para las dimensiones de página, la orientación y los márgenes, los eventos beforeprint/afterprint para ajustar el documento en torno a una solicitud de impresión, y window.print() para activar el diálogo.

Pasos

1. Añade un bloque @media print al final de la hoja de estilo (la especificidad sigue aplicándose). Oculta el andamiaje de la interfaz: nav, header, footer, aside, .toolbar, button { display: none }; elimina el posicionamiento fixed y sticky, que de otro modo se repite en cada página.
2. Restablece la página: fondo blanco, texto negro, una tipografía serif o la fuente del cuerpo con un tamaño elegido para papel, y max-width: none en la columna de contenido para que ocupe todo el ancho de la página.
3. Expande lo que la pantalla oculta: abre los elementos details, muestra todos los paneles de pestañas y los cuerpos de acordeón, e imprime el texto truncado completo. Usa el evento beforeprint donde el CSS no llega (por ejemplo, listas virtualizadas que solo renderizan las filas visibles).
4. Muestra el destino de los enlaces: a[href^="http"]::after { content: " (" attr(href) ")" }, excluyendo los anclajes internos y los enlaces cuyo texto ya es la URL. Muestra los títulos de abbr de la misma manera si son relevantes.
5. Controla los saltos: break-inside: avoid en tablas, figuras, bloques de código y grupos tipo tarjeta; break-after: avoid en los encabezados para que no queden huérfanos al final de una página; break-before: page antes de las secciones principales cuando proceda; conserva thead con su valor por defecto display: table-header-group (no lo sobrescribas), porque los motores de impresión pueden repetir las filas de encabezado en cada página que ocupe una tabla.
6. Define @page { size: A4; margin: 2cm } (o letter), y considera @page :first para un margen distinto en la primera página.
7. Color: los navegadores suelen eliminar los colores de fondo y las imágenes al imprimir; donde un fondo tenga significado (chips de estado, resaltado de sintaxis), aplica print-color-adjust: exact únicamente a ese elemento, y da al resto un borde o una etiqueta de texto en su lugar.
8. Prueba la vista previa de impresión en dos navegadores distintos, tanto en vertical como en horizontal, y una vez como «guardar como PDF»; comprueba el número de páginas y que ningún selector demasiado amplio haya ocultado algo importante.

Resultado esperado

Imprimir produce un documento compacto con todo el contenido, sin navegación, con código y tablas legibles, y con URL que el lector puede teclear a partir del papel.

Límites y base de verificación

El comportamiento sigue la documentación citada de MDN; el soporte de saltos de página y las funciones de @page varían entre motores, y los generadores de PDF headless tienen sus propios valores por defecto. El contenido interactivo (mapas, gráficos dibujados en canvas) necesita una imagen estática de reserva proporcionada aparte.

Oculta el andamiaje del sitio, no cualquier header

header, footer y aside están delimitados por su sección más cercana, de modo que un simple header { display: none } también elimina el bloque de título de un artículo, las notas al pie de una sección y la atribución de una cita. En su lugar, apunta al andamiaje de nivel de página por posición o por clase:

@media print {
  body > header, body > footer, body > nav,
  .site-sidebar, .toolbar { display: none; }
  article header, article footer { display: block; }
}

Conserva los botones que muestran estado (un interruptor pulsado, la pestaña seleccionada) y oculta solo los controles sin significado en la versión impresa. Después, repite el paso 8 invirtiendo la pregunta: enumera lo que la vista de impresión debería contener y confirma que cada elemento está presente, en lugar de buscar lo que falta.