Question

Ok so, I’ve been doing some research on detecting if a user has css disabled. I know that not even 2% of the world browses the web with css disabled, but I still have a need to detect whether or not the css is loaded.

Basically I use a combination of classic asp and jquery to detect if a user is logged in, then with the jquery will fadein an overlay on the window with a login form. If the user goes to that specific page and disables the css all my content is still readily available to them.

I’m wondering if there is a better way to do this with jQuery? Something that will detect if the style sheets have been disabled/removed on the fly.

I already use <noscript> to redirect the user if javascript is disabled, but I’d like to take the extra precaution and either redirect them.

I tried using just a simple javascript display check to see if a specific div element were hidden or not, to ‘detect’ if the css was disabled. But in Chrome if I’m on the page and I use web developer to disable all css the javascript alert doesnt show. The alert is just ment as a test to check for it, I’ll add the redirect once I figure out how to do it correctly.

Any help or suggestions are greatly appreciated, Thanks in advance.

<noscript>
<meta http-equiv='refresh' content='0;url=old_login.asp'/>
</noscript>


<script type="text/javascript">
    var csschk = document.getElementById('nocss');

    if (csschk.style.display = 'none') {
    } else {
        alert('Please enable CSS to view this page');
    }

</script>

<style>
#nocss {
display: none;
}
</style>

<div id="nocss">no css</div>

Answer 1

I think you have more serious issues here. Regardless of CSS being enabled or not, a simple view source would show your page and it’s content.

You need to re-think your approach. Either do a normal form post with credentials before you show secure content or use AJAX if you want to avoid a page refresh.

See here for examples of submitting a form using Ajax:
http://randomactsofcoding.blogspot.com.au/2008/10/jquery-ajax-and-classic-asp.html
http://heybigname.com/2009/04/15/ajax-with-jquery-a-simple-login-example/
http://blog.webwizo.com/2011/05/04/simple-login-with-php-and-jquery-ajax/

For academic purposes, to check if the page has CSS you could use jQuery / JavaScript to detect the existence of a link tag inside the head tag.

You could also use A library like Modernizr to do feature detection and check if CSS features work in a browser.