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

CSS标准对不支持的表达式有什么规定？浏览器应该如何处理这些问题？实际的浏览器实现如何处理这些问题

我正在实现一个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:

这样的速记声明会覆盖它之前的5个细粒度声明中的任何一个；因此，难点在于浏览器试图将未知令牌分配给5个细粒度属性中的哪一个。我想到了几种可能性：

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

  rgba（…）

  代表

  背景图像

  ，即使它不知道如何处理它，也会清除以前的

  背景颜色

• 浏览器认为，

  rgba（…）

  代表一种

  背景色

  ，由于它不理解背景色，于是转而使用

  #f00

让我们更有趣一点，假设我们有这样一个：

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

浏览器如何解释此CSS片段，

• 如果浏览器不理解

  rgba

• 如果浏览器不理解

  线性渐变

• 如果浏览器不理解

  请重复-y

• 如果浏览器不理解三者中的任何两个
• 如果浏览器不理解这三个选项中的任何一个

---

据我所知，如果浏览器甚至不能理解表达式的一部分，那么它会将属性处理为语法错误，并忽略整行内容。

CSS2.1规范中的解析规则以声明的形式表示，声明引用整个属性值对，无论属性是否为速记：

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

  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

shorthand属性使用非法值导致忽略整个声明

尽管规范提到非法值，但就实现而言，无法识别的值和非法值是一样的，因为无论哪种方式，实现都不知道如何处理这样的值

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

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

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

正如我所看到的（但我现在可以确认），IE将忽略/覆盖第一部分（

背景：#fff url（…）不重复

），即使它不理解第二部分。所以要么你需要具体点。或者使用相同的选择器将其拆分为两个规则。规范看起来是这样的，如果该值对于浏览器使用的规范版本是非法的，则必须完全忽略该属性。