Media queries, bootstrap and css3-mediaqueries-js - is the media type (screen, handheld, etc) optional?

Question

I've started a new responsive web project based on twitter's bootstrap framework (embarking on a LESS learning curve at the same time) and I've hit an issue with IE and media queries. As IE7 & 8 don't support media queries, I grabbed a copy of the css3-mediaqueries-js polyfill script so that IE would start behaving responsively. It didn't work :-(

After a lot of head-scratching I narrowed the issue down to the media query syntax. Bootstrap's media queries are:

@media (max-width: 480px) { ... }                         // Landscape phones and down
@media (max-width: 767px) { ... }                         // Landscape phone to portrait tablet
@media (min-width: 768px) and (max-width: 979px) { ... }  // Portrait tablet to landscape and desktop
@media (min-width: 1200px) { ... }                        // Large desktop

Turns out these aren't parsed correctly by css3-mediaqueries-js as the script expects there to be a media type - screen, handheld, all, etc - in between the @media and the (...) expression, for example:

@media all and (max-width: 480px) { ... }

The question is, which is correct, bootstrap or css3-mediaqueries.js? The W3C spec (http://www.w3.org/TR/css3-mediaqueries/#media0) says css3-mediaqueries.js is right and bootstrap is wrong:

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features.

A slightly less authoritative source (Russ Weakly) says the opposite:

A media feature can be used without a media type or keyword. The media type is assumed to be "all". (slide 42)

More importantly, this is how browsers that natively support media-queries behave.

So which needs fixing, bootstrap or css-mediaqueries-js?

Solution

Similar (answered) question here: Twitter Bootstrap 320andup Implementation

I've ditched css-mediaqueries-js in favour of respond.js which is happy with no media type.

My question about which approach is 'right' still stands though, although it's more of a standards question than an implementation question. I reckon the current browser approach of media type NOT being mandatory is likely to win the day. That would mean css3-mediaqueries-js needs some updating to handle this.

Thanks to Christian Müller for his input on this.

Comments

[Xavier]

respond.js seems to work a bit better than css3-mediaqueries-js (+1)

[PCA]

But the author who written the respond.js says at the bottom, that css3-mediaqueries.js supports lot of features the his respond.js polyfill. Since i'm also beign new in starting the RWD development, confused of using which polyfill for the fall back versions.