I’m in the process of developing a new blog theme for myself. I was trying to use CSS3 transitions but I wanted to fall back to JavaScript if transitions weren’t supported. I really want to avoid Modernizr if I can so I needed a quick and dirty test for detecting them. Here’s what I came up with:
var Detect = (function () {
function cssTransitions () {
var div = document.createElement("div");
var p, ext, pre = ["ms", "O", "Webkit", "Moz"];
for (p in pre) {
if (div.style[ pre[p] + "Transition" ] !== undefined) {
ext = pre[p];
break;
}
}
delete div;
return ext;
};
return {
"cssTransitions" : cssTransitions
};
}());
It’s simple and does the trick. Simply check the return of Detect.cssTransitions().
if (!Detect.cssTransitions()) {
// Do JavaScript fallback here
}
You can also get the extension used in the current user-agent back from this method (ms, O, Moz, or Webkit).