Selecting css references based on device capabilities

I’ve been tinkering around recently with a set of stylesheet references which aim to point devices to an appropriate set of stylesheets, based on the capabilities of that device.

The best way to do this is usually device detection before serving the page, however this is often not an option for small-scale sites, so I’ve tried to come up with a workable set of stylesheet references which will do a similar job.

The example I’ve included here only deals with the selection aspect, deciding what level of styling to include in each stylesheet file is whole other can of worms, and will vary from site to site.

Here’s what I’ve come up with so far:
<link media="all" href="styles/basic.css" rel="stylesheet" type="text/css"/>

<link media="print" href="styles/print.css" rel="stylesheet" type="text/css"/>

<link rel="stylesheet" type="text/css" href="styles/smartphone.css"
media="(min-device-width: 320px) and (max-device-width: 764px)"/>

<link  rel="stylesheet" type="text/css" href="styles/full.css"
media="screen and (min-device-width: 765px)"/>

<!--[if gt IE 4]>

<link media="screen" href="styles/ie.css" rel="stylesheet" type="text/css"/>
<![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1" />

Here’s a  test page indicating which css files  are currently being used by your browser. All the stylesheet files are listed in the html, those files being referenced will appear in red, those not referenced are ‘hidden’ white-on-white.

This arrangement is based on a principle of progressive enhancement, starting off with basic styling for all devices, and progressively introducing further styling approporiate to the device.

Let’s talk through the stylesheet links one by one:

The most basic stylesheet basic.css is applied by all devices:

<link media="all" href="styles/basic.css" rel="stylesheet" type="text/css"/>

The next step is to include a reference to smartphone.css which would provide some advanced styling for small screens:

<link rel="stylesheet" type="text/css" href="styles/smartphone.css"
media="(min-device-width: 320px) and (max-device-width: 764px)"/>

I’ve used the min-device-width and max-device-width media queries to specify that the smartphone.css should only be referenced by devices whose screen is wider than 320px and not wider than 764px. There’s a bit of guesswork and generalisation going on here, but I think that’s a reasonable rough definition of a small, smart device.

Next I include a reference to full.css which provides the full styling for the site for devices with larger screens (desktops, laptops, etc.):

<link  rel="stylesheet" type="text/css" href="styles/full.css"
media="screen and (min-device-width: 765px)"/>

I’ve used the max-device-width media query to  specify that full.css should only be used by devices with screens wider than 765px.

Here’s where the trouble starts though.  Firstly, Internet Explorer <= 8 doesn’t understand media queries, therefore at this point IE users are only going to get basic.css (IE, don’t you love it *sigh*…)  To get around this I make use of the IE-specific if clauses to point IE>4 to ie.css:

<!--[if gt IE 4]>

<link media="screen" href="styles/ie.css" rel="stylesheet" type="text/css"/>
<![endif]-->

This is a reference to ie.css which will only be used by Internet Explorer 4 and greater. ie.css then imports the full.css stylesheet (you could also include any IE-specific css here).

The problem with this method is that IE mobile may now be referencing full.css, which we don’t want.  Someone mentioned to me that some versions of IE mobile identify themselves as IE4 (hence my specification of >IE4), but I haven’t confirmed this as yet.  If anyone knows how to avoid IE mobile from referencing a stylesheet, I’d love to hear about it in the comments please…

A further problem is that some desktop browsers seem to reference both the smartphone.css and full.css files.  This is troubling as if the browser does understand the media queries, the two are mutually exclusive (the device-width is either less than or greater than 765px). If the browser doesn’t understand the media queries, then I would expect the browser not to reference either stylesheet (as is the case with IE).

This requires further investigation but as it stands, though worryingly inexplicable, the behaviour is not too distressing as in practice any styles from smartphone.css which are inappropriate for larger screens can easily be overridden in full.css.

The final line in the example  is concerned with setting the initial zoom correctly on zoomable devices  such as iPhones:

<meta name="viewport" content="width=device-width, initial-scale=1" />

This line ensures that  the page is initially loaded at a scale of 1:1.

As you can see, this example is neither a fail-safe or complete solution, but it may be a useful starting point for some, and I’m also hoping that by posting it, I may get some help with filling in the gaps..

Posted in Uncategorized | 2 Comments

2 Responses to “Selecting css references based on device capabilities”

  1. Matthew Buckett says:

    There’s been some discussion about this on http://ajaxian.com/archives/css-media-queries-bees-knees-or-spawn-of-satan

  2. Good work – do these different css files work across all the major broswers and do you get any issues with speed or W3C standards? I have been experiementing with serving up mobile landing pages on several of my sites recently. It can be a minefield though, as there are also Tablets to think about now, which come under mobile devices but display more like a small laptop.