我的 js 脚本会因在旧版浏览器上设置 css --variables 而中断吗？

Question

我想开始使用 css --变量。对于旧版浏览器，css 回退是先声明旧版规则，这很好。但随后我将通过 javascript 来操纵它们。那么，它是否会破坏脚本并在旧版浏览器中抛出一些错误？我问是因为我目前无法测试 legacy，所以我自己看不到。

我的意思是，如果我这样做：

elem.style.setProperty('--tx', `10px`);

旧版浏览器会发生什么？只是什么都没有（--tx 将静静地不更新并且程序将继续）或者抛出错误并破坏脚本？

Answer 1

根据the specification, setProperty() can throw a DOMException这些条件：

SYNTAX_ERR: Raised if the specified value has a syntax error and is unparsable.

NO_MODIFICATION_ALLOWED_ERR: Raised if this declaration is readonly or the property is readonly.

如果您想安全起见，请将调用包装在 try...catch or a condition based on Modernizr.customproperties 中，以确保调用在遗留浏览器中抛出异常时被捕获，或者仅在浏览器支持时被调用。

我还建议您不要使用 template literals 或使用 Babel 将其转译为 ES5。

Answer 2

对我来说，我的问题的答案是否定的，它不会打破javascript。尽管如此，您仍需要为不支持 --variables 的浏览器解决 css 代码。具体来说，遗憾的是，Microsoft Edge 确实支持它们，但在某些情况下无法正确处理它们。这使得它比 IE11 更容易出错，而 IE11 会忽略它们。

考虑这段代码：

  @for $i from 1 through 20{
    // first for legacy browsers
    &[data-current="#{$i}"]{ transform: translateX(-100% * ($i - 1)); }
    // then for modern ones
    &[data-current="#{$i}"]{ transform: translate(calc(-100% * (#{$i} - 1) + var(--distance))); }
  }

还有这个：

hm.on('pan', function(e){ // (hammer.js)
  slide_strip.style.setProperty('--distance', e.deltaX + 'px');
});

在 Android 浏览器 4.4.2、IE11、Edge 上测试。 Android 4.4.2 和 IE11 不支持 --variables。 Edge 确实支持它们，但不在传递给转换的 calc() 中。

行为：

Android 4.4.2 和 IE11：js 不会设置 --distance 而不会抛出任何错误，他们会使用第一个 css 规则（由于滑动事件时的数据更新 > 为简单起见，此处未显示）。所以它都会作为后备。
Edge: js不会抛出任何错误。浏览器将读取第二个 css 规则，但无法处理它，结果将是运动冻结。所以这里应该有某种寻址。就我个人而言，我会使用 Bowser 之类的工具来检测浏览器类型，将相关的 class 添加到正文，并基于此映射不同的 css 规则。

关于w3c规范，我想指出的是：

SYNTAX_ERR: Raised if the specified value has a syntax error and is unparsable.

在这种情况下，我们说的是值，而不是属性。此外，该值没有任何语法错误。

NO_MODIFICATION_ALLOWED_ERR: Raised if this declaration is readonly or the property is readonly.

属性不是只读的，或者说，它不能被告知（如果浏览器不支持 i，它现在不关心它）。我猜..

我的 js 脚本会因在旧版浏览器上设置 css --variables 而中断吗？

Will my js script break by setting css --variables on legacy browsers?

javascript

css

css-variables