Designing print with css

Printable Doors

designing printable web-app/sites.

print.css

@media print {

  * {
    background-image: none !important;
  }

  header, footer, aside, nav, form, iframe, .menu, .hero, .adslot {
    display: none;
  }

  .do-not-print {
    display: none !important;
  }

  h1 {
    break-before: always;
  }

  table, img, svg {
    break-inside: avoid;
  }

}

screen.css

@media screen {

  body {
    margin: 2em;
    color: #fff;
    background-color: #000;
  }

}

definitions

References

smashingmagazine.com/2015/01/designing-for-print-with-css/
CSS Generated Content for Paged Media Module
CSS Paged Media Module Level 3
developer.mozilla.org - Using CSS counters