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

Question

我正在做一个项目，其中我有一个响应式网格，我已经实现了使用flex包装属性。既然我支持火狐的IE9和更低版本，版本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代码时，为什么还要使用40KB的现代版呢？

Answer 2

CSS属性检测

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

element.style.<propertyName> != undefined。

最简单的方法(但支持有限)

上面的方法直接检查属性，对于大多数常见属性(不是flex-wrap)来说应该足够了。

​

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

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

​

您可以添加一些代码来检查该属性是否受dom前缀的支持，

稍微扩展一点以获得更好的支持(适用于flex-wrap)

​

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

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

​

当您决定在所有浏览器中对任何属性进行泛化时，情况会变得非常复杂。这就是我们决定使用modernizr的地方，它扩展了对处理异常情况的支持。

CSS.supports

有一个新的CSS API CSS.supports，它返回一个布尔值来检查浏览器是否支持特定的CSS功能。然而，这是一个新的应用程序接口，所以我们仍然使用像modernizr这样的插件，直到需要对旧浏览器的支持。

结论：

如果您的需求很简单，可以使用最简单的样式检测element.style.<property> != undefined或domPrefixes。您可以随时根据需要对其进行更多定制，但如果它很复杂和广泛，请使用modernizr，它具有用于特征检测的扩展代码。

Answer 3

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