I didn't come up with this one:
http://webreflection.blogspot.com/2007/09/noscript-problems-just-fixed.htmlThis method appears to work perfectly on a flat html file, but my sites are done in php now and so it doesn't work for me. I'm efforting a work-around. I understand this method nearly entirely except the need for multiple "session_start()"'s. Especially since my site is already php... I do believe my session has already started by the time it gets to a point where she requested a session_start(). I definitely like this better than the cookie method. The cookie method WILL FAIL if the user doesn't have cookies enabled, and there's the side effect of an infinite loop in nearly every iteration I've seen of this method since the coder in question almost never considers that. But here's the thing: your client is capable of viewing JavaScript. If your client is NOT viewing JavaScript they've disabled it. If they had the foresight to disable JavaScript, it is highly unlikely that they allowed cookies. Using session variables is a nice work around since the values will be stored as cookies if cookies are allowed... and sent as query strings if they are not. Handled entirely server side, and no one has to know. It's a good method.
I reiterate: everyone can view JavaScript. Forget that whole bullshit 10% rule. No such thing. There's a 10% that might be utilizing NoScript or may have disabled JavaScript in the browser. Funny thing though... those browsers still perform JavaScript. Even with NoScript active. I've tested. So the options are some really ugly inline code that WILL run, or we can pretend that what the browser says is true and attempt to have the page degrade nicely. For flat html files, the solution is pretty simple... make three files:
index.htm:
<head>
<script type="text/javascript" src="cssFilter.php"><!--// CSS Filter //--></script>
<link rel="stylesheet" media="all" href="myPage.php" />
</head>
cssFilter.php:
<?php
session_start();
$_SESSION['JavaScript'] = true;
header('Content-Type: text/javascript');
exit('this;');
?>
myPage.php:
<?php
session_start();
$output = file_get_contents(
isset($_SESSION['JavaScript']) && $_SESSION['JavaScript'] === true ?
'scriptEnabled.css':
'scriptDisabled.css'
);
header('Content-Type: text/css');
header('Content-Length: '.strlen($output));
$_SESSION['JavaScript'] = false;
exit($output);
?>
The above is a rather elegant work-around to using <noscript> in the head since that no longer validates. Unfortunately, since I'm building my head WITH php, the calls aren't made... at least not quickly enough. The session variable does not get set. I tried to inline some of it and found that it would always throw on the javascript disabled version of css, so... no dice. What I'll end up doing is just combining the default version of the css and redeclare a lot of css if js is enabled.
The way I built my site though: I'm assembling the navigation menu with CSS and javascript. Two versions of CSS, one for a 1024x768 or larger screen, the other for an 800x600 screen. I need javascript to detect the resolution. So if JavaScript isn't available for use, I'd like to revert to the larger CSS version... force those kids to have to scroll, fine. But then I also had this nifty effect on the menu elements where they slide in... so really I want the CSS to make the elements "hidden" until they slide in as well. Now I could default to the larger version... load the smaller version with javascript if it's available... but that means the small screen people will have to load both versions of the graphics and will have a second or two delay while that happens. But the other down side of not having the help of the above method is that I can't have the elements hidden by default since they'll only be made visible again by javascript. So even WITH javascript enabled the menu items will be visible in their final homes for a moment before vanishing and then sliding back in. So, gross. I noticed that in browsers other than IE, it happens so quickly you can't see it. I don't mean blink and you'll miss it... I mean... it never happened. It's THAT fast. Except when the resize is necessary... then it starts to look pretty ugly. I've got to get the timing down for IE and for smaller screens yet. A method like the above would help with that... the trick will be to get it working on a php site. I've asked the genius who came up with it for suggestions but haven't heard anything yet. I'll be doing some experimentation of my own. Stay tuned.