I only recently learned about how you can use different style sheets based on the display media. Since I thought the idea was really cool, I thought I’d have a play around with it. The end result is an update to an article on Bohras. It has different style sheets for screen, print and handheld media, and not only applies different styles based on the media type, but even displays different elements depending on whether its being displayed on screen, on a handheld or in print.
While the implementation is pretty simple, I think it’s functional. I thought I’d post a link to it in case anyone out there is wondering how to do this themselves (it’s not that hard).
The major differences to note between the three versions are the following:
- Only the screen version displays the sidebar where article source thumbnail images can be found.
- The print version omits some text from the footer which links to the site disclaimer and a link to email the webmaster.
- The handheld version does not have justified text (otherwise it looks bad on handheld devices with huge gaps between words).
- The handheld version contains no hints on how to display text (wrt fonts and sizes). The handheld UA will make the best decision about this.
- Because the sidebar has display: none; placed on it in the handheld version, UAs that respect display: none; will not ordinarily download content linked to from that section. So handheld users won’t download the thumbnails, saving them time (and money, if bandwidth is metered).
In other words, I’ve made some assumptions about what content and formatting is appropriate for each media, and used CSS to put that into effect using separate style sheets (see the <head> of the document). The HTML document itself contains only structural markup, and no presentational markup (except for <em> and <strong>). Because of this, the document has a useful parseable structure (see <h[123]> tags), and degrades nicely on browsers that don’t support CSS at all.