检测 css "flex-box" 和 "flex-wrap" 支持的正确方法是什么？

Question

我正在寻找一个解决方案，我们如何才能 detect css flex-box 和 flex-wrap 的支持 JavaScript。

我知道 modernizr 可以完成这项工作，但我的客户不允许我们在页眉部分加载任何脚本，不幸的是，这在页脚中加载时不起作用。

在所有类型的浏览器/设备上实现此检测的正确方法是什么？

Answer 1

how we can detect the support of css flex-box and flex-wrap by JavaScript.

创建一个元素并检查样式属性。如果支持，它将 return 什么都没有，即 '' 否则它将 return undefined.

例如，如果您在 Chrome 中运行下面的代码片段，您将获得 columns 的 undefined 和 flex-wrap 的 '' .

片段:

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

虽然你在问题中只提到了Javascript，但是也有CSS特征检测的方法。

@supports rule, also called CSS Feature Queries.

您提供 CSS 声明作为条件，浏览器将执行到 return，无论它是否支持。例如，如果支持 flex，则以下 CSS 将应用绿色背景色。

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

浏览器支持在所有现代浏览器中都很好，除了 IE（和往常一样）。对于 IE 和（Safari < 9），当 @supports 规则失败时，您需要保留后备选项。

结合以上两者，there is an API around that也可以在Javascript中使用做特征检测

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() is not supported on IE

这个稳健的方法可以测试任何 属性:value 支持:

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'])
)

您需要手动为测试函数提供所有可能的属性名称，因为代码无法猜测（可能性太多）。这使测试代码保持苗条，而不是它已经包含了所有可能的属性个名称。

检测 css "flex-box" 和 "flex-wrap" 支持的正确方法是什么？

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

javascript

css

detection

flexbox