缩短javascript检查CSS属性支持

Shortening a javascript checking for CSS property support

本文关键字：属性 支持 CSS 检查 javascript 缩短      更新时间：2023-09-26

EDIT:

我有一个脚本检查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.');

这个编辑的原因，包括标题，是为了让这篇文章对人们更有用的人搜索Javascript检查CSS属性和/或值支持。后来，我学到了一些关于CSS支持及其检查的知识，这可能会让你感兴趣。我学到的第一件事是Chrome在这一刻(2014)说它支持-webkit-hyphens，但它不支持最重要的值auto。这意味着我们必须检查是否支持属性值。

可以通过两种方式实现。第一个是新的CSS规则@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/。

将其提取为函数:

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

那么你可以使用:

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

不要太短，但要足够短(并且封装)。

为了更简洁，您可以创建另一个函数: 
function hasHyphens() {
  return hasStyle('MozHypens') || hasStyle('msHyphens');
}

然后:

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

怎么样:

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语句时，这清楚地显示了您正在检查的内容。外部函数不一定是小的，因为它很少被检查。它足够通用，可以在多个地方工作。

相关文章：