title: Nesting @media rules in CSS
body: <p>Support seems to be different across browsers..</p>
  
  <p>Check the <a href="http://jsfiddle.net/uZnud/2/embedded/result/">link</a> </p>
  
  <p>Firefox: Black with white text.</p>
  
  <p>Opera, Chrome, IE9: Blue with black text.</p>
  
  <p>Which is correct and how would I make it consistent?</p>
  
  <p>The code</p>
  
  <pre class="lang-css prettyprint-override"><code>@media screen and (min-width: 480px) {
  
      body{
          background-color:#6aa6cc;
          color:#000;    
      }
  
      @media screen and (min-width: 768px) {
  
          body{
              background-color:#000;
              color:#fff;    
          }
      }
  }
  </code></pre>
  
  <p>​</p>
  
  <p>Interestingly enough it appears that nesting media queries within a conditional <code>@import</code> does seem to work.</p>
  
  <p>e.g:</p>
  
  <h3>Index.html</h3>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Media test&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="importer.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Why is this not consistent.&lt;/h1&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h3>importer.css</h3>
  
  <pre class="lang-css prettyprint-override"><code>@import url(media.css) screen and (min-width: 480px);
  </code></pre>
  
  <h3>media.css</h3>
  
  <pre class="lang-css prettyprint-override"><code>body {
      background-color: #6aa6cc;
      color: #000;
  }
  
  @media screen and (min-width:768px) {
      body {
          background-color: #000;
          color: #fff;
      }
  }
  </code></pre>