intangiblestyle

Mobile First: solving IE vs. Symbian

As we all know, media queries are by far the best way to distinguish between desktop and mobile browsers, or, more generically, between the dozens of different screen sizes our users can have. Media queries are the future of the web.
Nonetheless, the fact that they are the future doesn’t mean that there are no problems. One is particularly tricky: what do we do for browsers that don’t support them?

- Peter-Paul Koch, More about media queries

Those browsers are IE and Symbian, the two biggest browsers on desktop and mobile respectively. Clearly we need a solution that doesn’t leave one of them rendering CSS for the wrong platform.

(And since the aim is to fulfill the promise of PPK’s original idea, that solution needs to work client-side and without depending on JS.)

The problem

Usually, an IE problem would just bring out that dependable IE-wrangler, conditional comments. Unfortunately, as people on the mobile-web list quickly spotted, that approach falls foul of IE6 Mobile.

You see, when faced with a conditional comment, IE6 Mobile acts as if it’s plain old IE6 on the desktop. (Which it pretty much is, just squashed awkwardly into a mobile OS.)

It’s not the first time IE6 Mobile has caused annoying problems. It’s one of the many mobile browsers that read both ‘screen’ and ‘handheld’ CSS media types, and need a reset served to them so they don’t render the desktop styles. (Until PPK came up with this approach, anyway.)

The solution

Oddly enough, this once-annoying quirk ends up providing the solution. Using conditional comments, we can force IEs older than IE9 to read their own stylesheet, with the desktop styles and whatever fixes may be needed. On the end of this, we add an @media handheld block. This resets the desktop styles IE6 Mobile has just read, and replaces them with the mobile styles we want it to actually render.

Everyone gets the right styles, without any extra http requests. Phew.

Here’s how it all looks:

A couple of notes on future-proofing. IE9 understands media queries, so it gets the main stylesheet along with other modern browsers. Windows Phone 7 doesn’t read media queries, but it can be selected with its’ own conditional comment. It gets the main stylesheet too so as to leave room for future versions that may understand media queries.

Subscribe in your feed reader