How would I detect that a browser supports CSS transitions using Javascript (and without using modernizr)?
-
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.)– BlazemongerCommented Nov 25, 2013 at 14:52
-
13I will never understand the motivation of people suggesting something that the asker has specifically asked to NOT use.– L0j1kCommented Jun 10, 2014 at 18:52
Add a comment
|
5 Answers
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.
-
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? 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. Commented Sep 2, 2011 at 11:12
-
6toby, 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. :/ Commented Sep 21, 2011 at 14:52
-
@vcsjones, can you update the code to use
msinstead ofMs? Commented Sep 21, 2011 at 14:53 -
didn't know there was such a thing as a 'style' object inside an element, good stuff– leopicCommented Dec 6, 2012 at 18:18
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';
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);
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
}
-
3checking for undefined is better with:
typeof (style.webkitTransition) !== "undefined"– naorCommented Sep 4, 2013 at 8:01 -
Its only better when not in strict mode because
undefinedcould 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_iCommented Sep 4, 2015 at 12:50
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);