Have you ever printed a recipe from the web? My typical experience is that you get 37 pages of stuff with the recipe split across pages 15 and 16. If you’re lucky, the site offers a button to create a dedicated for-print layout that produces a better result, but it’s pretty rare for them to tie into the browser’s built-in print functionality.

I recently printed a recipe off my own blog and realized that my own site has the same problem on a smaller scale. Since I complain about this regularly, I decided to try to fix it. My layout is simple enough that it turned out to be just a small chunk of extra print-targeted CSS:

@media print {
    header h1 a { font-size: 18px; }
    nav { display: none !important; }
    aside.sidebar { display: none !important; }
    article.hentry footer { display: none !important; }
}

Now when you push print on one of my recipes, you get just the recipe with a small header and copyright footer. All the other navigation content that doesn’t work on paper anyway is removed.