-
-
Save nesk/1031421 to your computer and use it in GitHub Desktop.
Detect CSS 3 transitions support
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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 | |
| ; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "CSS 3 Transitions Detector", | |
| "description": "Detects CSS 3 transitions support on many browsers", | |
| "keywords": [ | |
| "CSS 3", | |
| "transitions", | |
| "detect", | |
| "crossbrowser", | |
| "animation" | |
| ] | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
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 !
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.