主页 / coding / 问题 / 79079507
Accepted
natevw
Asked: 2024-10-12 03:23:40 +0800 CST

为什么不受支持的 CSS 值仍然会覆盖其后备声明？[重复]

  • 772

我设置了一些 CSS 规则，例如：

.example {
  color: white;
  background-color: darkgray;
  background-color: var(--bg-color);
  background-color: rgb(from var(--bg-color) r g b  / 0.5);
}

期望如果浏览器无法理解相当新的相对颜色语法（或相当古老但并不古老的var()语法），我的元素仍然清晰易读。但在较旧的浏览器中，我仍然会得到透明（getComputedStyle($0).backgroundColor === rgb(0,0,0,0)）背景，而不是我需要的较暗的背景，以实现易读性。

为什么这两者都是正确的？

  • 浏览器不理解语法（从不使用相对颜色可以看出）
  • 浏览器仍然使用该规则（证据是后备规则未被使用）

CSS Values 规范中关于“部分实现”的说明如下：

为了使作者能够利用向前兼容的解析规则来分配后备值，CSS 渲染器必须将任何 @ 规则、属性、属性值、关键字和其他语法结构视为无效（并酌情忽略），因为它们没有可用的支持级别。特别是，用户代理不得选择性地忽略不受支持的组件值，而应在单个多值属性声明中遵守支持的值：如果任何值被视为无效（因为不支持的值必须是无效的），CSS 要求忽略整个声明。

所以我的理解是，不理解或不支持我的相对颜色语法的浏览器应该忽略整个声明。那么为什么不使用较早的后备方法之一呢？

css

3 个回答

  1. Best Answer

    当使用有效var语法并且替换后的语法var无效时，该值将与使用相同unset。此行为在客户属性规范中提到。

    按照3.1 无效变量：

    如果声明包含引用具有保证无效值的自定义属性的 var() （如上所述），或者它使用有效的自定义属性，但属性值在替换其 var() 函数后无效，则声明在计算值时可能无效。 发生这种情况时，计算值是以下之一，具体取决于属性的类型：

    在该部分下：

    根据该属性是否被继承，分别确定该属性的继承值或其初始值，就好像该属性的值已被指定为unset关键字一样。

    每当语法包含var()，并且替换 后语法无效时var()，声明的值将使用该unset值，而不是忽略声明。你可以在一个更简单的示例中看到这种行为：

    .example{
  --bg-red:red;
  color:blue;
  color:var(--bg-red) I am a invalid syntax;
}
    <div class="example">test</div>

    • 3

  2. 正如另一位用户在我的问题的评论中指出的那样（现已删除？），这种情况仅在var()麻烦的选择器中使用时才会发生。如果我尝试使用相对颜色，rgb(from red r g b / 0.5)那么我想要的后备方法就会被使用。

    我相信答案在于关于无效 CSS 变量的规范，其中规定：

    如果 […] 属性值在替换其函数后无效，则声明在计算值时可能无效。var()

    这不会导致丢弃规则，而是会表现为：

    […] 就好像该属性的值已被指定为 unset 关键字。

    甚至还有一条注释进一步强调了这一点（在给出了一个与我非常相似的例子之后，background-color甚至使用了😁）：

    变量不能像其他语法错误那样“提前失败”，因此当用户代理意识到属性值无效时，它已经被丢弃了其他级联值。

    我不知道为什么用户代理必须要丢弃其他值（这似乎是一种实现或至少是设计选择？），但无论如何它确实解释了这一点！

    简而言之：

    存在意味着var()浏览器使用该规则希望它能解析出有效内容。但如果最终发现无效，则丢弃它为时已晚，而是重置属性。

    • 1

  3. 您可以尝试以下操作，有些浏览器不接受 var 或 rgb，所以它不会返回任何内容（透明的内容），因为您有备用颜色，所以这应该可以工作。

    .example {
  color: white;
  background-color: darkgray; 
  background-color: var(--bg-color, darkgray); 
  background-color: rgb(from var(--bg-color) r g b / 0.5);
}
    • -2

相关问题