Detecting Flex-wrap Support In Browsers

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 28 and

Solution 1:

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 ?

Solution 2:

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).

functionisStyleSupported(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";

<divid="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(' ');

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

functionisStyleSupported(el, property) {
  if (el.style[toCamelCase(property)] != undefined) {
    returntrue;
  } //supported
  property = toCamelCase("-" + property);
  for (var i = 0; i < domPrefixes.length; i++) { //check with dom prefixes			if (el.style[domPrefixes[i] + property] !== undefined) {
      returntrue; //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";
};

<inputtype="text"id="textbox"value="flex-wrap" /><buttonid="checkSupport">Check</button><divid="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.

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

functiontestPropsAll(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")) {
        returntestProps(props, prefixed);

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

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

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