Control which css media queries are applied via javascript

Question

Is a there way to control which css media query a browser obeys using javascript?

For example, if have the following css:

p { color : red; }
@media (max-width: 320px) {
    p { color: blue; }
}
@media (max-width: 480px) {
    p { color: green; }
}

Assuming I open the page in a desktop browser with width > 480px, I'll see red paragraphs. I would like to call a javascript function to have the browser obey the 320px media query. For example, call a function below that would turn paragraphs blue:

setMediaQuery('320px')

The use case for this is a CMS that allows users to keep a full-width desktop and test different media queries without having to resize their browser window.

Any ideas for solving this problem without an iframe? I've thought about loading all css into js and manipulating the styles there, but option seems prohibitively complex.

Use DOM inspector of your browser to see which CSS applied to your element... — JoDev, Oct 25 '13 at 15:07

T.J. Crowder · Accepted Answer · 2013-10-25T15:22:17.627

You can access the list of style sheets in the document via document.styleSheets. Each sheet is a CSSStyleSheet object, which has a list of rules. There's a kind of rule called a CSSMediaRule that contains the information for a media query, including the rules for that query and the media that it applies to. In theory, you could then change the media that it applies to.

MDN has some documentation on this, here's a starting point.

Here's a complete example that looks for a media rules matching (max-width: 320px) and changes them to (max-width: 2000px): Live Copy | Source

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Change Media Query</title>
<style type="text/css">
p { color: green }
@media (max-width: 320px) {
  p { color: red }
}
</style>
<meta charset="UTF-8">
</head>
<body>
<p>This is text turns red after two seconds</p>
<script>
setTimeout(function() {
    var sheets, sheetIndex, ruleIndex, sheet, rules, rule, media;

    sheets = document.styleSheets;
    for (sheetIndex = 0; sheetIndex < sheets.length; ++sheetIndex) {
      sheet = sheets[sheetIndex];
      rules = sheet.cssRules || sheet.rules;
      for (ruleIndex = 0; ruleIndex < rules.length; ++ruleIndex) {
        rule = rules[ruleIndex];
        if (rule.media && rule.media.mediaText === "(max-width: 320px)") {
          console.log("Changing 320px rule to 2000px");
          rule.media.mediaText = "(max-width: 2000px)";
        }
      }
    }
}, 2000);
</script>
</body>
</html>

Obviously that's very rough code, and I've only checked that it works on Chrome and Firefox. I know there are some differences in these objects in IE vs. others (see the rules = sheet.cssRules || sheet.rules; above, that's one of them). But it could be a starting point.

score 0 · Answer 2 · answered Oct 25 '13 at 15:11

I think users should have to resize a browser to see the different media queries. Especially if your media query is for devices below say 480px, then the people testing it should have to resize their browser to 480px to see what it will look like.

That's like saying I want to see what a site will look like on an Android phone but test it on an iPhone. It's just worth it to test the exact test case as closely as possible to the real scenario.

Halcyon · Answer 3 · 2013-10-25T15:20:12.790

You can't restrict media query from JavaScript, but this is not a problem; you solve this with more classes:

p { color : red; }
@media (max-width: 320px) {
    p { color: blue; }
    .force_red {
        color: red;
    }
}
@media (max-width: 480px) {
    p { color: green; }
    .force_blue p {
        color: green;
    }
}
.force_blue p {
    color: blue;
}

Minor disclaimer: don't name your class force_blue, that's a terrible name.

Script:

document.body.className = "force_blue";

Ideally, the only way your JavaScript affects your template is by adding or removing classes. This allows you make a template of each potential state and keeps it all nice and maintainable.

JSFiddle to demonstrate: http://jsfiddle.net/tafCC/1/

Text will go from green or red (depending on your viewport size), to blue. Once it's blue, it stays blue. Note: the max-width: 320px rule gets overriden by max-width: 480px, add a min-width too (fixed in my JSFiddle).

Control which css media queries are applied via javascript

3 Answers3

Linked