Different Stylesheets for Browsers With and Without JavaScript
As hacks go, this one is pretty obvious, but I thought I’d throw it
out there anyway.
Let’s say there are three stylesheets you want to use on your web
page: one for all browsers (style.css), one for browsers with
JavaScript enabled (style-js.css), one for browsers without
JavaScript (style-nojs.css). This can be useful for things
like “display the fancy drop-down menu only if the browser supports
JavaScript; display the plain-HTML menu only if the browser doesn’t
support JavaScript”.
The common stylesheet is pretty standard:
<link rel="stylesheet" type="text/css" href="style.css"/>
The one for browsers that don’t support JavaScript is also pretty
easy: that’s what <noscript> is for:
<noscript> <link rel="stylesheet" type="text/css" href="style-nojs.css"/> </noscript>
Finally, what’s the best way to have different behavior in browsers
that support JavaScript? Why, run a script, of course:
document.write('n');