Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 12 down vote favorite
5

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

share|improve this question

4 Answers

up vote 20 down vote accepted

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;
    var s = b.style;
    var p = 'transition';
    if(typeof s[p] == 'string') {return true; }

    // Tests for vendor specific prop
    v = ['Moz', '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.

share|improve this answer
 
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 Sep 2 '11 at 7:08
7  
@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 Sep 2 '11 at 11:12
1  
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 Sep 21 '11 at 14:52
 
@vcsjones, can you update the code to use ms instead of Ms? –  Paul Irish Sep 21 '11 at 14:53
 
@PaulIrish - Done. Thanks. –  vcsjones Sep 21 '11 at 16:25
show 2 more comments
up vote 14 down vote

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';
share|improve this answer
up vote 0 down vote

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);
share|improve this answer
up vote 0 down vote

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
    }
share|improve this answer
 
checking for undefined is better with: typeof (style.webkitTransition) !== "undefined" –  naor Sep 4 at 8:01

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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