Firefox 3.5 CSS Media Queries demo
By glazou on Wednesday 1 July 2009, 18:33 - Mozilla - Permalink
(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"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:
media="screen">
<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...)
Comments
A simple, yet incredibly useful CSS improvement.
With the proliferation of smartphones, netbooks and huge widescreens display sizes can now vary by a whole order of magnitude, so being able to apply CSS according to display size is of great use.
I suppose that eventually other browsers will implement it too.
Nous proposons un article complet sur les Medias Queries sur notre site dans l'article "Nouveautés CSS 3 : c’est quoi les Media Queries ?" disponible à l'adresse http://www.kiwano.fr/nouveaute-css-...
Les Medias Queries vont révolutionner le développement des interfaces Web surtout pour gérer la problématique des différents medias.
Damn, that's neat! Now if we could add some media properties such as user-agent-vendor and min-user-agent-version, I bet half the javascript ever written on the planet could just go away
I presume this could be used for (very) printer-friendly stylesheets as well. For example, you could change the margin sizes when switching from portait to landscape, or you could specify a minimum font size when you print multiple pages on a single sheet of A4.