Is CSS Enabled?
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.
Douglas Burchard has been creating professional data-driven web applications with Lasso since before it’s initial launch in 1996.
