Laura Kalbag

CSS Naked Day 2020

Today is CSS Naked Day 2020. Inspired by Eric Meyer, I’m joining in for the first time in years, so today my website has no CSS.

Screenshot of my site without CSS. Black serif text on a white background stretching the full width of the page. Blue links, some coloured purple because they’ve been visited.

What my site looked like on the 9th April 2020.

What’s the point?

The point of removing the CSS on your website is to draw attention to how the content still works in just plain HTML. It’s close to a visual equivalent to how screen readers access a website’s text content. Screen readers can’t interpret the fancy styles (mostly), but they still understand the content. You can still read the links and know heading text from body text. This is all because this website and its contents were written using semantic HTML. If you can see the page in your browser, the browser’s default styles present you with a little bit of formatting based on my HTML choices.

You should give it a try!

You don’t need to make your site naked for all the public to see. Maybe just try it in the privacy of your own home. Use it as an opportunity to find out where you’re using <div>s and <span>s where you could be using a more descriptive element. Try disabling styles in your developer tools and browsing other sites without CSS for the day. (Many of them are completely unusable! 🙃)

If you want to know more about semantic HTML, Eric Bailey published a blog post about using semantic markup just a couple of days ago, and it’s a great place to start.