Question

编辑：

我有一个检查CSS属性支持的脚本，在这种情况下是连字符支持。这很长，但在受访者的帮助下，它缩短了：

var styleEngine = document.documentElement.style;
if  ((!('hyphens' in styleEngine)) && (!('MozHyphens' in styleEngine)) && (!('WebkitHyphens' in styleEngine)) && (!('msHyphens' in styleEngine)))
    alert('CSS hyphenation is not supported.');
else
    alert('CSS hyphenation is supported.');

这种编辑的原因，包括标题，是为了让人们通过谷歌搜索检查CSS属性和/或价值支持的Javascript对人们更有用。我后来了解了一些关于CSS支持及其检查的内容，这些内容可能很有用。我学到的第一件事是Chrome此刻（2014年）表示它支持-webkit-hyphens，但它不支持最重要的值auto。这意味着我们必须检查属性值支持。

这可以通过两种方式完成。第一个是使用新的CSS at-rule @supports。这在https://developer.mozilla.org/en-US/docs/Web/CSS/@supports上有解释。另一方面，使用Javascript，在http://ryanmorr.com/detecting-css-style-support/上进行了解释。在连字符的情况下，这里是一个Javascript polyfill，用于何时不支持正确的连字符：https://code.google.com/p/hyphenator/。

Answer 1

将其解压缩到一个函数：

function hasStyle(prop) {
  return prop in document.documentElement.style;
}

然后你可以使用：

if (!hasStyle('MozHyphens' && !hasStyle('msHyphens')) { ... }

不要太短，但要足够短（并封装）。

为了更简洁，您可以创建另一个功能：

function hasHyphens() {
  return hasStyle('MozHypens') || hasStyle('msHyphens');
}

然后：

if (!hasHyphens()) { ... }

Answer 2

怎么样：

ValuesIntersect(valArray1, valArray2) {
  var len = valArray2.length,
      i = 0,
      found = false;

  while (i<len && !found) {
   found = valArray2[i] in valArray1;
   ++i;
  }

  return found;
}

像这样使用：

if (!ValuesIntersect(['hyphens','MozHyphens', 'WebkitHyphens', 'msHyphens'], document.documentElement.style)) {...}

我发现这是最好的可读性。当您处于if语句时，这清楚地显示了您要检查的内容。外部函数不一定是 small ，因为它很少被检查。并且它足够通用，可以在多个地方工作。

缩短javascript检查CSS属性支持

2 个答案: