← Tutti gli articoli

Tutorial

Correggere una stampa pessima: un foglio di stile @media print per qualsiasi sito

16 maggio 2026 · di JustZix Team

Premi Ctrl+P su un articolo lungo e l'anteprima e un disastro: la barra di navigazione si mangia la prima pagina, la barra laterale si sovrappone al testo, una barra dei cookie galleggia sul terzo paragrafo e uno sfondo scuro pieno sta per prosciugare la cartuccia della tua stampante. Il sito semplicemente non ha mai scritto un foglio di stile di stampa. Quindi scrivilo tu — vive in una regola CSS di JustZix e rende di nuovo utilizzabile il "Salva come PDF".

Perche la maggior parte dei siti stampa male

La stampa e la parte piu ignorata dello sviluppo web. I designer testano sugli schermi; il QA testa sugli schermi; nessuno apre l'anteprima di stampa. Il risultato e che un'enorme fetta del web non ha alcun blocco @media print, oppure ne ha uno scritto anni fa che non corrisponde piu al layout. Il browser allora stampa il layout dello schermo cosi com'e — header fissi, griglie a piu colonne, temi scuri e tutto il resto.

La soluzione e una regola CSS che si applica solo quando la pagina viene stampata. Tutto cio che sta dentro @media print { ... } e invisibile sullo schermo e si attiva solo per la carta e l'esportazione PDF. Questo significa che puoi essere aggressivo: nascondere intere zone, ricolorare tutto, forzare la colonna singola — niente di tutto cio tocca la normale navigazione.

Passo 1 — nascondi tutto cio che non e contenuto

Navigazione, barre laterali, footer, widget di condivisione, barre dei cookie, riquadri appiccicosi di "iscriviti": niente di tutto cio appartiene alla carta. Inizia nascondendo l'arredo evidente.

@media print {
  header, nav, aside, footer,
  .sidebar, .site-header, .site-footer,
  .cookie-banner, .newsletter, .share-bar,
  .ad, [class*="advert" i], [id*="cookie" i],
  [role="banner"], [role="navigation"],
  [aria-label*="cookie" i] {
    display: none !important;
  }
}

Se la pagina stampa ancora spazzatura, apri l'anteprima di stampa, trova il blocco incriminato nei DevTools e aggiungi il suo selettore all'elenco. Devi farlo solo una volta per sito — la regola viene salvata.

Passo 2 — espandi il contenuto troncato

Molti siti vincolano il testo a poche righe, nascondono l'overflow, o mettono l'articolo in un box scorrevole ad altezza fissa. Sullo schermo va bene; sulla carta taglia il tuo contenuto. Annulla il vincolo.

@media print {
  /* Kill height limits and scroll boxes */
  main, article, .content, .post-body {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Undo line-clamp truncation */
  * {
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }

  /* Force the article full width, drop the grid */
  body, main, article {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }
}

Il generico overflow: visible su * sembra brusco, ma dentro @media print e esattamente cio che vuoi — niente dovrebbe essere ritagliato su una stampa.

Passo 3 — controlla le interruzioni di pagina

Il singolo miglioramento piu grande per una stampa e impedire alle cose di spezzarsi tra le pagine a meta elemento. Un blocco di codice diviso su due fogli, un titolo abbandonato in fondo a una pagina, una riga di tabella strappata a meta — tutto risolvibile con le proprieta di frammentazione.

@media print {
  /* Never split these across a page */
  pre, blockquote, table, figure, img,
  li, .card {
    break-inside: avoid;
  }

  /* Keep a heading with the text that follows it */
  h1, h2, h3, h4 {
    break-after: avoid;
  }

  /* Start each top-level section on a fresh page */
  .chapter, section.page {
    break-before: page;
  }
}

Le proprieta moderne sono break-inside, break-before e break-after. I vecchi nomi page-break-* funzionano ancora e Chrome li mappa automaticamente, ma scrivi quelli nuovi per le regole nuove.

Passo 4 — mostra gli URL dei link dopo le ancore

Un link stampato e inutile — il lettore non puo cliccare "clicca qui". Stampa l'URL reale accanto a esso usando un trucco di contenuto generato.

@media print {
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
    word-break: break-all;
  }

  /* Don't print URLs for in-page anchors or javascript: links */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }
}

Questo tira l'attributo href dentro al testo visibile. Saltalo per i link ad ancora e i link a immagini se diventa rumoroso — una stampa piena di lunghi URL di tracciamento e un suo tipo di pasticcio.

Passo 5 — imposta i margini con @page

La regola @page controlla il foglio stampato stesso: i suoi margini e la sua dimensione. I browser ti lasciano anche impostare i margini nella finestra di stampa, ma incorporarli nella regola significa che ogni stampa di quel sito e coerente.

@media print {
  @page {
    margin: 18mm 16mm;
    size: A4;
  }

  /* Tighter margin on the first page if you have a title block */
  @page :first {
    margin-top: 12mm;
  }
}

Passo 6 — forza uno sfondo chiaro per risparmiare inchiostro

I siti a tema scuro stampano come un muro di toner. Per impostazione predefinita Chrome rimuove i colori di sfondo durante la stampa (a meno che "Grafica di sfondo" sia spuntato), ma il testo spesso resta grigio chiaro presupponendo uno sfondo scuro. Forza un pulito nero su bianco.

@media print {
  html, body, * {
    background: #fff !important;
    background-image: none !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Keep images and real photos intact */
  img, svg, video { filter: none !important; }

  /* Slightly soften secondary text so it still reads as secondary */
  .muted, .meta, time, small { color: #444 !important; }
}

Questo garantisce un output leggibile ed economico in inchiostro indipendentemente dal tema del sito — e si sposa bene con la disattivazione di "Grafica di sfondo" nella finestra di stampa.

Metterlo insieme in JustZix

1. Crea una regola circoscritta al sito da cui stampi spesso — per esempio https://docs.example.com/*.
2. Incolla tutti e sei i blocchi nel pannello CSS, avvolti in un unico @media print (o tieni blocchi separati — entrambi funzionano).
3. Apri la pagina, premi Ctrl+P e guarda l'anteprima. Itera: qualunque cosa sia ancora sbagliata riceve un selettore aggiunto.
4. Sincronizza la tua chiave cosi la stessa configurazione di stampa pulita ti segue su ogni dispositivo.

Poiche tutto sta dentro @media print, puoi lasciare la regola attiva in modo permanente. E dormiente durante la navigazione normale e si risveglia solo quando stampi o esporti un PDF.

Insidie che vale la pena conoscere

• Interruttore Grafica di sfondo — la finestra di stampa di Chrome ha una casella "Grafica di sfondo" che sovrascrive alcune delle tue scelte di colore. Le tue regole !important vincono comunque per il primo piano, ma testa entrambi gli stati.
• Gli elementi fixed/sticky si ripetono su ogni pagina stampata in alcuni browser. Se un header continua a comparire, imposta position: static !important su di esso dentro il blocco di stampa.
• Gli URL generati possono andare a capo male — per questo aggiungiamo word-break: break-all; senza di esso un URL lungo spinge il layout di lato.
• Non nascondere troppo — didascalie, crediti delle figure e firme degli autori sono contenuto, non arredo. Sii specifico con il tuo elenco di cose da nascondere.

Vedi anche

• Un overlay di debug responsive — trova i problemi di layout prima che arrivino alla stampa.
• Copia una pagina come Markdown pulito — un altro modo per estrarre il contenuto da una pagina disordinata.

Un buon foglio di stile di stampa e un lavoro una tantum di quindici minuti che ripaga ogni singola volta che salvi un PDF. Installa JustZix, circoscrivi una regola al tuo sito piu stampato e non combattere mai piu con l'anteprima di stampa.