Print CSS
The Problem
Printer-friendly links must die!
Really, they should. The next time you see a printer-friendly link on a website I encourage you to give the makers of that site a disapproving shake of the head and ponder all of the ways that you are more enlightened than them.
Why are printer-friendly links so evil? Because there is a better way. A much better way. It's called CSS . Maybe you've heard of it.
The Solution
One of the most powerful features of CSS is media types . Media types allow CSS to be automagically customized based on what device is viewing the page. Media types range from the oh-so-common screen to the never-really-used speech and braille . That's right, you can write CSS specifically for screen readers with properties like voice-volume , voice-stress and voice-family . But that's a whole other blog post.
The print media type may not be as obscure as braille but it's definitely not as popular as it should be. Once you see how easy writing a print stylesheet is, I think you'll agree that almost every website should have a print stylesheet.
The How-To
Adding a print stylesheet to this site literally took less than 5 minutes. Here's what I did.
- Created a print.css file on the web server.
-
Addd
#menu a, #footer a { display:none; }to the file. -
Add
<link type="text/css" rel="sytlesheet" media="print" href="print.css" />to the<head>tag of the site.
And that's all it takes to get a basic print stylesheet up and running on a website. Now if you want to really do things right, you should also go back and rethink your existing CSS files which probably don't have any defined media type. If you don't set the media attribute then the default all is assumed. If that's the case with your site you probably want to go back and divide it up into two files: all.css and screen.css, with matching media type attributes in their corresponding <link> tags. All will apply to every media type. This is a good place to put text styling and a few other things. Screen will (or at least should) only apply to normal screens like desktops, laptops, etc. And is a good place to put layout styles.
Well I hope this quick overview opened you eyes to the possibilities of print stylesheets. In case you haven't figured it out yet, the Print Preview feature in your browser works just fine for viewing print stylesheets. No need to waste stacks of paper.
Coming Soon
One of the media types I didn't cover at all is
handheld
.
That's because the
handheld
media type has been so abused/ignored by mobile browsers that what should have been a cornerstone of modern website design has become almost completely useless. I'll probably be posting a
rant
article on the
handheld
media type in the near future. Check back soon.