Question

我想开始使用css --variables。对于旧版浏览器，css的后备方法是先声明旧版规则，这很好。但是，然后我将通过javascript处理它们。那么，它会破坏脚本并在旧版浏览器中引发一些错误吗？我问是因为我目前无法测试旧版，所以我自己看不到。

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

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

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

Answer 1

根据the specification，在以下情况下setProperty()可以抛出DOMException：

SYNTAX_ERR：如果指定的值存在语法错误且不可解析，则引发。

NO_MODIFICATION_ALLOWED_ERR：如果此声明为只读或属性为只读，则引发。

如果您想安全起见，请将呼叫包装在try...catch或基于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规则（由于发生滑动事件时会进行数据当前更新>不会为简单起见，此处显示）。因此，所有这些都将作为备用。
边缘：js不会抛出任何错误。浏览器将读取第二个CSS规则，但是将无法处理它，结果将是运动冻结。因此，这里应该有某种寻址方式。我个人会使用Bowser之类的工具来检测浏览器类型，将相关类添加到主体，并基于此映射不同的CSS规则。

关于w3c规范，我想指出：

SYNTAX_ERR：如果指定的值存在语法错误并且为无法分析。

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

NO_MODIFICATION_ALLOWED_ERR：如果此声明为只读或引发，则引发该属性为只读。

该属性不是只读属性，或者无法被告知（如果浏览器不支持i，则现在不支持该属性）。我猜..

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

2 个答案: