Medios impresos

Los medios impresos en CSS se gestionan a través de la regla @media print. A diferencia de los medios auditivos, esta hoja de estilos es crucial y totalmente soportada por todos los navegadores modernos. Te permite transformar una página web interactiva y llena de colores en un documento limpio, legible y optimizado para convertirse en papel o en un archivo PDF.

Buenas Prácticas Rápidas

Usa unidades físicas
Para fuentes y márgenes en pantallas usas px, rem o %. En impresión, prefiere unidades reales como centímetros (cm), milímetros (mm) o puntos (pt).
No fijes alturas (height)
Deja que el texto fluya libremente de forma vertical para que el navegador decida cuántas páginas necesita. Si fijas height: 100vh;, podrías congelar el documento en una sola página impresa.

Cuando un usuario presiona Ctrl + P (CMD), el navegador activa estas reglas de inmediato.

1. Dentro de tu archivo CSS principal (Recomendada)

/* Estilos normales para la pantalla aquí... */
.sidebar {display: block;}

/* Estilos exclusivos para la impresora */
@media print {
   body {
      font-family: 'Times New Roman',Georgia,serif;     /* Las tipografías Serif se leen mejor en papel */
      color: #000000;
      background: none;
   }
  
   /* Ocultamos elementos innecesarios en papel */
   .sidebar, .nav, .footer, .btn-interactivos {
      display: none !important;
   }
}

2. Separado en un archivo externo

/* HTML */
<link rel=stylesheet href=impresion.css media=print>
/* CSS */
@media print {
   @page {
      size: A4 vertical;             /* Define el tamaño del papel y orientación (portrait/landscape) */
      margin: 2cm;                   /* Margen de seguridad para la impresora */
   }
}

3. Control de Páginas con @page

La regla @page te permite configurar los márgenes físicos del papel de manera global.

@media print {
   @page {
      size: A4 vertical;          /* Define el tamaño del papel y orientación (portrait/landscape) */
      margin: 2cm;                /* Margen de seguridad para la impresora */
   }
}

4. Saltos de Página (break-before, break-after, break-inside)

Evitan que un contenido importante se corte de mala manera entre dos páginas (por ejemplo, que el título de un artículo quede al final de la página 1 y el texto comience en la página 2).

@media print {
   h2 {
      break-before: always; /* Cada subtema inicia en hoja nueva */
   }
   .tarjeta-producto, tr {
      break-inside: avoid; /* No cortes una fila de tabla a la mitad */
   }
}

5. Mostrar URLs de los enlaces

En papel, los hipervínculos pierden su función porque no se puede hacer "clic" en ellos. Puedes usar pseudoelementos para inyectar la URL real justo al lado del texto:

@media print {
   /* Al imprimirse, mostrará: Visita nuestro sitio (https://ejemplo.com) */
   a[href]:after {
      content: " (" attr(href) ")";
      font-size: 0.9em;
      color: #555;
   }
   /* Evitamos mostrar enlaces internos o anclas que no sirven en papel */
   a[href^="#"]:after {
      content: "";
   }
}

6. Forzar gráficos de fondo (print-color-adjust)

Por defecto, la mayoría de los navegadores eliminan los colores de fondo (background-color) e imágenes de fondo para ahorrar tinta del usuario. Si necesitas obligatoriamente que se impriman (por ejemplo, para gráficos estadísticos o manuales de identidad), puedes forzarlo:

@media print {
   .grafico-importante {
      -webkit-print-color-adjust: exact; /* Para Chrome, Safari, Edge */
      print-color-adjust: exact;         /* Estándar actual */
   }
}