Detect CSS With jQuery
5 comments so far | Add yours
I was trying to get a custom flash replacement thing working the way I wanted, and realized that the replaced flash titles looks really bad in text browsers that still supports javascript (try viewing a sifr powered page with CSS turned off in Firefox). So I came up with a simple javascript written in jQuery that can detect if the browser has CSS support:
function hasCSS() {var _d = document.createElement('div')_d.id = 'css_test'$('body').append(_d)$('#css_test').css({width:'1px',height:'1px',display:'none'})var _v = ($('#css_test').width() != 1) ? false : true$('#css_test').remove()return _v}
This is the idea behind the script:
- Create a 1×1 pixel element with a display:none style
- Append it to the body
- Check if the offsetWidth of the element is 1px
- Delete the element
- Return the boolean result
Use it like this (example):
$(document).ready(function(){if(hasCSS()) {// do something}})
I’m not sure this is the way to go but perhaps someone else would find it useful in some other context. Many javascript behaviors and events are based upon the fact that the user agent also supports CSS but that might not always be the case. It works in the browsers I tested in (IE/win, FF, Safari etc.). Have a look at this page without CSS enabled to see the result (you might have to press the refresh button once).
5 Responses so far. Add yours.
-
At 6:30 pm on February 18th, 2008 , Ben Spaulding wrote:
First, I like to say “Hello David.” Despite this being my first comment on your site, I have been a reader of yours for quite a while. You always have good info here.
The CSS check is a nice little technique that would work well for custom Flash replacements, and I’ll probably use it in the future. As for sIFR, it can check for CSS support itself before making replacements if the
useStyleCheckproperty is set totrue(see the JavaScript Configuration at http://wiki.novemberborn.net/sifr3/JavaScript+Configuration). It actually uses the same technique as your CSS check.-
At 9:53 pm on February 18th, 2008 , David Hellsing (author) wrote:
Hi Ben! Thanks for stopping by. I didn’t know sifr3 already implemented a CSS check, so thanks for the pointer! I found it to be useful in many situations where I use javascript for presentational purposes.
-
At 9:09 pm on December 15th, 2008 , K wrote:
Hi, I tried your hack, and it seemed to work on the first function call, but it didn’t work after that. I didn’t extensively debug, but I wrapped a function I was calling in your function and set up an alert to say if we got there, then I loaded the page up and turned off CSS. The first time I got a False for hascss, but the 2nd time I got a true and forever there on afterwards.
2 Trackbacks & Pings:
-
Trackback at 5:38 am on August 28th, 2008 by Rife with Fluidity » Detecting CSS Presence with JavaScript:
[…] quickly found David Hellsing’s jQuery implementation of a CSS detector. I favor Prototype, so I rewrote […]
-
Trackback at 10:29 pm on August 18th, 2009 by Detecting CSS Presence with JavaScript (on Brandan Lennox's Blog):
[…] quickly found David Hellsing’s jQuery implementation of a CSS detector. I favor Prototype, so I rewrote it: var CssDetector = { isCssEnabled: function […]