CSS Print Media Query

by Josh | Posted in Scripts & Code Snippets, Tutorials & Guides | Tagged: , ,

Using the @media rule in your CSS allows you to target different media types, and screen sizes, from a single stylesheet. Using media queries with max-widths is integral to the current push towards responsive design. They can also be used to create your print styles using @media print. You’ll notice this used on modern base templates such as the HTML5 Boilerplate. In fact, the Boilerplate has a great bunch of default print styles to start with. Grab them from the bottom of the style.css on the GitHub repository.

Add this at the end of your stylesheet. Note that specificity and precedence rules still apply:

@media print { 
 /* All your print styles go here */
 #header, #footer, #nav { display: none !important; } 
}

Browser Support for “@media print”

A separate printable stylesheet is still the way to go if you want to support Internet Explorer 8 and below. If you REALLY don’t want that extra HTTP request, you could always use both the media query and an IE conditional comment to include the print.css. The @media print is supported in the following browsers:

  • FireFox 3.5
  • Internet Explorer 9
  • Chrome 14
  • Safari 3.2
  • Opera 11

The Old Ways

For reference, here’s the old tried-and-true way:

<link href="/print.css" rel="stylesheet" media="print" type="text/css" />

And if you only want to send it to IE 8 and below:

<!--[if lte IE 8]>
<link rel="stylesheet" media="print" href="/print.css" type="text/css" />
<![endif]-->

Recommended Books For Web Devs

CSS Secrets [Book Cover] Building out a design into HTML and CSS is like a series of small puzzles— some trickier than others. CSS Secrets: Better Solutions to Everyday Web Design Problems is a practical and modular look at many of the unique challenges you'll encounter during front-end development. Well-designed, and easy to pick up for any intermediate to advanced front-end dev looking to pick up some tips and tricks, and honing the processes used to figure them out.

Eloquent JavaScript [Book Cover] Eloquent JavaScript: A Modern Introduction to Programming is an engaging and well-formatted overview of JavaScript, complete with example projects and helpful diagrams. It's easy to read—not too dense, with readable type—and covers many subjects. The revised edition covers some of the newer features of JavaScript, including: class notation, arrow functions, iterators, async functions, template strings, and block scope.

The Phoenix Project [Book Cover] While The Phoenix Project: A Novel about IT, DevOps, and Helping Your Business Win is a fictional novel, the slightly exaggerated characters and situations involved will be very familiar to anyone working in software development and IT. In it, an IT manager is confronted with the seemingly impossible task of turning around a project that's over-budget and past deadlines in 90 days, or else his department will be outsourced. The morals and takeaways from this story about DevOps and lean principles will stick with you.