another great CSS media query demo

This demo is from Daniel Glazman who works actively on web standards and is a long-time mozilla contributor.

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:

<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.

When viewing the demo, please don’t forget to resize the window from large to very very small (less than 100px!) to see it in action.

View the Demo in Firefox 3.5

Loading via planet, RSS or a reader without JavaScript? Click here instead.


  1. Yadu Rajiv

    That was awesome!!111 way to go!!s

    July 1st, 2009 at 09:42

  2. David Tran

    That’s awesome! Very graceful transitions… seems like it mainly reacts to changes in the vertical space available in the viewport and not really to changes in horizontal space – was that just for this example?

    July 1st, 2009 at 09:54

  3. Gaby

    Wow, that’s a nice feature! The 2nd smallest version does have a lot more height than it needs though, lots of white space at the bottom. I’m not sure if that’s just my browser though, I have quite a few add-ons :D *tries in safe mode* Nope, sill there :(

    Regardless, this feature will certainly be popular for smaller screens.

    July 1st, 2009 at 10:10

  4. Mario

    I think there’s a bug in this demo.
    If my window has the exact with of 300 pixels then both stylesheets will be loaded. I think you should write max-width:300 and min-width:301 because min/max-width means “smaller/greater or equal than”.

    July 1st, 2009 at 10:28

  5. meudah

    Vive notre Glazou national & vive Firefox ! :)

    July 1st, 2009 at 11:06

  6. Alexander Limi

    @media queries are great stuff, and it’s also supported by the iPhone. That’s how I get a dedicated mobile display format on :)

    July 1st, 2009 at 14:05

  7. Daniel Glazman

    @Mario: good catch ! I’ll update the demo. Thanks!

    July 1st, 2009 at 14:07

  8. thinsoldier

    Definite dual stylesheets at 300px wide.

    July 1st, 2009 at 14:55

  9. Ken Saunders


    July 1st, 2009 at 17:34

  10. […] 参考:another great CSS media query demo at    CSSメモ: メディアクエリ    Media Queries […]

    July 1st, 2009 at 19:11

  11. Ryan

    Great to see it finally implemented into Firefox. I did a similar blog post on the iPhones support of media queries and how you can detect orientation with it. Determine iPhone orientation using CSS

    July 1st, 2009 at 21:07

  12. […] View the Demo in Firefox 3.5 Laisser un commentaire […]

    July 2nd, 2009 at 02:30

  13. pd

    Does IE8 support this?

    July 2nd, 2009 at 03:15

  14. elzapp

    Doesn’t seem to work in my Firefox 3.5 on Ubuntu

    July 2nd, 2009 at 04:09

  15. elzapp

    Uh.. my bad *blush*, wrong binary

    July 2nd, 2009 at 05:19

Comments are closed for this article.