More about media queries; mailing list

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?

IE8 and lower, as well as Symbian WebKit, do not support media queries. That is, the largest desktop browser and the largest mobile browser will not react to the latest weapon in our arsenal. They will only interpret the default styles, and ignore anything else.

How are we going to solve this problem? Right now I see three possibilities, none of which I like.

  1. Use JavaScript; more specifically window.innerWidth, which gives the actual width of the visual viewport in both IE and Symbian WebKit. Disadvantage: there may be an ugly moment when the default layout is swapped for the JavaScript-based optimal layout. CSS media queries are parsed and interpreted before the browser starts to lay out the page. Scripts aren’t.
  2. Make sure the default styles are suitable for IE. Or for Symbian WebKit. Problem is: they can’t be suitable for both. Shall we sacrifice Symbian WebKit for IE? Or vice versa?
  3. Completely ignore the problem. That will work with developer-type sites, or with personal projects, but not for clients and websites with actual, normal users.

I don’t know the solution to this nasty problem. In order to discuss it, and the dozens of other problems the mobile web is bound to give rise to, I’ve set up a mailing list. Subscribe by sending an empty mail to mobile-web-subscribe@yahoogroups.com and join the discussion.

This is the blog of Peter-Paul Koch, mobile platform strategist, consultant, and trainer. You can also follow him on Twitter.
Atom RSS

I’m speaking at the following conferences:

(Data from Lanyrd)

Categories:

Monthlies:

Comments

Comments are closed.

1 Posted by Alex Gibson on 15 September 2010 | Permalink

I'm curious what you think about the idea put forward in this presentation:

http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

i.e. - build for mobile first and foremost, *then* add media queries for desktop sites. IE <= 8 can use a conditional comment, served with its own style sheet?

That way, both IE8 and Symbian WebKit get the correct rendering, as does everything else? (in theory).

2 Posted by ppk on 15 September 2010 | Permalink

Hm, yes, that could work, couldn't it? IE is definitely covered by this.

The only problem is that Symbian WebKit doesn't have one screen size; there are at least a dozen. Still, they fall into a range of, say, 250 to 800 pixels, and creating default style sheets for that range is possible.

3 Posted by Ernst de Haan on 15 September 2010 | Permalink

Here's a list of some other potential ingredients:
- Server-side browser sniffing, possibly passing different or additional CSS files to the client.
- Server-side user agent sniffing, setting classes like "Browser-Phone" and "Browser-MobileSafari" on the BODY element. The CSS can then use these classes.
- Same thing, but then by using client-side user agent sniffing. May trigger flickering.
- Determine the screen size with JavaScript and then set certain classes on the BODY element, such as FrameWidth-LessThan600. When the screen size changes, listen for events and change the classes correspondingly.

For some examples of server-side browser sniffing, see www.pensioenpage.com

4 Posted by Arieh on 15 September 2010 | Permalink

The main problem I see with both media queries, and more so with Ernst's solution is that you don't prevent unnecessary resources from being loaded, and that's quite expensive for most mobile surfing.

5 Posted by Daniel on 15 September 2010 | Permalink

What are the possible solutions to prevent unnecessary resources from being loaded?

1. Server-side sniffing
2. Loading resources from JS
?? Others ??

6 Posted by Alex Gibson on 15 September 2010 | Permalink

@ppk - yes flexible layouts are becoming all too important for mobile web development. To be truly cross-platform on mobile, i think it is the only real way.

I think things like server side UA sniffing are quick way out, but not necessarily the safest, or most reliable.

7 Posted by Ernst de Haan on 15 September 2010 | Permalink

@Alex: True, user agent sniffing is a workaround, a last resort. But given the current state of incompatibilities and/or lack of standardization, it's still needed.

8 Posted by Jasper van der Kamp on 15 September 2010 | Permalink

For me there is only one way. Create a stylesheet with all default (and mobile) styles and include in the head of your HTML. Then create another stylesheet width the wide screen styles and include it with media queries in the head of your HTML. Then include the wide screen styles again with conditional comments for IE8 and below.
It costs an extra http requests for desktop browsers, but fuck it. This is the most solid and easy to edit way.

9 Posted by Matthew Babbs on 16 September 2010 | Permalink

Why not use conditional comments to serve one stylesheet to IE<9, then another to everything else? That would allow defaulting to mobile styles for Symbian's benefit, and avoid burdening IE with an extra HTTP request. (See http://gist.github.com/581794 for an example of how it might work.)

10 Posted by Sasha Sklar on 16 September 2010 | Permalink

"CSS media queries are parsed and interpreted before the browser starts to lay out the page. Scripts aren’t."

That's the case if you follow current front end performance best practices. But what if you take advantage of the loading/blocking properties of script tags to prevent the page from rendering until you have the width set?

Putting a your script tag in the head before the CSS link tags should do the trick, no?