Skip to content

Instantly share code, notes, and snippets.

@nesk
Forked from 140bytes/LICENSE.txt
Created June 17, 2011 13:31
Show Gist options
  • Save nesk/1031421 to your computer and use it in GitHub Desktop.
Save nesk/1031421 to your computer and use it in GitHub Desktop.
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
Copy link

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
Copy link
Author

nesk commented Jun 17, 2011

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

@paulirish
Copy link

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
Copy link

er actually it gets rid of quite a bit.

['t' + b] in a || 

and so on.

@mathiasbynens
Copy link

@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
Copy link
Author

nesk 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
Copy link

atk 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
Copy link
Author

nesk 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
Copy link

atk 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
Copy link
Author

nesk commented Jun 19, 2011

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

@atk
Copy link

atk 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
Copy link
Author

nesk 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