simplify code to hide body before rendering

Author: mattgarrish

js/init.js

@@ -14,9 +14,9 @@ const lang = document.documentElement.lang ? document.documentElement.lang.toLow
 var msg, topic_list, sc_map;
 
 /* hack to eliminate the flash of unstyled content */
+document.documentElement.style.display = 'none';
+
 
-createCSSSelector('.hidden', 'display: none');
-document.documentElement.classList.add('hidden');
 
 
 /* 
@@ -1475,7 +1475,7 @@ const loadPage = async () => {
 
 	kb.writeTemplate();
 
-	document.documentElement.classList.remove('hidden');
+	document.documentElement.style.display = 'block';
 
 	// ensure target location gets scrolled into view
 	var hash = window.location.hash;
@@ -1533,74 +1533,5 @@ const loadPage = async () => {
 		script.setAttribute('src', '/js/google-clean.js');
 
 	document.body.insertAdjacentElement('beforeEnd', script);
-}
-
-
-/* adds initial hidden class */
 
-function createCSSSelector (selector, style) {
-	
-	if (!document.styleSheets) return;
-	
-	if (document.getElementsByTagName('head').length == 0) return;
-	
-	var styleSheet,mediaType;
-	
-	if (document.styleSheets.length > 0) {
-		for (var i = 0, l = document.styleSheets.length; i < l; i++) {
-		if (document.styleSheets[i].disabled) 
-		continue;
-		var media = document.styleSheets[i].media;
-		mediaType = typeof media;
-		
-		if (mediaType === 'string') {
-			if (media === '' || (media.indexOf('screen') !== -1)) {
-				styleSheet = document.styleSheets[i];
-			}
-		}
-		else if (mediaType=='object') {
-			if (media.mediaText === '' || (media.mediaText.indexOf('screen') !== -1)) {
-				styleSheet = document.styleSheets[i];
-			}
-		}
-		
-		if (typeof styleSheet !== 'undefined') 
-			break;
-		}
-	}
-	
-	if (typeof styleSheet === 'undefined') {
-		var styleSheetElement = document.createElement('style');
-		styleSheetElement.type = 'text/css';
-		document.getElementsByTagName('head')[0].appendChild(styleSheetElement);
-		
-		for (i = 0; i < document.styleSheets.length; i++) {
-			if (document.styleSheets[i].disabled) {
-				continue;
-			}
-			styleSheet = document.styleSheets[i];
-		}
-		
-		mediaType = typeof styleSheet.media;
-	}
-	
-	if (mediaType === 'string') {
-		for (var i = 0, l = styleSheet.rules.length; i < l; i++) {
-			if(styleSheet.rules[i].selectorText && styleSheet.rules[i].selectorText.toLowerCase()==selector.toLowerCase()) {
-				styleSheet.rules[i].style.cssText = style;
-				return;
-			}
-		}
-		styleSheet.addRule(selector,style);
-	}
-	else if (mediaType === 'object') {
-		var styleSheetLength = (styleSheet.cssRules) ? styleSheet.cssRules.length : 0;
-		for (var i = 0; i < styleSheetLength; i++) {
-			if (styleSheet.cssRules[i].selectorText && styleSheet.cssRules[i].selectorText.toLowerCase() == selector.toLowerCase()) {
-				styleSheet.cssRules[i].style.cssText = style;
-				return;
-			}
-		}
-		styleSheet.insertRule(selector + '{' + style + '}', styleSheetLength);
-	}
 }