«
»

Responsive WebDesign and How to Disable Media Queries

January 18th, 2013

Horizontal scrolling is nasty, on both desktop and phones, so Responsive WebDesign comes in hand to adapt the width of a webpage to the width of a screen. That’s in the interest of most users.

But although the adagium “Mobile First‘ has won ground lately which, more or less, made websites look simpler and made them more focused on content, a lot of websites keep there overloaded layout and simply hide content for mobile phones with media queries. In those cases it would be nice if you can disable/kill media queries to access the other content.

Bruce Lawson wrote an article about whether or not it would be nice to have native support for disabling RWB (Repsonsive Web Design). I guess, yeah, it would be nice, but why not add a disabled property to the specs/implementation for the CSSMediaRule-object. That would make it easy.

Access CSS and Stylesheets in javascript

To disable a (first) stylesheet, simply do this:

document.styleSheets[0].disabled

Yes, you can toggle them on/off with javascript.

A styleSheet  has a CSSRules property which contains a list of CSSStyleRule-objects and  CSSMediaRule-objects. The first are CSS-rules, the second mediaqueries, which have a CSSRules property with a collection of CSSRules.

CSS tree

document.styleSheets[0]
- cssRules
- CSSStyleRule
- cssText "body {max-width:80%;}"
- CSSMediaRule           "@media screen and (max-width: 800px) {...}
- cssRules
- CSSStyleRule
- cssText "body {width:100%;}"

Unfortunately nor a CSSStyleRule nor a CSSMediaRule-object has a `disabled` property. With other words, you can’t toggle them on/off.

A pity.

Bookmarklet

A simple bookmarklet/scriplet can do the job now, but using the proposed disabled property can make the code cleaner:

Disable MediaQueries / Responsive Webdesign

The code

[].slice.call(document.styleSheets).forEach(function(sheet) {
[].slice.call(sheet.cssRules).forEach(function(rule) {
if (rule.media){     rule.cssText = rule.cssText.replace(/(screen|all|handheld)/, "**$1**");}
});
 });

It wouldn’t be that difficult to write an extension, that let you choose which mediaquery to disable. I might just do that this weekend.

This entry was posted on Friday, January 18th, 2013 at 1:34 pm and is filed under Webtechnology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “Responsive WebDesign and How to Disable Media Queries”

  1. Kevin Copple Says:
    February 3rd, 2014 at 4:25 am

    My desire is to enable a user to zoom in on a webpage without having the (Skeleton adaptive site) page re-flow. Optional, of course. If only my javascript and CSS skills were up to the level I’d like! I’m taking a look at “Letting users disable responsive layout” at http://www.456bereastreet.com/archive/201303/letting_users_disable_responsive_layout/

Leave a Reply