What is the proper way to detect css support "flex-box" and "flex-wrap"?

Question

I am looking for a solution on how we can detect support css flex-box and flex-wrap JavaScript.

I know modernizr , which can do this work, but my client does not allow us to load scripts inside the section of the chapter, unfortunately, this does not work when loading in the footer.

What is the correct way to achieve this detection on all types of browsers / devices?

Answer 1

how can we detect css support flex-box and flex-wrap using JavaScript.

Create an element and check the style property. If it is supported, it will not return anything, i.e. '' Otherwise it will return undefined .

For example, if you run the snippet below in Chrome, you will get undefined for columns and '' for flex-wrap .

Fragment :

 console.log('flex = ' + document.createElement("p").style.flex); console.log('columns = ' + document.createElement("p").style.columns); console.log('flex-wrap = ' + document.createElement("p").style.flexWrap); 

---

Although you only mentioned Javascript in your question, there is also a CSS way to identify features.

The @supports rule, also called CSS Feature Queries .

You provide the CSS declaration as a condition, and the browser executes it to return whether it supports or not. For example, the following CSS will apply a green background color if flex supported.

 @supports (display: flex) { div { background-color: #0f0; } } 

Browser support is good in all modern browsers, with the exception of IE (as usual). For IE and (Safari <9), you will need to use a fallback when the @supports rule @supports .

---

Combining the above two, there is also an API around this that you can use in Javascript to detect functions.

 var isColumnSupported = CSS.supports('columns', ''); console.log('columns supported: ' + isColumnSupported); var isFlexWrapSupported = CSS.supports('flex-wrap', 'wrap'); console.log('flex-wrap supported: ' + isFlexWrapSupported); 

Answer 2

Since CSS.supports() not supported in IE

This reliable method can check any property: value support:

 var cssPropertySupported = (function(){ var mem = {}; // save test results for efficient future calls with same parameters return function cssPropertySupported(prop, values) { if( mem[prop+values] ) return mem[prop+values]; var element = document.createElement('p'), index = values.length, name, result = false; try { while (index--) { name = values[index]; element.style.display = name; if (element.style.display === name){ result = true; break; } } } catch (pError) {} mem[prop+values] = result; return result; } })(); ///////// TEST: //////////////////// console.log( cssPropertySupported('display', ['-ms-flexbox', '-webkit-box', 'flex']) ) 

You need to manually provide the test function with all possible property names, since the code cannot guess (too many possibilities). This makes the test code thin; instead, it already has all the possible property names.