检测css“flex-box”和“flex-wrap”支持的正确方法是啥？

Posted 2023-02-18

【中文标题】检测css“flex-box”和“flex-wrap”支持的正确方法是啥？

【英文标题】：What is a proper way to detect the support of css "flex-box" and "flex-wrap"?检测css“flex-box”和“flex-wrap”支持的正确方法是什么？

【发布时间】：2016-01-12 12:14:38

【问题描述】：

我正在寻找一个解决方案，我们如何通过 javascript detect 支持 css flex-box 和 flex-wrap。

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

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

【参考方案1】：

我们如何检测对 css flex-box 和 flex-wrap 的支持 JavaScript。

创建一个元素并检查样式属性。如果支持，它将不返回任何内容，即''，否则它将返回undefined。

例如，如果您在 Chrome 中运行以下 sn-p，您将得到 undefined 对应 columns 和 '' 对应 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 声明作为条件，浏览器将执行该声明以返回它是否支持。例如，如果支持flex，则以下 CSS 将应用绿色背景色。

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

浏览器支持在所有现代浏览器中都很好，除了 IE（和往常一样）。对于 IE 和 (Safari @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);

【讨论】：

是的，IE11- 和 Saf 8- 根据caniuse（TIL Edge 和 Safari 9 将）

你提到的 JS 方法在 IE10 支持的情况下返回 undefined，所以这似乎不是检测这个的正确方法

现在我正在使用你的方法，结合 IE10 检查，这似乎效果很好。

【参考方案2】：

由于 IE 不支持 CSS.supports()

这种健壮的方法可以测试任何 property: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'])
)

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