Snippets

Ben Buchanan css naked day javascript

Updated by Ben Buchanan
View revision

File snippet.js Modified

  • Ignore whitespace
  • Hide word diff 
+/*! CSS Naked Day script v2.0 | The MIT License (MIT) Copyright (c) 2015 Ben Buchanan http://opensource.org/licenses/MIT */
 /*
-Quick and dirty CSS Naked Day script - removes all linked, embedded and inline styles on April 9th.
-Works in IE9+, noting conditional comments may still cause problems. Better to do this server-side if you can.
-The MIT License (MIT) Copyright (c) 2015 Ben Buchanan http://opensource.org/licenses/MIT
+Removes all linked, alternate, embedded and inline styles on April 9th (unless set to ignored). Works in IE11 and evergreen browsers.
+Changes: 2020.08.23 v2.0 - Updated to catch alternate stylesheets & added ignore feature.
 */
 (function(){
-    var today = new Date(), month = today.getMonth(), day = today.getDate(), elements, attrs;
-
-    if (document.querySelectorAll && month === 3 && day === 9) {
-
-        // Remove all linked stylesheets and style blocks
-        elements = document.querySelectorAll('link[rel="stylesheet"], style');
-        for (var i = 0; i < elements.length; i++) {
-            elements[i].parentNode.removeChild(elements[i]);
-        }
-
-        // Remove all inline styles
-        attrs = document.querySelectorAll('[style]');
-        for (var ii = 0; ii < attrs.length; ii++) {
-            attrs[ii].setAttribute('style', '');
-        }
-
-        // Inject a message at the top of the document
-        var message = document.createElement('div');
-        var body = document.getElementsByTagName('body')[0];
-        message.innerHTML = '<p>Why is this page looking so simple? It\'s <a href="https://css-naked-day.github.io">CSS Naked Day</a>!</p><hr>';
-        body.insertBefore(message, body.firstChild);
+
+  var today = new Date(),
+      month = today.getMonth(),
+      day = today.getDate(),
+      elements,
+      attrs;
+
+  // For testing:
+  // month = 3; day = 9;
+
+  if (document.querySelectorAll && month === 3 && day === 9) {
+
+    // Add data-cssnakedday="ignore" to any element you want this script to ignore/not remove.
+    // Useful if you have CSS supporting functionality that should still work during naked day.
+    function notIgnored (el) {
+      return (el.getAttribute('data-cssnakedday') != "ignore")
+    }
+
+    // Remove all linked stylesheets and style blocks
+    elements = document.querySelectorAll('link[rel~="stylesheet"], style');
+    for (var i = 0; i < elements.length; i++) {
+      if(notIgnored(elements[i])) {
+        elements[i].parentNode.removeChild(elements[i]);
+      }
+    }
+
+    // Remove all inline styles
+    attrs = document.querySelectorAll('[style]');
+    for (var ii = 0; ii < attrs.length; ii++) {
+      if(notIgnored(attrs[ii])) {
+        attrs[ii].removeAttribute('style');
+      }
     }
+
+    // Inject a message at the top of the document. Optional - just remove this section if you don't want it.
+    var message = document.createElement('div');
+    var body = document.getElementsByTagName('body')[0];
+    message.innerHTML = '<p>Why is this page looking so simple? It\'s <a href="https://css-naked-day.github.io">CSS Naked Day</a>!</p><hr>';
+    body.insertBefore(message, body.firstChild);
+
+  }
 })();
Updated by Ben Buchanan
View revision

File snippet.js Modified

  • Ignore whitespace
  • Hide word diff 
     if (document.querySelectorAll && month === 3 && day === 9) {
 
         // Remove all linked stylesheets and style blocks
-        elements = document.querySelectorAll('link, style');
+        elements = document.querySelectorAll('link[rel="stylesheet"], style');
         for (var i = 0; i < elements.length; i++) {
             elements[i].parentNode.removeChild(elements[i]);
         }
Updated by Ben Buchanan
View revision

File snippet.js Modified

  • Ignore whitespace
  • Hide word diff 
 
     if (document.querySelectorAll && month === 3 && day === 9) {
 
+        // Remove all linked stylesheets and style blocks
         elements = document.querySelectorAll('link, style');
         for (var i = 0; i < elements.length; i++) {
             elements[i].parentNode.removeChild(elements[i]);
         }
-        
+
+        // Remove all inline styles
         attrs = document.querySelectorAll('[style]');
         for (var ii = 0; ii < attrs.length; ii++) {
             attrs[ii].setAttribute('style', '');
         }
 
-        // optional message
+        // Inject a message at the top of the document
         var message = document.createElement('div');
         var body = document.getElementsByTagName('body')[0];
-        message.innerHTML = '<p>Why is this page looking so simple? It\'s <a href="https://groups.google.com/forum/#!forum/css-naked-day">CSS Naked Day</a>!</p><hr>';
+        message.innerHTML = '<p>Why is this page looking so simple? It\'s <a href="https://css-naked-day.github.io">CSS Naked Day</a>!</p><hr>';
         body.insertBefore(message, body.firstChild);
     }
 })();
Updated by Ben Buchanan
View revision

File snippet.js Modified

  • Ignore whitespace
  • Hide word diff 
 (function(){
     var today = new Date(), month = today.getMonth(), day = today.getDate(), elements, attrs;
 
-    if (document.querySelectorAll && month === 4 && day === 9) {
+    if (document.querySelectorAll && month === 3 && day === 9) {
 
         elements = document.querySelectorAll('link, style');
         for (var i = 0; i < elements.length; i++) {
Created by Ben Buchanan
View revision

File snippet.js Added

  • Ignore whitespace
  • Hide word diff 
+/*
+Quick and dirty CSS Naked Day script - removes all linked, embedded and inline styles on April 9th.
+Works in IE9+, noting conditional comments may still cause problems. Better to do this server-side if you can.
+The MIT License (MIT) Copyright (c) 2015 Ben Buchanan http://opensource.org/licenses/MIT
+*/
+(function(){
+    var today = new Date(), month = today.getMonth(), day = today.getDate(), elements, attrs;
+
+    if (document.querySelectorAll && month === 4 && day === 9) {
+
+        elements = document.querySelectorAll('link, style');
+        for (var i = 0; i < elements.length; i++) {
+            elements[i].parentNode.removeChild(elements[i]);
+        }
+        
+        attrs = document.querySelectorAll('[style]');
+        for (var ii = 0; ii < attrs.length; ii++) {
+            attrs[ii].setAttribute('style', '');
+        }
+
+        // optional message
+        var message = document.createElement('div');
+        var body = document.getElementsByTagName('body')[0];
+        message.innerHTML = '<p>Why is this page looking so simple? It\'s <a href="https://groups.google.com/forum/#!forum/css-naked-day">CSS Naked Day</a>!</p><hr>';
+        body.insertBefore(message, body.firstChild);
+    }
+})();
HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.