<?php
  function isNakedDay() {
    $now = new \DateTime('now', new \DateTimeZone('UTC'));
    $start = new \DateTime('00:00, April 9', new \DateTimeZone('+14:00'));
    $end = new \DateTime('00:00, April 10', new \DateTimeZone('-12:00'));
    return $now >= $start && $now < $end;
  }
?>

Use it like this to disable stylesheets:

<head>
  …
  <?php if(!isNakedDay()) : ?>
    <link rel="stylesheet" href="styles.css" />
  <?php endif; ?>
  …
</head>

Revert CSS?!

This method is not the most performant one, but HTML elements will display as originally intended by the browser. It can be useful if you don’t manage the server yourself or if you want to keep the logic in your templates.

* { all: revert !important; } should reset all author styles to user or browser defined values.

In POSH, we can assign a cssnd class to <html> with JavaScript (or any other language of your choosing), then display a message at the top of the document:

At the very top of the <head>, add the following:

<style>
	.cssnd * { all: revert !important; }
</style>

<script>
	const today = new Date();
	const isCSSND = today.getMonth() + 1 === 4 && today.getDate() === 9;
	if (isCSSND) {
		document.querySelector('html').classList.add('cssnd');
	}
</script>

At the very end of the <body>:

<template id="cssnd-callout">
	My Site is celebrating <a href="https://css-naked-day.org/">CSS Naked Day</a>!
</template>

<script>
	if (isCSSND) {
		document.querySelector('body').prepend(document.querySelector('#cssnd-callout').content.cloneNode(true));
	}
</script>

If you need to keep some styling in your documents, you can use the following rule and add a no-cssnd class to any element. It will keep its styling, descendants included, until another cssnd is met:

@scope (.cssnd) to (.no-cssnd) {
	:scope, * {
		all: revert !important;
	}
}

Tools and plugins

Attention plugin developers! If you have a CSS Naked Day plugin for a popular CMS, or written in a programming language not listed here, feel free to open a pull request or drop us an email if you’re not familiar with Git.

You could use Ben Buchanan’s JavaScript snippet. Works anywhere, removes everything, buyer beware!
Jeff Triplett gives us a nice Django Snippet for you Python folk.
If you are a Gopher, check out the today-go package by David Somers.
Drupal users, get the module!
If you are a Rails developer, check out the css_naked_day_rails gem by Daniel Sellergren.
If you have lots of raw HTML, use this bash script to remove style sheets, style elements, and inline styles.

CSS Naked Day — Strip CSS

Don’t load CSS

With static site generators

With PHP

Revert CSS?!

Tools and plugins

Archives