The first question any good web developer should ask is “how will my pages display on ALL the popular browsers?” It seems as if the W3C and Microsoft forgot to ask that question when they designed and implemented Media Queries.
They got around this essential question by surrounding the style sheet links in the head section of the page with IF statements. If this browser is IE8 or greater use these style sheets. If this browser is not IE8 or greater use these style sheets.
What will the head section look like when you also have to ask is it Firefox 4.2 and is it Chrome 10.4? It all reminds me of one of my favorite quotes, and I have no idea who said it first:
“I love standards, there’s so many to choose from!”
English grammar aside, that statement says it all. Why didn’t they come up with an implementation that was compatible with the existing standards? As I see it, and of course I am a bit prejudice here, there are two major problems. First and foremost, the “rel” tag on all of the CSS links is set to “stylesheet”. If the browser does not recognize the changes to the media tag, it merely activates all of the stylesheets at once. Of course that does lead us to the second problem, they changed the meaning of the media tag. Why didn’t they just add another tag for the query.
Let me explain how I would have implemented it.
- Leave the media tag alone.
- Add another tag, “query”, and put the conditional statements there. By existing standards, any browser not supporting queries would merely ignore the new tag.
- Define the query driven stylesheets as “alternate stylesheet” and allow the query tag to turn them on if and only if the query tag is supported, and the query is true.
- I would also add another tag called “group”. If the media query finds a true condition, it will activate that stylesheet. If that stylesheet is a member of a named group, all of the other stylesheets in that group will be deactivated.
The designer can now create a series of stylesheets for different ranges of media query results, label all the stylesheets with the same group name, set rel for all but one to alternate stylesheet and set the default to stylesheet. If media queries is not supported the default will be the only active stylesheet. If media queries is supported by that browser it will find a true condition in the query tag, activate that stylesheet, see that it is a member of a group, and turn off the default stylesheet unless that was the one with the true query result.
WOW, a simple change and now all the browser support the same code!