结论：

Question

我正在开发一个项目，其中我有一个响应式网格，我已经使用flex wrap属性实现了。由于我支持IE9和更低版本的Firefox，版本28及更低版本，我如何通过javascript找到对它的支持。目前我只能通过条件语句识别IE9浏览器，但现在有人如何通过javascript检测Firefox旧版本。

Answer 1

我发现这是最简单的方法：

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

我也试过了hasOwnProperty，但它在IE和FF中都没有用。那么，当你只有3行js时，为什么要使用40 KB的modernizr？

Answer 2

我现在不知道你是怎么做的，但是真的没有理由重新发明轮子。

Modernizr（http://modernizr.com/）是为此而构建的，是一个广泛使用的特征检测库。查看CSS功能，他们支持检测flexbox（http://modernizr.com/docs/#features-css），并将一直工作回到IE6。

Answer 3

CSS属性检测

一个简单的CSS属性检测技术是直接在元素上测试它并检查它是否返回undefined，如下所示

element.style.<propertyName> != undefined。

最简单的方法（但支持有限）

上述方法直接检查属性，对于大多数常见属性（不适用于flex-wrap）就足够了。

＆＃13;

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

＆＃13;

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

＆＃13;

您可以添加更多代码来检查dom前缀是否支持该属性

稍微广泛以获得更好的支持（适用于柔性包装）

＆＃13;

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

＆＃13;

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

＆＃13;

当您决定对所有浏览器中的任何属性进行概括时，它确实变得复杂。这是我们决定选择modernizr的地方，它已经扩展了对处理例外情况的支持。

CSS.supports

有一个新的CSS API CSS.supports，它返回一个布尔值来检查浏览器是否支持特定的CSS功能。但是，这是一个新的API，因此我们仍然使用modernizr之类的插件，直到旧浏览器需要支持。

结论：

如果您的要求很简单，请使用最简单的样式检测element.style.<property> != undefined或domPrefixes。您可以随时根据需要自定义它，但如果它很复杂且广泛，请转到modernizr，它具有扩展的功能检测代码。

Answer 4

扩展@ AndresTet的答案，如果你不想要一个完整的modernizr版本，你可以创建一个custom one，或者提取并重构相关的flexbox测试，这些测试似乎是：

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

检测浏览器中的flex-wrap支持

4 个答案:

CSS属性检测

最简单的方法（但支持有限）

稍微广泛以获得更好的支持（适用于柔性包装）

CSS.supports

结论：