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

【问题标题】：Using CSS variable to define -webkit-background-clip property doesn't work on Chrome使用 CSS 变量定义 -webkit-background-clip 属性在 Chrome 上不起作用
【发布时间】：2019-07-02 00:30:08
【问题描述】：

众所周知，您可以使用 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。]

以下最小工作示例的悬崖注释：<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);
}

这会正确呈现在：

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

但不在

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

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

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

【问题讨论】：

标签： css background css-variables vendor-prefix

【解决方案1】：

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

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

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

【讨论】：