使用 attr 设置与 CSP 一起使用的 css 变量内联

Question

我在想如何在不使用内联样式的情况下使用 css 变量。我以为我可以使用这个：

[data-color] {
    --color: attr(data-color color, green);
}
* {
    color: var(--color, blue);
}

<div data-color="red">hello</div>

似乎 attr 只在伪选择器中起作用（并且可能只在 content: 属性上起作用），但是 MDN attr page 说：

The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. It can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element's originating element is returned.

甚至还有演示，但它在 Linux 上的 Chrome 中不起作用，所以它对我没有用。它甚至无法在 Linux.

上的 Firefox 中运行

有没有其他方法可以使用 css 变量而不用内联样式并且不用写动态 <style></style> 和 nonce？

Answer 1

CSS attr 属性的有趣用法，但正如问题所述，在伪元素属性之外对它的支持很少见 [=13] =]

它实际上比那更糟糕，因为如果你有：

* {
    color: var(--color, blue);
}
[data-color] {
    --color: green;
    --color: attr(data-color);
}

<div data-color="red">hello</div>

与问题中的类似，但为了更明确而分开。 --color: attr(data-color) 不会标记警告并被忽略并使用绿色。相反，它被接受并将 --color 设置为字符串。就好像浏览器有点识别 attr 并且它应该用它做一些事情但实际上并没有完全做到。

Answer 2

还没有。在同一个 link 你可以阅读：

Note: The attr() function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse.

对于与内容不同的属性，仍然没有浏览器支持 attr()，也不支持 type-or-unit。

值得注意的是，您可以在 CSS 变量中使用 attr()，但它需要稍后与内容一起使用。 CSS 变量只是一个中间值，因此我们不根据变量评估支持，而是根据将使用该变量的属性来评估支持。

[data-color] {
  --color: attr(data-color);
}

*::before {
  content: var(--color, "default");
  color:blue;
}

<div data-color="red">hello</div>

Answer 3

对于仍想在 HTML 上管理 CSS 变量的每个人，您可以这样做：

* {
    color: var(--color, blue);
}

<div style="--color: red">hello</div>
<div>hello</div>

使用 attr 设置与 CSP 一起使用的 css 变量内联

Using attr to set css variable inline that work with CSP

css

content-security-policy

css-variables