Repeat after me : CSS Media Queries, almost a W3C candidate recommendation, are a very cool spec. Allowing you to select the stylesheets applied to your document based on some characteristics of the rendering device or of the viewport. Meaning you can have a given stylesheet for very wide screens, another one for normal screens and again another one for small screens like cellphone screens (think Small Screen Rendering here...).

Well. I spent a few cycles on CSS Media Queries just for fun, started yesterday night and I have a first result to show you so you can understand FROM FIREFOX how cool CSS MQ are.

  • download to your disk and install MQme 0.1 (warning : not compatible with Fullerscreen ; please disable Fullerscreen before using it)
  • browse this document (don't forget to check the document contains no script at all ; style switching is purely declarative in the document)
  • read the document and play with the width of your browser's window...
This is only a very early proof of concept, certainly not a stable implementation of MQ in Firefox. Only six features (*-width, *-device-width) are implemented for the time being and only pixel-based lengths are accepted. MQ in Firefox should be implemented totally differently, in the style and layout engines, not in a hacky JS-based extension. But still, it's a proof of concept. Have fun.