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.

I don't understand why you don't just use modernizr. You can create a custom build which will be very small, and they you won't have to worry about whether you've done things right. As it is, you're asking us to validate code you've hacked from somewhere else--if you want to know if it works, then test it yourself. — , Jul 18 '15 at 03:31
You can roll your own modernizer to check for specific things like just CSS3 transitions. Go to their [download page](http://modernizr.com/download/) and check just CSS Transition checkbox then hit generate — zgood, Jul 18 '15 at 03:34
@torazaburo your right in a way , but my objective is to learn to code myself and not just use libraries , also yes i am asking you'll to validate my code , but thats not the only thing i'am asking , and lastly every js programmer who codes for the web, at some point would want to know, how things work inside a library . your solution of using a "use a custom build" is good , efficient and definitly a time saver .... but "thats not what i want and definitly does not fit every use case" . I hope i have made both my intent and point clear. ask me if you have further difficulties understanding. — Alexander Solonik, Jul 18 '15 at 07:48

score 2 · Accepted Answer · answered Jul 18 '15 at 05:57

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!

! Thanks , you perfectly answered my question, i have been using modernizr for a while , and its immensely useful , i like digging the code and do hope to contribute very soon :) — Alexander Solonik, Jul 18 '15 at 12:52

Feature detection for CSS3 transition property

1 Answers1

Linked