Feature Detection for CSS Transitions via jQuery $.support

When working with CSS transitions, the need to detect whether or not the browser supports them may arise.  It can be of particular use when working with the transitionend event, which won't fire in unsupportive browsers.

After finding a number of questionable solutions, I came across this gist that extends jQuery's $.support nicely.

$.support.transition = (function(){
    var thisBody = document.body || document.documentElement,
        thisStyle = thisBody.style,
        support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined;
    return support;
})();

The value of $.support.transition will be true or false depending on the browser's capabilities.

Author avatar

About the author

Creator of Surreal CMS and other web things. Follow me for tweets about JavaScript, CSS, and web programming.