title: Media queries, bootstrap and css3-mediaqueries-js - is the media type (screen, handheld, etc) optional?
body: <p>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 &amp; 8 don't support media queries, I grabbed a copy of the <a href="http://code.google.com/p/css3-mediaqueries-js/" rel="nofollow">css3-mediaqueries-js</a> polyfill script so that IE would start behaving responsively. It didn't work :-(</p>
  
  <p>After a lot of head-scratching I narrowed the issue down to the media query syntax. Bootstrap's media queries are:</p>
  
  <pre><code>@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
  </code></pre>
  
  <p>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 <code>@media</code> and the <code>(...)</code> expression, for example:</p>
  
  <pre><code>@media all and (max-width: 480px) { ... }
  </code></pre>
  
  <p>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:</p>
  
  <blockquote>
    <p>A media query consists of a media type and zero or more expressions
    that check for the conditions of particular media features.</p>
  </blockquote>
  
  <p><a href="http://www.slideshare.net/maxdesign/css3-media-queries" rel="nofollow">A slightly less authoritative source (Russ Weakly)</a> says the opposite:</p>
  
  <blockquote>
    <p>A media feature can be used without a media type or keyword. The media
    type is assumed to be "all". (slide 42)</p>
  </blockquote>
  
  <p>More importantly, this is how browsers that natively support media-queries behave.</p>
  
  <p>So which needs fixing, bootstrap or css-mediaqueries-js?</p>