Ouput all the page's media queries in a list

Posted by alecrust on Stack Overflow See other posts from Stack Overflow or by alecrust
Published on 2012-09-16T21:23:45Z Indexed on 2012/09/16 21:37 UTC
Read the original article Hit count: 270

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>

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery