代码之家 › 专栏 › 技术社区 › Luca Reghellin

我的JS脚本会通过在旧浏览器上设置CSS——变量而中断吗?

css-variables css javascript

-1

Luca Reghellin · 技术社区 · 6 年前

我想开始使用CSS——变量。对于传统浏览器,CSS回退是先声明一个传统规则,这没关系。但接下来我将通过JavaScript操作它们。那么,它会破坏脚本并在旧浏览器中抛出一些错误吗?我问是因为我现在不能测试遗产,所以我自己看不见。

我是说,如果我这样做:

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

旧版浏览器会发生什么?只是什么都没有(--tx将静默不更新,程序将继续)或者,抛出一个错误并中断脚本?

2 回复 | 直到 6 年前

Patrick Roberts Benjamin Gruenbaum 6 年前

根据 the specification ,请 setProperty() 可以扔 DOMException 在这些条件下:

语法错误:如果指定的值有语法错误且不可分析,则引发。

不允许修改\u错误:如果此声明为只读或属性为只读,则引发。

如果您想安全,请在 try...catch 或基于 Modernizr.customproperties 以确保调用在旧浏览器中引发异常时被捕获,或者仅在浏览器支持时被调用。

我也建议你不要用 template literals 或者用巴别塔蒸腾到ES5。

Luca Reghellin 6 年前

对我来说,我的问题的答案是不,它不会破坏JavaScript。不过,对于不支持变量的浏览器,您仍然需要处理CSS代码。具体地说,令人遗憾的是,微软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不支持——变量。边缘不支持它们,但不在传递给转换的calc()中。

行为:

android 4.4.2和ie11:js将不会设置 --distance 在不引发任何错误的情况下,他们将使用第一个CSS规则(由于滑动事件的数据当前更新不在此处显示,为了简单起见)。所以这一切都将起到退步的作用。
edge:js不会抛出任何错误。浏览器将读取第二个CSS规则,但无法处理它,结果将被冻结。所以这里应该有一些地址。我个人会使用像 Bowser 要检测浏览器类型,请向body添加相关类,并基于该类映射不同的CSS规则。

关于W3C规范,我想指出:

语法错误:如果指定的值有语法错误并且为不可饶恕的

在这种情况下,我们谈论的是价值,而不是财产。此外,该值没有任何语法错误。

不允许修改\u错误:如果此声明为只读或属性为只读。

属性不是只读的,或者无法告知(如果浏览器不支持i,则现在不支持)。我猜…