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.<propertyName> != 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";

<div id="test"></div>

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";
};

<input type="text" id="textbox" value="flex-wrap" />
<button id="checkSupport">Check</button>
<div id="result"></div>

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.<property> != 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.

Answer 2

I found that this is the simplest method:

var d = document.documentElement.style
if (('flexWrap' in d) || ('WebkitFlexWrap' in d) || ('msFlexWrap' in d)){
  alert('ok');
}

I tried hasOwnProperty too but it doesn't work in IE and FF. So why use 40 KB of modernizr when you can have just 3 lines of js ?

Answer 3

Expanding on @AndresTet's answer, if you do not want a complete modernizr build, you can create a custom one, or extract and refactor the relevant flexbox tests, which seem to be:

function testPropsAll(prop, prefixed, elem) {

    var ucProp = prop.charAt(0).toUpperCase() + prop.slice(1),
        props = (prop + ' ' + cssomPrefixes.join(ucProp + ' ') + ucProp).split(' ');

    if (is(prefixed, "string") || is(prefixed, "undefined")) {
        return testProps(props, prefixed);

    } else {
        props = (prop + ' ' + (domPrefixes).join(ucProp + ' ') + ucProp).split(' ');
        return testDOMProps(props, prefixed, elem);
    }
}

tests['flexbox'] = function() {
    return testPropsAll('flexWrap');
};

tests['flexboxlegacy'] = function() {
    return testPropsAll('boxDirection');
};