Flash your Semantic HTML

With CSS naked day 2021 imminent I wanted to quickly verify the semantic HTML of this website.

If the term "semantic HTML" is unfamiliar Bruce Lawson's practical value of semantic HTML describes it as:

A posh term for choosing the right HTML element for the content.

And if you haven't heard of CSS naked day – and feared Googling the term, or clicking the link – it involves removing all CSS to help promote web standards.

Of course, spinning up my site locally and commenting out/ removing the CSS by hand would suffice. However the idea of testing in production before CSS naked day arrived was rather enticing.

Show me the code #

Simply run the following function in your browser console to remove all external/ internal and inline CSS styles:

function stripCSS() {
  /*
    Remove external[1] and internal[2] CSS
    1. .css files included with `<link rel="stylesheet`
    2. `<style></style>` elements collocated in HTML document
  */
  Array.from(document.styleSheets).forEach((stylesheet) => 
    stylesheet.disabled = true
  );

  /*
    Remove inline[1] CSS
    1. `style` attribute applied to HTML elements
  */
  Array.from(document.querySelectorAll("*")).forEach((element) =>
    element.removeAttribute("style")
  );
}

At risk of stating the obvious, this function works on any website – so take it for a spin to see what lurks beneath!