-
-
Save nesk/1031421 to your computer and use it in GitHub Desktop.
| // 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> |
I tried, I really tried ! But these damn empty strings don't allow me to do this =/
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
er actually it gets rid of quite a bit.
['t' + b] in a ||
and so on.
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 aOkay I finally get it :)
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}
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.
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 =/
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.
Ok, thank you for this information, it's good to know =)
@subzey has done a quite similar function, though he used (new Image).style instead of document.body.style, thus saving 2 bytes.
That's a nice idea and it works with all the web browsers, I applied it on my code !
Couldn’t you just skip the
!= c(!= undefined) check?Edit: ah, that won’t work cause these values can be the empty string, which is falsy. Damn!