CSS Media Queries are a great new feature to manage the screen space. If you don’t know what CSS Media queries are, read this handy tutorial on CSS Media Queries. I’m planning to use media queries on a next project which will use the full available screen space as a core conceptual element, so i did a bit of functional experimentation just to make sure :
- CSS Media Queries apply to the viewport and not to the device width (so to a non-maximized browser window)
- the browsers refresh the screen to reflect the proper styles on resize (and not on reload)
I was glad to find out that both statements are true. But during the experiment, I discovered a weird phenomenon: Firefox 3.6.12 does not take into account the queries targetted to a width below 515px, whereas Google Chrome (7.0) does.
You can see it for yourself on this demo.
Update: LastPass firefox plugin is the culprit. Once desactivated, the bug disappears.