Optimal method of applying css with javascript

qwertyuiop

01-03-2012, 05:45 AM

I'm designing a page that uses javascript+css for enhanced interaction. However, if javascript is disabled, I'd still like the page to be functional, albeit less fancy. Likewise, if css is disabled, it still needs to be functional. Finally, if both js+css are disabled, the page will be quite bare but still usable.

For example, I use javascript to set a css style that hides certain panels of content. JS is used to toggle these and all is fine. If JS is disabled, then the css isn't applied, and all the content is visible (though not too pretty). If CSS is disabled, the inline CSS applied by the JS works fine. Finally, if both are disabled, all the content is visible.

I'm wondering what's the best way to do this. Currently, I set the styles like this in the js file:

function initialize() {
// set styles, for example:
document.getElementById("panel").style.display = "none";
}

var onloadFlag = false;
document.onreadystatechange = function() {
if (!onloadFlag) {
onloadFlag = true;
initialize();
}
};

// for older browsers
window.onload = function() {
if (!onloadFlag) {
onloadFlag = true;
initialize();
}
};

The problem that sometimes comes up is I see the "fallback" styles briefly, before the JS kicks in and applies the enhanced css. How can I avoid this?

rnd me

01-03-2012, 04:47 PM

define all your styles in css linked in <head> to prevent flashing from late-executing scripts.

add a nojs tag to your body, and remove the class with javasci[pt right away.
that way, you can place all the rules in css along with your regular styles.
this keeps everything in onl place and in the same language.

<body class="nojs">
<script>document.body.className=document.body.className.replace(/\]bnojs\b/,"");</script>

then in css for example,

h1 { color: red; }
.nojs h1 { display: none; }

qwertyuiop

01-04-2012, 02:51 AM

Thanks rnd_me, I like this technique. By the way, is the way I'm initializing (onload & onreadystatechange) the fastest way to modify the body's class?

And just to clarify, the flash was not of unstyled content, it was of the default css if JS isn't enabled. When the JS finally loads, it overrides the default styles with enhanced ones.

rnd me

01-04-2012, 04:12 PM

Thanks rnd_me, I like this technique. By the way, is the way I'm initializing (onload & onreadystatechange) the fastest way to modify the body's class?

no, it's the slowest. i already posted the fastest...

qwertyuiop

01-04-2012, 10:12 PM

Ah sorry I didn't catch the context of that line. I'd rather not have inline code though... I guess it's a tradeoff I'll have to consider. Thanks again.

VIPStephan

01-05-2012, 12:29 AM

You can as well add that class to the <html> element so you could have that line of JS in the document header like all the other scripts. But it doesn’t matter, really.

rnd me

01-05-2012, 06:12 PM

You can as well add that class to the <html> element so you could have that line of JS in the document header like all the other scripts. But it doesn’t matter, really.

i don't think <html> is valid with a class...

you could do it opt-in. i was thinking that would result in a lot of extra css selector text, but i guess you would only need it on the few elements affected by scripting...
in that case, set the default css to hide non-js stuff, and add ".js " in front of any rule that should apply only when javascript is enabled.

then, you can use:
<script>document.documentElement.className+=" js";</script>

as far as the inline is concerned, i agree philosophically, but every major page has a lot of this going on these days, so you won't be judged very harshly.
i mean, look at the source of huffington post or nyt for pete's sake!!!

i think it would be a bigger crime to load that one line of text from an external file, and all the overhead that brings with it... if you are already linking some js from the head, place the line above atop that external files's code.

VIPStephan

01-05-2012, 10:59 PM

i don't think <html> is valid with a class...

OK, you’re right with that. I usually take the opposite approach and add a class to the document with JS to use as selector, and had no problems adding it to the <html> element and using it that way (the validator doesn’t check DHTML).