Detect CSS transitions using Javascript (and without modernizr)?
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
}
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);
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.