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

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

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前缀是否支持该属性,

稍微广泛以获得更好的支撑(适用于柔性包装)

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功能.然而,这是一个新的API,所以我们仍然使用插件,modernizr直到旧浏览器需要支持.

结论:

用最简单的式样检测element.style.<property> != undefined或者domPrefixes如果您的要求很简单.您可以随时根据需要对其进行更多自定义,但如果它复杂且广泛,请为其添加modernizr扩展的功能检测代码.

Answer 4

扩展@AndresTet的答案，如果您不想要完整的modernizr构建，您可以创建一个自定义构建，或者提取并重构相关的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');
};