Detecting flex-wrap support in browsers

Question

I am working on a project in which I have a responsive grid which I have achieved using flex wrap property. Since I am supporting IE9 and lower versions of Firefox, version

Answer 1

CSS Property Detections

A simple CSS property detection technique is to test it directly on an element and check if it returns undefined like below,

element.style. != undefined.

Simplest Method (but limited support)

The above method directly checks for the property and should be sufficient for most common properties (not for flex-wrap).

function isStyleSupported(el, property) {
	  return el.style[property] != undefined;
}
var testEl = document.getElementById('test');
testEl.innerHTML = (isStyleSupported(testEl, 'flexWrap')) ? "Flex Wrap is supported" : "Flex Wrap is NOT supported";

You can add a little more code to check if the property is supported with dom prefixes,

Slightly extensive for better support (works for flex-wrap)

var domPrefixes = 'Webkit Moz O ms Khtml'.split(' ');

function toCamelCase(cssProp) {
  return cssProp.replace(/-([a-z])/gi, function(s, prop) {
    return prop.toUpperCase();
  });
}

function isStyleSupported(el, property) {
  if (el.style[toCamelCase(property)] != undefined) {
    return true;
  } //supported
  property = toCamelCase("-" + property);
  for (var i = 0; i < domPrefixes.length; i++) { //check with dom prefixes			
    if (el.style[domPrefixes[i] + property] !== undefined) {
      return true; //supported with dom prefix
    }
  }
}
var divEl = document.getElementById('result'), textEl = document.getElementById('textbox');
document.getElementById('checkSupport').onclick = function() {
  divEl.innerHTML = (isStyleSupported(divEl, textEl.value)) ? textEl.value + " is supported" : textEl.value + " is NOT supported";
};

Check

It really gets complicated when you decide to generalize this for any property across all browser. This is where we decide to go for modernizr which has extended support to handle exceptions cases.

CSS.supports

There is a new CSS API CSS.supports which returns a boolean to check if a specific CSS feature is supported by the browser. However this is a new API so we still be using plugins like modernizr until there is a support required for older browser.

Conclusion:

Use the simplest style detection element.style. != undefined or with domPrefixes if your requirement is simple. You can always customize it a little more as your need, but if it is complicated and extensive, go for modernizr which has extended code for feature detection.