Exposing HTML: The No-JS nudist CSS toggle

  Filed in: web development, css, accessibility

An image of light switches.
Image by Collin Knowels
Note: I'm getting more active by writing shorter form, more informal updates like this one.

A tiny footer checkbox to turns your site styles off with no JavaScript required.

It's refreshing to see your site with no CSS in play — it peels back the facade and exposes structural issues, giving a better view to how robots and persons with disabilities might experience the site.

And it's bonus points to add an easy tickbox to show it in action, doubly so if there's no need for JS.

Fortunately it was easy to add a CSS only trick:

body:has(#kh-css-toggle:checked) {
  .all-your-other-css {
    color: red;
  }
}

Now when <input type="checkbox" id="kh-css-toggle" isn't checked, the CSS is disabled.

Try it in the footer.

Neat.

No JavaScript. No build trickery. Just a checkbox in the footer and modern CSS.

I haven’t seen this exact pattern written up quite this simply; if you have, please let me know, I'd love to see how you did it.

In the name of not confusing users, I also added a banner that will only be visible when the CSS is off:

<!-- Visible when CSS is off (hidden by CSS when on) -->
<p class="kh-css-off-note">If you're reading this the site styles are currently disabled. Toggle the “CSS” checkbox in the footer to restore styling.<hr></p>

Sadly I'm far too late and many months early for CSS Naked Day on April 9.

Browser support footnote#

The :has() selector is broadly supported in modern browsers. Should it break CSS for older sites, at least I know the site will be functional.