Feature detection for CSS3 transition property
I was just messing around with this modernizr to see how they check if a certain CSS property is supported in the user's browser, basically I just wanted to have a little script that told me if the user's browser supports CSS transitions. I reversed my modernizr code like this:
Elem = document.createElement('Alx');
eStyle = Elem.style;
var cssProp = (function check(){
props = ["transition", "WebkitTransition", "MozTransition", "OTransition", "msTransition"];
for(var i in props) {
var prop = props[i];
console.log(prop);
if (!contains('-' , prop) && eStyle[prop] !== undefined ) {
return prop;
}
}
})();
/* The contains function */
function contains( str, substr ) {
return !!~('' + str).indexOf(substr);
}
modernizr does pretty much the same thing, I just made a few changes and hardcoded the array values ββto make things easier. The script works like this.
-
Create an html element (doesn't have to be a valid html element).
-
do IIFE which basically goes through all possible browser css versions as well as W3C standard variant. check if the thing property can be applied to the html element we created, if it cannot be applied the condition
if
fails and undefined is returned -
if the if condition passed, the correct css-3 property is returned and stored in cssProps.
I just wanted to know if this is a bulletproof way of checking which transition is supported in the user's browser? or if his support at all?
This is indeed my first attempt at discovering a browser feature and so I wanted to know.
source to share
To your big point, "this is a bulletproof way of checking what transition is supported in the user's browser," the answer is no. While this will almost certainly give you 99.99% of all browsers that support it, there will inevitably be some fancy combination of things (web browsing on a mid-range Samsung Android device using a custom webkit / chrome version is a common culprit) that will prevent you from really being "bulletproof".
Having said that, although you have done a great job with the logic of what Modernizr does, I would question your need for it.
As other commenters have pointed out, you can always create a custom assembly that has exactly what you need. That being said, it would make sense to do what you did if you want the finest possible javascript assembly possible (since Modernizr almost certainly has support / code for things that are completely irrelevant to what you are doing). If so, then I suggest you check the caniuse results for the transition. Its basically all unprefixed except for the old Android.
This means that your detection can be much smaller [/ p>
var supportsTransitions = function() {
var style = document.documentElement.style;
return 'transition' in style || 'webkitTransition' in style
}
this will give you almost the same results (admittedly ignoring older browsers - it's up to you if it matters or not) at a much shorter distance.
A great start anyway when discovering a feature, I hope you will soon be contributing to Modernizr!
source to share