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:

  <link rel="stylesheet" type="text/css" href="style-nojs.css"/>

Finally, what’s the best way to have different behavior in browsers
that support JavaScript? Why, run a script, of course:


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: