Comments on: Understanding and solving the JavaScript/CSS entanglement phenomenon

By: joe

joe — Sat, 17 Feb 2007 02:51:39 +0000

I prefer not supporting non-js browsers. F ‘em.

By: noname

noname — Fri, 16 Feb 2007 23:41:29 +0000

I’m using this method to switch skins

By: cedsav

cedsav — Fri, 16 Feb 2007 19:04:31 +0000

Want another method (not necessarily better) ?
Add the js only stylesheet as an alternate stylesheet. Then use javascript to enable it. More about it here (posted in April 2005:-) :
http://www.formassembly.com/blog/javascript-enabled-stylesheets/

By: michael

michael — Fri, 16 Feb 2007 16:42:04 +0000

I do this all the time. coupled with Dean’s window.onload solution it looks something like:
var dynPage = { DOMavailable : null, init:function() { // quit if this function has already been called if (arguments.callee.done) return;


		// flag this function so we don't do the same thing twice

		arguments.callee.done = true;
		// kill the timer

		if (_timer) {

			clearInterval(_timer);

			_timer = null;

		}
		dynPage.DOMavailable = true;

		dynPage.enable();
		// load the other functions

	},

enable:function() { document.body.className += ' dynamic'; } }

By: Peter Frueh

Peter Frueh — Fri, 16 Feb 2007 16:07:05 +0000

This situation is one of the few exceptions where document.write is really useful. I like to set up the HTML and CSS as if it’s all the browser can handle, and then document.write an override stylesheet with JS — which usually is just a bunch of #element { display:none; } statements. It looks like this:

IN HEAD (all unobtrusive external files):
1. CSS stylesheet for JS-disabled browsers
2. JS that document.writes an override stylesheet
3. JS for rearranging/behavior

IN BODY:
Clean (X)HTML markup for JS-disabled browsers/search engines

By: Scott Schiller

Scott Schiller — Fri, 16 Feb 2007 16:05:35 +0000

You can also append this to the HEAD within the first nested script block pretty reliably, eg. getElementsByTagName(‘head’)[0].className = .. and then match with CSS, head.isIE div {}, and so on. I believe someone from MSFT published a related article on filtering (as Mark Wubben mentioned) via class name this way last year. It’s pretty effective.

By: Ara Pehlivanian

Ara Pehlivanian — Fri, 16 Feb 2007 15:33:11 +0000

Chris Heilmann: I guess I missed that post. Interesting how people come out of the woodwork with solutions that are similar (if not identical) that they probably came to on their own :-).

Mark Kahn: I’m leaning more towards that approach since it allows for the storage of js only css in a separate file and removes the need for prefixing every rule with “hasJS”.

By: sam

sam — Fri, 16 Feb 2007 14:08:33 +0000

I use the same tactics as described here since a while back. It seems as obvious as the kind of test you run to detect browser abilities:

really short example:
if(!document.getElementById) return false; // and thus kill all the script if($('hideMe')) $(hideMe).className += " hidden"; // hide choosen elem.

By: Dashifen

Dashifen — Fri, 16 Feb 2007 13:55:30 +0000

I’ve used a similar trick to hide and show interfaces which require javascript. Create a .show CSS selector that has a default rule of display: none; Then, use javascript to include a second, separate .css file with two rules: .show { display: block; } and .hide { display: none; }. Then, on pages which need to hide a whole portion of code from non-javascript browsers, put the javascript-requiring code in the .show element (which will be hidden if javascript doesn’t include the “extra” .css file) and messages and/or other interface elements within the .hide element (shown unless javascript hides it). Essentially the same concept as above, just executed somewhat differently.

Excellent post. Thanks!

By: Mark Kahn

Mark Kahn — Fri, 16 Feb 2007 12:46:48 +0000

Um…let’s try this again…

[noscript]
[link rel="stylesheet" href="my.css" type="text/css"]
[/noscript]
[script]
var css = document.createElement(‘LINK’);
// set attributes, append to head
[/script]

By: Mark Kahn

Mark Kahn — Fri, 16 Feb 2007 12:45:54 +0000

My personal preference is to do this:

var css = document.createElement(‘LINK’);
// set attributes, append to head

That way I can just manage two seperate stylesheets which usually @import a third common one.

By: Kjell

Kjell — Fri, 16 Feb 2007 11:24:50 +0000

yup. .. i am used these tactics and even more: Besides hiding/showing JS related elements, i also save the non-js-user from downloading my javascript files – since he is not going to parse them anyways. ;)
This saves traffic and speeds up the page loads. Once that is handled i try shaping the load precedure by sorting out what scripts are needed first and where.. aka. intelligent script loading.

By: Edwin

Edwin — Fri, 16 Feb 2007 09:40:35 +0000

I’m using this for my current project. Works great. Except you might initially see the non-js version for a fraction of a second (even when called onDomReady).

You also have to use a “addClass”-function, because the body might already have one or more classes.

By: Andrea Giammarchi

Andrea Giammarchi — Fri, 16 Feb 2007 09:02:24 +0000

I think updated solution is better, without script inside the body, just “classing” the documentElement. Simple and clear.

By: Mark Wubben

Mark Wubben — Fri, 16 Feb 2007 08:54:29 +0000

You can do the same thing with browser names and versions. This lets you specify CSS workarounds for the JavaScript version without relying on CSS hacks.

The code posted does have a bug though: by simply adding “hasJS” to the class name, it will affect classes already there. So “foo” becomes “foohasJS”.

By: Wiktor

Wiktor — Fri, 16 Feb 2007 08:53:09 +0000

I found this trick in Drupal, in /misc/drupal.js.
// Global Killswitch on the element if (isJsEnabled()) { document.documentElement.className = 'js'; }
The code is taken from 4.7.6.

By: Florian

Florian — Fri, 16 Feb 2007 08:11:20 +0000

wow, very clever ^^

I think I will use that in the future quite often ;)