Toggle your web design with one keypress

CSS goes on, CSS goes off

When I’m working with CSS, I often want to turn it off temporarily. Maybe I’m looking for a ‘default styles’ screenshot or I’m trying to debug an issue with the cascade. Sometimes, I just want to compare my current design with the default—if it’s clean and semantic, it should still look good without CSS, right?

Whatever the reason, my solution is simple: the following 27 lines of JavaScript. This code actually contains a couple of alternatives and a helper function to support them; you can trim it down considerably if you want.

disable_stylesheets_hold() is my preferred version. It turns stylesheets off while you hold the Esc key, then reinstates them when you let go. This makes for a really quick check to compare before and after designs.

You can also use disable_stylesheets_toggle which turns CSS on/off each time you press Esc. This version is useful for more in-depth checking, so you can use dev tools and inspect the page while styles are disabled, for example.

Both are made possible by the StyleSheet.disabled property which offers a trivially easy way of turning individual stylesheets off.