Feature Detection For Css3 Transition Property

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 t

Solution 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!