Any Day Can Be CSS Naked Day
A while ago, I coded a little script that allowed me to append
?noCSS to a page on my website and it would automatically strip all the styles from the document, leaving solely the pure HTML. It was a neat little trick to ensure I kept my HTML semantic over time.
Fast forward to now, I was recently browsing Twitter (against my better judgement) and learned about a thing called CSS Naked Day from @zachleat. It reminded me of my old query param hack which could make it CSS naked day any day of the week.
Doing it at anytime isn’t a new idea. Zach does this on his website, providing the ability to toggle the visibility of styles.
Also, when I looked up Zach’s tweet that made me think of my old query parameter, I stumbled on this tweet from @mxbck along the same lines:
I somehow never noticed that @zachleat's site has an on/off switch for CSS & webfonts in the footer and damn I ❤️ heart that idea. every day can be CSS naked day!
This is all a long way of saying: I made a thing to turn styles on/off on the client. Rather than stick a UI control on the screen, my approach is via the URL bar. Essentially, you add a little script to your website, add the
?css-naked query param to any page you load, and your styles will be gone. You can navigate from page to page and it will persist your choice of stripping out styles until you opt-out. Check out the code for css-naked on Github.
Try It Out
Want to see how it works? You can try it on any page on the web! To do so, load a web page with the query param
?css-naked, open the console in the browser’s DevTools, and run this dynamic import:
If you embed it on your site, it’ll persist your choice to be in “CSS Naked Mode” across pages.
Technical Notes For Those Interested
Why is the script a module? I use some ES6 syntax in my CSS naked script, which is why the usage examples request you import the script as a module. It’s a lazy way of ensuring browsers using the script cut the mustard of this modern syntax. No ESM support? No problem. Nothing breaks. It simply won’t work. Could I have written it in ES5 or below? Yeah, but what fun is that?
How does it work? Go ahead and read the code, it’s short. In essence, the script digs into the DOM and strips out all
<link rel="stylesheet" > tags, then finds any DOM nodes with a
style attribute and clears it.