title: How to access Cascading Variables from JavaScript?
body: <p>I have defined a style sheet using <a href="http://dev.w3.org/csswg/css-variables/#the-CSSVariablesMap-interface" rel="nofollow">Cascading Variables</a>.</p>
  
  <pre><code>:root {
          --media: narrow;
  }
  
  @media all and (min-width: 30rem)
  {
          :root {
                  --media: wide;
          }
  }
  </code></pre>
  
  <p>Firefox understands this and shows me the property in the Inspector.</p>
  
  <p>But how to read it from JavaScript?</p>
  
  <p>I tried it with jQuery 2.1.3 but it does not seem to work:</p>
  
  <pre><code>$('html').css('--media')
  undefined
  $('html').css('media')
  undefined
  $(':root').css('media')
  undefined
  </code></pre>
  
  <p>Which native function I have to use?</p>