Feature detection for CSS3 transition property

Question

I was just messing around this modernizr to find out, how do they check if a certain CSS property is supported in a user's browser, basically I just wanted to have a small script that told me if the user's browser supports CSS transitions. I abstracted the modernizr code to something like below:

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 almost the same thing, i have just made a few changes and hard coded the array values to simplify things. The script works in the following way.

• Create a html element (Doesn't have to be a valid html element).

• execute a IIFE that basically goes through all the possible browser versions of the css property and also the standard W3C variant. check if thing property can be applied to the html element we created, if it can't be applied the if condition fails and undefined is returned

• if the if condition passed the, the correct css-3 supported property is returned and stored in cssProps .

I just wanted to know, is this a bullet proof way of checking what transition is supported in the user's browser? or if its supported at all?

This is really my first attempt at browser feature detection and so I wanted to know.

Answer 1

To your larger point of "is this a bullet proof way of checking what transition is supported in the user's browser", the answer is no. While this will almost certainly get you 99.99% of all browsers that do support it, there will inevitably be some bizarre combination of things (a webview on a mid range Samsung android device that uses a custom version of webkit/chrome is a common culprit) that will keep you from truly being "bulletproof".

That being said, while you did a great job of pulling out the logic of what Modernizr does, I would question your need to do so.

As other commenters have mentioned, you can always create a custom build that has just what you want in it. That being said, it would make sense to do what you have done if you wanted the slimmest possible javascript build (since Modernizr almost certainly has support/code for things that are completely irrelevant to what you are doing). If that is the case, then I would suggest you check out the caniuse results for transition. Its basically all unprefixed with the exception of older android.

That means your detect can be a much, much smaller

var supportsTransitions = function() {
  var style = document.documentElement.style;

  return 'transition' in style || 'webkitTransition' in style
}

this will give you nearly identical results (admittedly ignoring older browsers - its up to you if that matters or not) in a much smaller footprint.

Either way - wonderful start at feature detection, I hope to see you contributing your own to Modernizr soon!