css - 处理不受支持的 CSS 表达式的标准方法是什么？

Question

CSS 标准对不受支持的表达式有何规定？浏览器应该如何处理它们？实际的浏览器实现如何处理它们？

我正在实现一个 CSS 属性优化器(用于一个缩小器元素)，我们希望保持 CSS 回退不变。我们的目标是尽可能优化 CSS，但要以呈现与原始样式完全相同的方式进行优化。
这就是为什么我必须了解这些东西是如何工作的。

简单属性

对于简单的属性，真的很简单。
假设我们有这个:

div {
    color: #f00;
    color: rgba(1,2,3,.4);
}

在这种情况下，如果浏览器不支持 rgba然后是第一个声明 #f00赢了。这里没有问题。

速记

但是，它如何与速记属性一起使用？
这是一些代码:

div {
    background: #f00;
    background: rgba(1,2,3,.4);
}

如果浏览器不理解，它如何呈现 rgba ? 如您所知，background 的语法是:background: <color> <image> <repeat> <attachment> <position>;并且这样的速记声明覆盖了之前的 5 个细粒度声明中的任何一个；所以困难在于浏览器试图将未知 token 分配给 5 个细粒度属性之一。我有几种可能性:

• 浏览器决定它根本不理解后面的声明并完全丢弃它
• 浏览器认为rgba(...)代表 background-image即使它不知道如何处理它，也会清除之前的 background-color还有
• 浏览器认为rgba(...)代表 background-color并且因为它不理解它，所以退回到使用 #f00相反

让我们让它更有趣，假设我们有这个:

div {
    background: #fff url(...) no-repeat;
    background: rgba(1,2,3,.4) linear-gradient(...) repeat-y;
}

浏览器如何解释这个 CSS 片段，...

• 如果浏览器不理解rgba ？
• 如果浏览器不理解linear-gradient ？
• 如果浏览器不理解repeat-y ？
• 如果浏览器不理解这三个中的任何两个？
• 如果浏览器不理解这三个中的任何一个？

Answer 1

section 4.2中的解析规则CSS2.1 规范的一部分是用声明 来表达的，它指的是整个属性值对，无论属性是否简写:

• Illegal values. User agents must ignore a declaration with an illegal value. For example:

  img { float: left }       /* correct CSS 2.1 */
  img { float: left here }  /* "here" is not a value of 'float' */
  img { background: "red" } /* keywords cannot be quoted */
  img { border-width: 3 }   /* a unit must be specified for length values */
  

  A CSS 2.1 parser would honor the first rule and ignore the rest, as if the style sheet had been:

  img { float: left }
  img { }
  img { }
  img { }
  

  A user agent conforming to a future CSS specification may accept one or more of the other rules as well.

请注意，第三个示例显示对 background 速记属性使用了非法值，导致整个声明被忽略。

虽然规范谈到了非法值，但就实现而言，无法识别的值和非法值是一回事，因为无论哪种方式，实现都不知道如何处理这样的值(value)。

所以你问题第一部分的答案是

• the browser decides it doesn't understand the latter declaration at all and drops it entirely

第二部分的答案都是一样的:后面的声明被完全忽略了。