¿Cómo optimizar las páginas web para impresión…

Para optimizar las páginas para impresión, se utilizan consultas de medios CSS con el tipo print.

Ocultar elementos innecesarios: Se ocultan los elementos que no deben mostrarse en la impresión (navegación, pies de página, bloques de anuncios, botones).
```
/* Ocultar en impresión */
@media print {
  nav, footer, aside, .ad-block, button {
    display: none;
  }
}
```
Mostrar contenido oculto: Si hay contenido oculto en pantalla pero necesario para impresión (por ejemplo, URL completas de enlaces), se puede mostrar.
```
@media print {
  a[href]:after {
    content: " (" attr(href) ")"; /* Añade la URL después del enlace */
  }
}
```

Restablecer estilos: Restablecimiento de estilos específicos para pantalla: imágenes de fondo/color, sombras, márgenes, tamaños de fuente.

@media print {
  body {
    background: none !important; /* Elimina la imagen/color de fondo */
    color: #000; /* Texto negro para mejor legibilidad */
  }
  * {
    box-shadow: none !important; /* Elimina sombras */
    text-shadow: none !important; /* Elimina sombras del texto */
  }
  p, h1, h2, h3, h4, h5, h6 {
    orphans: 3; /* Previene líneas huérfanas al inicio/final de la página */
    widows: 3; /* Previene líneas huérfanas en el párrafo */
  }
}

Control de saltos de página: Uso de las propiedades page-break-before, page-break-after, page-break-inside para controlar los saltos de página.

@media print {
  article h2 {
    page-break-before: always; /* Comienza una nueva sección en una nueva página */
  }
  ul, ol {
    page-break-inside: avoid; /* Previene saltos dentro de listas */
  }
}

Optimización de imágenes y tablas: Reducción del tamaño de las imágenes, asegurando la correcta visualización de las tablas.

@media print {
  img {
    max-width: 100% !important; /* Asegura que la imagen no exceda el ancho de la página */
  }
  table {
    width: 100% !important; /* Tabla a toda la anchura de la página */
    border-collapse: collapse; /* Elimina espacios entre celdas */
  }
  th, td {
     border: 1px solid #ccc; /* Añade bordes a las celdas */
  }
}

Estilos especiales para impresión: Se puede crear un archivo CSS separado para impresión y enlazarlo con una consulta de medios.
```
<link rel="stylesheet" href="styles.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
```
Pruebas: Es imprescindible probar el resultado usando la función "Vista previa de impresión" en el navegador.

¿Cómo optimizar las páginas web para impresión?