Filed under CSS
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)
- Emil Stenström
- 21 Nov, 2007, CSS
Feel free to leave a comment, or subscribe to my feed.
linkback
These people have linked to this article:
- No linkbacks yet
To get a link in this list: make sure your blogging software supports trackbacks or pingbacks and simply link to this article like this:
<a href="http://friendlybit.com/css/css3-media-queries-instead-of-the-media-attribute/">CSS3 Media queries instead of the media attribute</a>You can also trackback by copying this link, and pasting it into a trackback field in your blogging tool.
