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

Question

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

我正在实现CSS 属性优化器（对于minifier项目），我们希望保留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个细粒度声明中的任何一个;所以困难在于浏览器尝试将未知令牌分配给的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

CSS2.1规范的section 4.2中的解析规则用声明表示，它引用整个属性 - 值对，无论属性是否是简写：

  

  

• 非法值。用户代理必须忽略具有非法值的声明。例如：

  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 */
  

       

  CSS 2.1解析器会遵守第一条规则并忽略其余规则，就像样式表一样：

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

       

  符合未来CSS规范的用户代理也可以接受一个或多个其他规则。

  

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

虽然规范提到非法值，但就实现而言，无法识别的值和非法值是相同的，因为实现方式不知道如何处理这样的价值。

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

  

  
• 浏览器决定它根本不理解后一个声明并将其完全删除
  

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

Answer 2

据我所知，如果浏览器甚至无法理解表达式的一部分，那么它会在语法错误中处理该属性，并忽略整行。