Media Queries change the "standards" again!

HTML & CSS
1

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.

  1. Leave the media tag alone.
  2. Add another tag, “query”, and put the conditional statements there. By existing standards, any browser not supporting queries would merely ignore the new tag.
  3. 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.
  4. 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!

2

Hi,

I’m not sure that inventing new tags/attributes is going to leave you any better off as of this moment. IE will just ignore them as it does with media queries so it’s the same situation. You would still have to wait for full browsers support before you could use them.

As you mention you can easily cater for IE8 and under with conditional comments anyway so its not that big a deal but just a little messy.

If you use the approach mentioned here you can cater for more or less anything now.

Devices have changed so fast in the last few years so its not surprising that some browsers are lagging behind. Maybe for the future something better is needed but media queries have been around for a while but browsers were slow to pick up on them.

3

My post was more of a rant on the lack of standards in the industry, a willingness of the big guys to change the standards on the fly and make all we have done in the past obsolete. As a developer who has been doing this for a long time, it is a pain that what you write for one browser does not function on another; everyone has their own standards.

It’s nice in the academic world to create something with a WOW factor and then tell your visitors what browser to use to see it, but in the real world you can’t do that. What good is it for a live company to have a site that looks great on Explorer but does not function properly on Firefox and Chrome. Companies can’t survive is they tell over 42% of their customers to go away!

And the idea of filling up your web pages with a bunch of IF statements, IF statements that will probably have to be changed when t browser revision comes out from each browser manufacturer, is a really lousy answer.

The fact that Microsoft, because of the W3c “standards”, has implemented something that literally requires IF statements to run on all browsers without crashing really sucks.

4

The words standards and microsoft don’t usually belong in the same sentence :slight_smile: However, I do believe of late they have been working towards common goals and IE9 will be a lot better than anything that went before.

I’m not sure what you are getting at when you say: “that Microsoft because of the W3c standards has implemented something” ?

They (Microsoft) didn’t actually implement anything which is why it’s not working :). CSS is managed by the working group anyway and not specific companies.

I do agree it’s a shame that browsers aren’t consistent but I doubt that will ever be 100% true although they are converging more these days.