So, I’m sitting here drinking some of my new homebrew. It’s a rather nice cherry wheat that came out a tad more spicy than I was actually expecting. I think I rather overdid it on the cinnamon. I figure that after another couple of weeks of bottle conditioning, it might turn out to be a rather good beer.
One thing I have noticed is that it’s a lot stronger than I was expecting. After just one, I’m catching a buzz. Very nice.
Anyway, while I’m basking in the sun and enjoying a frosty beverage, I figured I’d putz around with the website a bit. Those of you of a geekish bent might try looking at the site on your mobile phone or whatever handheld device you happen to prefer. Through the magical power of the interwebs, the blog should now look different on the handheld devices, more suited to smaller screens. It’ll eliminate the sidebars and rejigger the display a bit. Since I’ve been using the mobile web a lot more, I find this quite cool.
Also if, for some demented reason, you feel it necessary to produce hardcopy of my random meanderings, you’ll find that the excessive imagery disappears on the printout, leaving you with just the basic text and little else. This should all be automatic if you have a modern browser, no strange trickery required. Although I’m dubious as to why anybody would want to print out my worthless words, the option is now there, if you happen to come up with a reason.
Those of you interested in the technical details can read on after the jump…
On to the tech stuff:
Basically, this is a modern website, using CSS and XHTML and such (MIME-type of text/html aside… damn you IE!). So all I really had to do was to create two new stylesheets, one for handheld devices and one for print devices. The largest part of these stylesheets involved adding lots of “display:none” code to various bits, thus eliminating them from the page. This is why when, for example, you print the page, you won’t get the sidebars. They’re eliminated via the new CSS rules.
After creating these stylesheets (and I highly recommend the Web Developer extension for Firefox to accomplish this, as it lets you view your CSS changes to the page in real time), you save them on your website somewhere and then make the pages reference them. Since I use WordPress, I saved them in the theme directory as handheld.css and print.css. Then I edited the theme’s header.php file to include code that looks exactly like this:
<link rel=”stylesheet” href=”<?php echo get_stylesheet_directory_uri(); ?>/handheld.css” type=”text/css” media=”handheld” />
<link rel=”stylesheet” href=”<?php echo get_stylesheet_directory_uri(); ?>/print.css” type=”text/css” media=”print” />
Simple, no? This tells your browser where to find the new CSS files, which it loads and uses when necessary. So handheld devices look at the one that is defined by the media=”handheld” link, and the browser uses the print one for printing. Simple. Easy. Even a monkey could do it. And I’ve learned something today. And if you read this, perhaps you did too. 🙂