(This is a repost of an article I wrote for hacks.mozilla.org)
CSS
Media Queries were originally a
proposal submitted to the CSS Working Group by Opera Software and are
now implemented in Firefox 3.5. In short, Media Queries extend the
media declaration attached to a stylesheet to allow matching
based on the rendering device's intrinsic properties.
Let's take a link element
declaring a stylesheet inside an HTML document:
<link rel="stylesheet" type="text/css" href="style.css"
media="screen">
Now imagine you want this stylesheet to apply to the document if and
only if the width of the content window is less than 300 pixels... CSS
Media Queries make it simple to declare:
<link rel="stylesheet" type="text/css" href="style.css"
media="screen and (max-width: 300px)">
Available properties include
viewport's width and height, device's width and height, orientation
(portrait or landscape), viewport's aspect ratio, device's
aspect ratio, colormap, resolution and type of device.
It's then very easy to have one
single web page ready for consumption on a wide variety of devices,
ranging from mobile devices to monochrome tty displays.
Click
here to see the demo
and
don't forget to resize your window from 100px-wide to 900px-wide to see
it in action (WARNING: this link opens a new window without toolbars
because toolbars could block the size of a viewport above roughly 400px...)