使用 CSS 变量定义 -webkit-background-clip 属性不适用于 Chrome

Question

"well known" 可以使用 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 时，元素才会具有 clip-path 值而不是 initial（等于 border-box）在该元素内。
--clip-path: circle(50%); 有效地设置了 vanilla 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。]

以下最小工作示例的 Cliff 注释：<div class="text-masked-gradient"> 包含一个文本字符串，它位于渐变背景上。 CSS background-clip:text (and/or -webkit-background-clip:text) 属性应该使背景仅通过文本本身显示。下图显示了 (a) 它工作时的样子 (L) 和 (b) 不工作时的样子 (R)。

我的 HTML 标记：

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

完整 CSS 如下。此代码也存在于 this Pen. (I consider many more scenarios, for diagnostic purposes, at 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);
}

正确呈现在：

野生动物园
Firefox 量子
Firefox 开发者版

但不在

Chrome（整个矩形都是渐变色，没有文字）。

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

（如果您使用 -webkit-background-clip:text 而不是 webkit-background-clip:var(--background-clip)，此示例在所有这些浏览器中都可以正常工作，包括 Chrome。）

Answer 1

Lea Verou 已确认这是一个 Chrome 错误。她创造了这个 reduced test case, which fails when viewed with Chrome. She filed this bug report: 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 变量来简化供应商前缀。

使用 CSS 变量定义 -webkit-background-clip 属性不适用于 Chrome

Using CSS variable to define -webkit-background-clip property doesn't work on Chrome

css

background

css-variables

vendor-prefix

使用 CSS 变量定义 -webkit-background-clip 属性 不适用于 Chrome

Using CSS variable to define -webkit-background-clip property doesn't work on Chrome

css

background

css-variables

vendor-prefix

使用 CSS 变量定义 -webkit-background-clip 属性不适用于 Chrome