CSS Media Types

In the “sharp knives may be dangerous in unskilled hands” category comes this lesson. I had, as part of the process of converting the site to validate against W3C standards, changed the method I used for referencing my style sheet.

<link rel="stylesheet" type="text/css"
media="screen" title="User
Defined Style" href="<?php echo "/attics/"; echo
(!$sitestyle)?'canary':$sitestyle ?>.css" />

I had taken great pains to understand the php syntax in the above snippet, but had only given the “media” line a brief glance.

Some time later, I noticed that pages printed from this site lacked all formatting. I didn’t have time to pursue the problem at the time, but today I did. It sure looked like, in a print preview, that the CSS formatting information was simply missing. So, I looked at how I was referencing my stylesheet and noticed the media line. After a quick google search, I found a document that nicely explained the use of the media directive.

Now I realize I can customize and optimize the presentation of this site for various media, such as print, PDA, etc., in addition to the traditional computer monitor. For now I’ve just set screen and print to be equivalent, as the current style sheet is generic enough to work for both output modes.

The featured image (which may only be displayed on the index pages, depending on your settings) was randomly selected. It is an unlikely coincidence if it is related to the post.