Since its introduction in 2006, CSS Naked Day has seen over 2,400 websites throughout the world remove their CSS for an entire day in an effort to promote Web Standards. For more information, or if you have a website and would like to participate, visit the CSS Naked Day homepage.
Auto-stripping Your Site on CSS Naked Day
You don’t have to stay up until midnight on April 8th waiting to upload your entire website just to honor CSS Naked Day. Dustin has provided a list of Tools & Plugins on the CSS Naked Day homepage. Of course, I wouldn’t be content without a JavaScript equivalent to all of those server-side scripts.
Removing Styles Using JavaScript
This is a method I developed that lets you strip your site of stylesheets without requiring any server-side scripting technology (i.e. PHP, ASP, CF, etc.). Why? Because some sites don’t use server-side scripting technologies and/or some people may not be comfortable with writing server-side code.
To make it happen, add this function inside the head section of each page and invoke the celebrateCSSNakedDay() function. (This is, of course, assuming that you are <link>-ing to your stylesheets.)
<script type="text/javascript">
// CSS Naked Day!
// Visit naked.dustindiaz.com for details
function celebrateCSSNakedDay(date) {
var d = new Date();
if( (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear() == date ) {
var i, a;
for( i = 0; (a = document.getElementsByTagName("link")[i]); i++ ) {
if( a.getAttribute("rel").indexOf("style") != -1 ) a.disabled = true;
}
}
}
</script>
One way to invoke celebrateCSSNakedDay() is to add a window.onload event:
window.onload = function() {
celebrateCSSNakedDay('4/9/2008');
}
Alternatively, you can call it inline:
<body onload="celebrateCSSNakedDay('4/9/2008');">
You may have noticed that CSS Naked Day technically lasts for 48 hours (one international day). This poses a problem for most server-side scripts that rely on “server time” to calculate the entire 48 hour duration. With a JavaScript solution like the one above, the script relies on the client’s time which, if set properly, will coincide with the user’s local time zone.
Therefore, websites that use the JavaScript solution will only strip styles for users on April 9th, current to their local time.