Why, you might ask? Are there any non-masochistic reasons for turning off CSS? Heydon Pickering once tweeted that disabling CSS is a good way to check some accessibility standards:
Common elements like headings, lists, and form controls are semantic and still look good.
A visual hierarchy is still established with default styles.
The content can still be read in a logical order.
Images still exist as tags rather than getting lost as CSS backgrounds.
A WebAIM survey from 2018 reported that 12.5% of users who rely on any sort of assisted technology browse the web with custom stylesheets, which can include doing away with every CSS declaration across a site. And, if we’re talking about slow internet connections, ditching CSS could be one way to consume content faster. There’s also the chance that CSS is disabled for reasons outside our immediate control, like when a server has hiccups of fails to load assets.
As an experiment, I used five websites and a web app without CSS, and this post will cover my experiences. It wound up being a rather eye-opening adventure for me personally, but has also informed me professionally as a developer in ways I hope you’ll see as well.
But first, here’s how to disable CSS
You’re absolutely welcome to live vicariously through me in the form of this post. But for those of you who are feeling up to the task and want to experience a style-less web, here’s how to disable CSS in various browsers:
Chrome: There’s actually no setting in Chrome to disable CSS, so we have to resort to an extension, like disable-HTML.
Firefox: View > Page Style > No Style
Safari: Safari > Preferences… > Show Develop menu in menu bar. Then go to the Develop dropdown and select the “Disable Styles” option.
Opera: Like Chrome, we need an extension, and Web Developer fits the bill.
Internet Explorer 11: View > Style > No style
I couldn’t find a documented way to disable CSS in Edge, but we can remove CSS from it and any other browser programmatically via the CSS Object Model API in the DevTools console:
var d = document;
for (var s in S = d.styleSheets)
S[s].disabled = true;
for (var i in I = d.querySelectorAll([style]))
I[i].style = ;
The first loop disables all external and internal styles (in and