css - 使用 CSS 变量定义 -webkit-background-clip 属性在 Chrome 上不起作用

Question

众所周知，您可以使用 CSS 变量来简化需要特定于浏览器的供应商前缀的属性的编写。 (参见 Lea Verou，“Autoprefixing, with CSS variables!”。)例如，

* {
  --clip-path: initial ;
  -webkit-clip-path: var( --clip-path ) ;
  clip-path: var( --clip-path ) ;
}
.maximalCircle {
  --clip-path: circle(50%);
}

在这个例子中，

• 设置--clip-path:initial;取消继承，因此元素将具有 clip-path initial 以外的值(等于 border-box )仅当 --clip-path 时在该元素内定义。
• --clip-path: circle(50%);有效地设置 Vanilla 的值(value) clip-path和特定于 WebKit 的 -webkit-clip-path属性。

您可以在 this Pen 上看到实际效果.

但是，我未能使用 CSS 变量来简化不同的属性:-webkit-background-clip属性:如果我分配一个 CSS 变量 --clip-path:text;作为 -webkit-background-clip 的值属性，(a) Safari(和 Firefox)喜欢它，但 (b) Chrome 不理解它(即，Chrome 中的计算值为 background-clip: border-box，这是默认值)。

[在所有这些测试中，我使用的是 Safari 12.1.1、Firefox Quantum 67.0.4、Firefox Developer Edition 68.0b12 和 Chrome 75.0.3770.100。]

以下最低工作示例的悬崖笔记:A <div class="text-masked-gradient">包含位于渐变背景上的文本字符串。 CSS background-clip:text (和/或 -webkit-background-clip:text )属性应使背景仅通过文本本身显示。下图显示了 (a) 它工作时的样子 (L) 和 (b) 不工作时的样子 (R)。

我的 HTML 标记:

<div class="text-masked-gradient">
  YELP
</div>

完整的 CSS 如下。此代码也存在于 this Pen . (出于诊断目的，我在 this other Pen 考虑了更多场景。)

完整的 CSS:

.text-masked-gradient {
  --background-clip: text ;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  -webkit-background-clip: var( --background-clip );

  height: 150px ;
  width: 300px ;
  outline: solid black ;
  margin: 50px ;
  font-size: 7em ;
  text-align: center ;
  font-weight: 700 ;
  background-image:
    radial-gradient(circle at top left,red,chartreuse);
}

正确呈现在:

• Safari
• Firefox 量子
• Firefox 开发者版

但不在

• Chrome(其中整个矩形是渐变色，没有文本)。

我做错了什么吗？这是与 CSS 变量和 -webkit-background-clip 有关的 Chrome 错误吗？属性(property)？

(如果您使用 -webkit-background-clip:text 而不是 webkit-background-clip:var(--background-clip)，此示例在所有这些浏览器(包括 Chrome)中运行良好。)

Answer 1

Lea Verou 已确认这是一个 Chrome 错误。她创造了这个reduced test case ，在使用 Chrome 查看时失败。她提交了这个错误报告:Issue 980439 .

最重要的是，当您尝试使用 CSS 变量定义 background-clip 属性时，会出现一个 WebKit 错误(因此会影响 Safari 和 Chrome，例如 background-clip :--a，其中 CSS 变量是 text。这会导致 Chrome 和 Safari 忽略有效的 -webkit-background-clip:text 规则。参见 Bug 199410 - background-clip:var(--a) invalidates -webkit-background-clip:text when --a:text .

由于这两个错误，background-clip 属性目前不适合使用 CSS 变量来简化供应商前缀。