Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Detect CSS 3 transitions support
// Function used to know if the current browser supports CSS transitions
function(
a,b // Placeholders
) {
a = (new Image).style; // Targeting a new image that will be used to analyze the style object
b = 'ransition'; // Part of the transition property, used to minified the code
return
't' + b in a || // All browsers support
'webkitT' + b in a || // Webkit browsers support (e.g. Chrome, Safari...)
'MozT' + b in a || // Gecko browsers support (e.g. Firefox, Camino...)
'OT' + b in a // Opera support
;
}
function(a,b){a=(new Image).style;b='ransition';return't'+b in a||'webkitT'+b in a||'MozT'+b in a||'OT'+b in a}
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2011 Johann PARDANAUD : http://plune.fr
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
{
"name": "CSS 3 Transitions Detector",
"description": "Detects CSS 3 transitions support on many browsers",
"keywords": [
"CSS 3",
"transitions",
"detect",
"crossbrowser",
"animation"
]
}
<!DOCTYPE html>
<title>CSS 3 Transitions Detector</title>
<div>Expected value: <b>boolean</b></div>
<div>Actual value: <b id="ret"></b></div>
<script>
var transitionsSupported = function(a,b){a=(new Image).style;b='ransition';return't'+b in a||'webkitT'+b in a||'MozT'+b in a||'OT'+b in a};
document.getElementById('ret').innerHTML = transitionsSupported();
</script>
@mathiasbynens

This comment has been minimized.

Copy link

commented Jun 17, 2011

Couldn’t you just skip the != c (!= undefined) check?

function(a,b){a=document.body.style;b='ransition';return a['t'+b]||a['webkitT'+b]||a['MozT'+b]||a['OT'+b]||!1}

Edit: ah, that won’t work cause these values can be the empty string, which is falsy. Damn!

@nesk

This comment has been minimized.

Copy link
Owner Author

commented Jun 17, 2011

I tried, I really tried ! But these damn empty strings don't allow me to do this =/

@paulirish

This comment has been minimized.

Copy link

commented Jun 17, 2011

you could swap in in a for the != c however.

but doesnt get you any smaller. OOOh it does cuz then you can kill off the definition of c

@paulirish

This comment has been minimized.

Copy link

commented Jun 17, 2011

er actually it gets rid of quite a bit.

['t' + b] in a || 

and so on.

@mathiasbynens

This comment has been minimized.

Copy link

commented Jun 17, 2011

@paulirish

I had thought of using in, but isn’t the end result larger (even if you count the two bytes you save by removing ,c)?

a['t'+b]!=c
// versus…
['t'+b] in a
// oh wait you can drop the []
't'+b in a

Okay I finally get it :)

@nesk

This comment has been minimized.

Copy link
Owner Author

commented Jun 17, 2011

@paulirish

That's a good solution ! Now, instead of 120 bytes, we get down to 113 ! Good job !

function(a,b){a=document.body.style;b='ransition';return't'+b in a||'webkitT'+b in a||'MozT'+b in a||'OT'+b in a}
@atk

This comment has been minimized.

Copy link

commented Jun 17, 2011

How about making this even shorter at the risk that there's another CSS property with "transition" in it (which is very low):

function(a,b){for(a in document.body.style)b=b||/transition/i.test(a);return b}

If you wanted to find out which one to use you could even use the following:

function(a,b){for(a in document.body.style)if(b=/(moz|webkit|o|)transition/i.exec(a))return b[0]}

Still pretty small with 97 bytes.

@nesk

This comment has been minimized.

Copy link
Owner Author

commented Jun 17, 2011

That reduction is pretty impressive but there's a problem : your code doesn't run correctly, it always returns false (or undefined for the second code) on webkit browsers like Chrome or Safari. I tried to find where's the problem but I can't see why it doesn't run correctly =/

@atk

This comment has been minimized.

Copy link

commented Jun 18, 2011

Had not tested it on Webkit yesterday, I found today that this engine hides the properties from the iterator, but exposes only cssText, length, parentRule, getPropertyValue, getPropertyCSSValue, removeProperty, getPropertyPriority, setProperty, item, getPropertyShorthand and isPropertyImplicit. Since there's no way around that, your version remains the shortest solution.

@nesk

This comment has been minimized.

Copy link
Owner Author

commented Jun 19, 2011

Ok, thank you for this information, it's good to know =)

@atk

This comment has been minimized.

Copy link

commented Jun 19, 2011

@subzey has done a quite similar function, though he used (new Image).style instead of document.body.style, thus saving 2 bytes.

@nesk

This comment has been minimized.

Copy link
Owner Author

commented Jun 19, 2011

That's a nice idea and it works with all the web browsers, I applied it on my code !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.