Mar 26th 2009

Media Attributes & Queries

EDIT: This article is about a previous design. Things probably have changed quite a bit since what was written here was put down.

A week ago I wrote that I switched hosts, and I used that chance to discuss the changes to my weblog. I’ve made additional changes, some you may or may not have noticed. I’ll touch upon how my CSS is delivered.

At the conclusion I stated that I wanted to change my stylesheet switcher to something else. I’ve actually removed it completely in favor of media attributes, media queries, and conditional comments. Opera is the only browser which supports media queries or attributes fully and have for several years now. Safari does, but any of the styles applied with media queries are static. Firefox is going to support them with version 3.1, but it appears as if they’ll be static as well. However, that’s not a problem for me as I don’t see myself either having dynamic content or overwriting those styles with additional ones. Here’s a peek at my stylesheet setup:

<link rel="stylesheet" href="/sys/css/screen.css" type="text/css" media="screen and (min-device-width: 481px)">
<!--[if IE 8]><link rel="stylesheet" href="/sys/css/screen.css" type="text/css" media="screen"><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" href="/sys/css/iesucks.css" type="text/css" media="screen"><![endif]-->
<link rel="stylesheet" href="/sys/css/mobile.css" type="text/css" media="handheld, only screen and (max-device-width: 480px)">
<link rel="stylesheet" href="/sys/css/tv.css" type="text/css" media="tv,projection">

To feed separate stylesheets to different user agents you can specify different media attributes, and the user agent would pick the stylesheet that corresponds with the media it prefers. More can be done with media attributes than most people realize, especially when the majority of web developers use Firefox for development which doesn’t have a full version browser (as of now) with support for CSS 3 media queries.

Things would be quite a bit more simpler if the two top mobile browsers actually supported the handheld media, but Apple in an attempt to make sure the users of the iPhone were fed the exact same content they were used to on their desktop Mobile Safari prefers the screen media. Opera has followed suit with Opera Mini 4, so supplying a handheld stylesheet is almost completely pointless as the two major browsers in that market prefer another media type. In some cases specifying an additional stylesheet for smaller screens isn’t about feeding a dumbed-down web for a mobile device but instead feeding stylesheets designed for a smaller screen with the exact same content as a typical desktop browser. That’s what I’ve wanted to do in my case. Thankfully the top two mobile browsers support CSS 3 media queries, so I was able to specify a screen media for devices that have screens which are 480 pixels or smaller and another one for screens which are larger than that. To make sure that the smaller screen stylesheet is fed to those devices the only keyword is used. It also prevents browsers which don’t have support for media queries to ignore it as only is not a recognized media type to them.

The handheld stylesheet additionally contains a CSS 3 media query which supplies styles for devices which have screens with resolutions smaller than 480 pixels. I am currently using that method to feed styles to Opera Mini which has problematic support for overflow and line-height. It also can and will provide more fine tuning for devices with extremely small screens. It’s still a work in progress.

Naturally, Internet Explorer makes things harder. The specification states that the comma separated list of media types should be split by the comma then truncated from the first of the string to the first occurence of a character which isn’t A-Z or a-z. If the resulting set of strings doesn’t contain the preferred media type then the stylesheet should be ignored. If the user agent supports media queries then the rest of the string which starts with the preferred media type is parsed then. Firefox follows this, but Internet Explorer ignores the entire thing. Conditional comments are necessary to get Internet Explorer to support the stylesheets which are specified. I’m an ass, so Internet Explorer 6 and 7 users are fed very simplified stylesheets using a typeface which cater to their visual preferences, Comic Sans. Internet Explorer 8 users, however, are fed the exact same stylesheet Opera, Safari, and Firefox users are fed.

In the not too distant future I do plan on adding a print stylesheet, but it’s not high on my list of priorities as I don’t see where anyone would have the desire to print anything off from here. It would be fun to do, anyway.