Many web developers (like myself) want to believe that paper is dead. But it’s not. It’s still alive and kickin’ and continuing to try and take over the world. There are still plenty of people that print out webpages on a regular basis. And as leaders in all-things-web, developers shouldn’t ignore that, but rather make sure their websites are print-ready. That’ll show paper who’s boss… right?

When designing a website, there are a lot of features that are usually necessary – a navigation bar, comment thread, selection toggles – that aren’t necessary when the page is printed. Here’s an example: cooking blogs are all the rage. Where else do you learn how to make triple chocolate avocado black bean brownies that get you 200 likes on Instagram ??? ? While useful, those blogs have paragraphs upon paragraphs of information about the writer’s life that you don’t necessarily need in order to make your mouth-watering creation. So when you print out the recipe to stick in a drawer and never look at again follow along with while you cook, you’d like to get only the pertinent information. Not to mention that you would rather not use 10 pages of paper for a half-page recipe.

via GIPHY

So, you eagerly ask, how do I develop a print-ready webpage without sacrificing all my great content and features? The answer is simple: @media print.

Whereas media queries are often used to change up styles on different screen sizes in cases like @media (min-width: 768px), the print media type is used to change up styles in a print view. Just like media queries for different screen sizes, you should place this declaration at the bottom of your CSS code, and only include any changes to the default code. Below is an example.

body {
   background-color: darkred;
   color: white;
   width: 90%;
   margin: auto;
}
nav {
   position: fixed;
   top: 0;
   background: white;
   color: #6d0000;
}
#logo {
   float: left; 
}
#logo img {
   width: 400px;
   height: 300px;
}
section.main {
   float: left;
   width: 70%;
   color: black;
}
section.main h1 {
   font-size: 1.5em;
}
section.main p {
   font-size: 1em;
}
aside.sidebar {
   float: left;
   width: 30%;
}
footer {
   clear: both;
   width: 100%;
}
@media print {
   body {
      background-color: white;
      color: black;
   }
   nav, aside.sidebar, footer {
      display: none;
   }
   #logo {
      float: none;
      text-align: center;
      width: 100%;
   }
   #logo img {
      width: 200px;
      height: 150px;
   }
   section.main {
      float: none;
      width: 100%;
   }
}

Here, I hid the nav bar, sidebar, and footer; changed the text color; and centered/resized the logo. Note that since most printers by default hide background graphics (colors, images, gradients, etc), and most people print on white paper, it’s best to be sure your website prints with dark text that doesn’t rely on any images for layout.

Notice how the code doesn’t rewrite all of the CSS, but rather notes how it looks different when it’s printed (much like the CSS version of Sesame Street’s “One of These Things is Not Like the Other”). You can also nest screen size media queries within print media queries, if you want the print view to differ on different screen sizes. This may come in handy if someone is printing a concert ticket to PDF and you want to maintain the screen ratio of the QR code on their mobile device.

In conclusion, paper sucks. But here’s why @media print is important:

1. People are still printing web pages, and it’s our responsibility as web developers to make sure our websites look top notch in all conditions ?
2. When we cut down on the content that is printed on a page, we save ink, paper, and the world  ?
3. As briefly mentioned in my last example, people also print to PDF! Which is a practical and persisting (not forgetting, environmentally-friendly) way of printing  ?