28

How would I detect that a browser supports CSS transitions using Javascript (and without using modernizr)?

2
  • Using minified Modernizr to test for CSS transitions only, the entire block of code is just over 2000 bytes. Larger than the other tests posted here, but hardly enough to trouble a user. (I prefer Modernizr because sooner or later, every website grows and needs more than one of its tests.) Commented Nov 25, 2013 at 14:52
  • 13
    I will never understand the motivation of people suggesting something that the asker has specifically asked to NOT use.
    – L0j1k
    Commented Jun 10, 2014 at 18:52

5 Answers 5

48

Perhaps something like this. Basically it's just looking to see if the CSS transition property has been defined:

function supportsTransitions() {
    var b = document.body || document.documentElement,
        s = b.style,
        p = 'transition';

    if (typeof s[p] == 'string') { return true; }

    // Tests for vendor specific prop
    var v = ['Moz', 'webkit', 'Webkit', 'Khtml', 'O', 'ms'];
    p = p.charAt(0).toUpperCase() + p.substr(1);

    for (var i=0; i<v.length; i++) {
        if (typeof s[v[i] + p] == 'string') { return true; }
    }

    return false;
}

Adapted from this gist. All credit goes there.

11
  • I submitted a change for Ms => ms, which is how IE exposes their vendor prefixes dom styles. (They're weird.) Toby, why are you trying to do this sans-Modernizr?
    – Paul Irish
    Commented Sep 2, 2011 at 7:08
  • 13
    @paul trying to get the latency and size down (way down), and modernizer is quite large for this single detection that we need.
    – Toby Hede
    Commented Sep 2, 2011 at 11:12
  • 6
    toby, modernizr has a modular build generator which gets the filesize WAY down. You should take a look. Right now this code will fail to detect transition support in IE10. Such is the case with reinventing wheels. :/
    – Paul Irish
    Commented Sep 21, 2011 at 14:52
  • @vcsjones, can you update the code to use ms instead of Ms?
    – Paul Irish
    Commented Sep 21, 2011 at 14:53
  • didn't know there was such a thing as a 'style' object inside an element, good stuff
    – leopic
    Commented Dec 6, 2012 at 18:18
34

3 ways of doing so:

var supportsTransitions  = (function() {
    var s = document.createElement('p').style, // 's' for style. better to create an element if body yet to exist
        v = ['ms','O','Moz','Webkit']; // 'v' for vendor

    if( s['transition'] == '' ) return true; // check first for prefeixed-free support
    while( v.length ) // now go over the list of vendor prefixes and check support until one is found
        if( v.pop() + 'Transition' in s )
            return true;
    return false;
})();

console.log(supportsTransitions) // 'true' on modern browsers

OR:

var s = document.createElement('p').style,
        supportsTransitions = 'transition' in s ||
                              'WebkitTransition' in s ||
                              'MozTransition' in s ||
                              'msTransition' in s ||
                              'OTransition' in s;

console.log(supportsTransitions);  // 'true' on modren browsers

If you actually want to use the right prefixed, use this:

function getPrefixed(prop){
    var i, s = document.createElement('p').style, v = ['ms','O','Moz','Webkit'];
    if( s[prop] == '' ) return prop;
    prop = prop.charAt(0).toUpperCase() + prop.slice(1);
    for( i = v.length; i--; )
        if( s[v[i] + prop] == '' )
            return (v[i] + prop);
}

// get the correct vendor prefixed property
transition = getPrefixed('transition');
// usage example
elment.style[transition] = '1s';
4

As of 2015, this one-liner should do the deal (IE 10+, Chrome 1+, Safari 3.2+, FF 4+ and Opera 12+):-

var transitionsSupported = ('transition' in document.documentElement.style) || ('WebkitTransition' in document.documentElement.style);
0
2

Here the way I used:

    var style = document.documentElement.style;

    if (
        style.webkitTransition !== undefined ||
        style.MozTransition !== undefined ||
        style.OTransition !== undefined ||
        style.MsTransition !== undefined ||
        style.transition !== undefined
    )
    {
        // Support CSS3 transititon
    }
2
  • 3
    checking for undefined is better with: typeof (style.webkitTransition) !== "undefined"
    – naor
    Commented Sep 4, 2013 at 8:01
  • Its only better when not in strict mode because undefined could be re-assigned by someone lazy/mischievous, style.webkitTransition !== void(0) is better (faster) for non-strict mode use... However we should all be using "use strict" in our code.
    – bm_i
    Commented Sep 4, 2015 at 12:50
0

Also you can use the following approach (kind of one line function):

var features;
(function(s, features) {
    features.transitions = 'transition' in s || 'webkitTransition' in s || 'MozTransition' in s || 'msTransition' in s || 'OTransition' in s;
})(document.createElement('div').style, features || (features = {}));

console.log(features.transitions);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.