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]-->

Leave a Reply

You can use the <pre> tag to post a block of code, or <code> to highlight code within text.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>