Ouput all the page's media queries in a list

Question

Using JavaScript, what would be the best way to output a list containing all media queries that are being applied to the current page.

I assume this would need to filtering to find embedded media queries i.e.

<link rel="stylesheet" media="only screen and (min-width: 30em)" href="/css/30em.css">

as well as media queries located in CSS files, i.e.

@media only screen and (min-width: 320px) {}

An example output of what I'm looking for:

<p>There are 3 media queries loaded on this page</p>
<ol>
    <li>30em</li>
    <li>40em</li>
    <li>960px</li>
</ol>

Answer 1

Please checkout this link. I used @sureshunivers code to parse and create li list.

var sheets = document.styleSheets;  //contains an object of all loaded stylesheets
var rules = sheets[i].cssRules; //The rules variable is list of all the rules of the current stylesheet represented as CSSRule objects.

Checkout this article- Reacting to media queries in javascript