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).