Skip to content

Is CSS Enabled?

October 1, 2009

I’ve seen this question posed many times on different forums.

How can one tell if CSS is enabled/disabled using Javascript?

Well, there is a method of doing this, sort of. If CSS is disabled, an @import directive will never get followed. Simply import a CSS file with a un-noticeable styling to an element. Then, use Javascript (I like the jQuery framework) to test whether this style is true of false. For example, use this structure to style a <div>-container that’s on every page to have a white background-color. Then test for this later.

Example CSS (csscheck.css)

#body {
background-color:white;
}

Example HTML

<!DOCTYPE HTML>
<html lang="en-us">
<head>
<style type="text/css"> @import "csscheck.css" </style>
</head>
<body>
<div id="page">
... your content here ...
</div>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<!--
$(document).ready(function(){
var bodyBackground = $('#body').css("background-color");
if (bodyBackground == "rgb(255, 255, 255)") {
... script steps if CSS is enabled ...
} else {
... script steps if CSS is disabled ...
}
});
//-->
</script>
</body>
</html>

The downsides of this method are that older browsers — for the most part v4 browsers and below — don’t understand the @import directive in the first place, but do understand some CSS. And, of course, this adds just one more file to be downloaded, no matter how small. So, code defensively, and test on several browsers, including older versions.

Advertisements
No comments yet

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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: