Make Your Blog Printer and Handheld Friendly

   Print & Read on the Go!
TheDocBlog has recently added some simple hidden features. When you print one of my articles, all the graphics, sponsor buttons, comment forms, and so on are turned off. Saving you some paper and the world some trees. More importantly it puts the article in a printer friendly format by removing the extra fat and making it easier to read.

With this is the ability to surf TheDocBlog on your handheld, dropping most graphics, some advertisements, and most menu options. This improves the loading speed and the ability to easily read and quickly surf the Website while using handheld devices.

The Trick:
The standard stylesheet link element (Example 1 below) sets the media to screen. This is the standard web design stylesheet. To make the link element work for printing, you change the media to print. (Example 2 below)

Example 1: For Standard Web Design

Example 2: For Print Media (example print.css file)

Example 3: For HandHeld Media (example handheld.css file)

Example 4: You can combine them.

Or you can setup your media types like this:

By adding multiple stylesheets, you can easily control the look and feel of each media type you would like to target. The link element will be called when that media type is used. You can test out the print media right now by going to the print preview button in your browser. (file > print preview) This will set the print media css file active making this article ready for print.

W3.org has more details about the 7 different Media Types currently supported. View the browser conformance tables on the different media types to find which browsers the different media types best work with.

~ TheDoc

This Article Is Brought To You By:   Yappo Dollars   !