CSS3 Media queries instead of the media attribute

In my previous post about the media attribute I talked about how strange the media attribute is, and that its usefulness isn’t that obvious.

As a followup I want to point you to an article that Russell Beattie wrote about CSS3 media queries. Media queries are a way to check the capabilities of a user-agent instead of checking what kind of media type it claims to be. This makes a lot of sense to me. Does it really matter if someone is using a small computer screen or a big mobile phone? What about if they use a big ass table? (aside from the pun, I really think Microsoft surface is cool)

Checking for capabilities of a certain user-agent makes much more sense: “if available width larger than 200px, show two columns instead of one”. If they are dynamically evaluated (I don’t know if they are), they allow you to build truly dynamic layouts, that work virtually everywhere. That’s what I call accessible layouts.

An interesting parallel is comparing checking user-agent strings and object detection in javascript, and the media attribute and media queries. I believe media queries is the natural next step. Today, the different types of media have started to mix; just look at TV:s and computers, or handheld computers and mobile phones. The type of media is not as important, capabilities are.

Although queries do not solve all of the questions I put forward in the previous post, they do pose an interesting alternative. Agreed?

(CSS3 Media queries are as a standard currently a candidate recommendation (which means it’s safe to implement), and is currently supported by Opera 9 and Safari 3. Update: Opera 9.5 evaluates the queries dynamically, Safari does not, thanks zcorpan)

4 responses to “CSS3 Media queries instead of the media attribute

  1. Totally new to me. Thanks. :D

    And the pessimistic side of mine asks the obvious question: Will this ever be supported by IE, and how long time will it take if the IE team actually care about it?

    Feels like a neat feature to find in Trident’s small sibling, though. Together with full support of CSS2.1.

  2. @madr: On the positive side, this feature has evolved pretty quickly on the mobile side, probably because Opera and Safari (webkit) have a fairly large market share there…

  3. From that perspective it’s really fantastic. Didn’t see it from there. Thanks.

Comments are closed.