CSS3 media queries

too soon, but closer than you might think

[swa66]

Every so often we seen a query on how to have different layouts depending on things like screen size (wrongly named "resolution"), etc.

The old media type screen and handheld etc. are there, but it's hardly of use to have e.g. a layout that works properly between 300 and 800px width; one up to 1200 px, and e.g. even a third one when the window is made even bigger.

It's most likely possible already to do this in javascript today and load different stylesheets depending on the size of the viewport, but aside of the obvious visitor that has scripting off (using e.g. NoScript in Firefox), there are obvious other imperfections during the loading of the page at a critical moment for the visitor.

I stumbled today on something interesting:
[w3.org...]

The interesting part is that it will eventually become possible to write things like:

<link rel="stylesheet" media="screen and (max-width: 299px)" href="small.css" />
<link rel="stylesheet" media="screen and (min-width: 300px) and (max-width: 799px)" href="medium.css" />
<link rel="stylesheet" media="screen and (min-width: 800px) and (max-width: 1199px)" href="large.css" />
<link rel="stylesheet" media="screen and (min-width: 1200px)" href="humongous.css" />

While normally you don't expect this to be implemented already, take a look here:
[opera.com...]
It seems webkit (safari, chrome) also already has this (so you can detect the iphone e.g.)
And it seems to be in the upcoming FF3.1 as well.

I've not seen any mention of IE8beta anywhere.

Will be interesting to watch this.

And even more interesting as those handheld devices that need this most typically have a serious chance of running opera.

Anybody played with it already in opera/safari ? Experiences ?

[topr8]

great find swa66

i've a site i'm starting on that could be targeted at handheld devices and this looks like a possible solution.

it's an interesting concept and much better than trying to fiddle around with javascript, i guess the possible lack of support from ie8 isn't a problem if you are looking at small however if you are looking at the larger sizes then it would be of course.

[surrealillusions]

Looks very interesting, thanks!

:)

[coopster]

Will be interesting to watch this

Indeed. Thanks for the heads up. I'll be flagging this thread to read notes of those that are playing around with it already.