title: Accessing CSS media query rules via JavaScript/DOM
body: <p>I've been using a number of libraries (including my own) to dynamically load assets based upon media queries I've outlined in CSS files. For example:</p>
  
  <p>In CSS:</p>
  
  <pre><code>  @media screen and (max-width: 480px) {
      .foo {
        display: none;
      }
    }
  </code></pre>
  
  <p><strong>And</strong> using an asset loader; <a href="http://requirejs.org/" rel="noreferrer">require.js</a>, <a href="http://modernizr.com/" rel="noreferrer">modernizr.js</a> etc or using <code>window.matchMedia</code> and associated <code>addListener()</code> functions:</p>
  
  <pre><code>  if (function("screen and (max-width: 480px)")){
      // Load several files
      load(['mobile.js','mobile.css']);
    }
  </code></pre>
  
  <p>Declaring them twice is awkward/silly and as far as I can find, all JS helper libraries and asset loaders require you to repeat the media queries rather than locating them <strong>programmatically</strong> from JS/DOM.</p>
  
  <p>So, I've been exploring the ability to access the values programmatically via <code>document.stylesheets</code>, but I'm not sure if they're accessible and there seems very little documentation to suggest they are. </p>
  
  <p>The furthest I've got is looking for <code>CSSMediaRule</code> and using <code>console.dir(document.stylesheets)</code> amongst others to explore the stylesheet object.</p>
  
  <p>But no references are made (within <code>document.stylesheets</code>) to the actual media query rules used in CSS - only the classes to be applied as a result of the media queries... What I'm trying to locate, programmatically, is:</p>
  
  <blockquote>
    <p>"screen and (max-width: 480px)"</p>
  </blockquote>
  
  <p>Is there any way of accessing such CSS Media query <strong>rules</strong> via JavaScript/DOM?</p>