使用 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 页面说：

attr() CSS 函数用于检索所选元素的属性值并在样式表中使用它。它也可以用在伪元素上，在这种情况下，返回伪元素的原始元素上的属性值。

甚至还有演示，但它不能在 Linux 上的 Chrome 中运行，所以对我来说没有用。它甚至无法在 Linux 上的 Firefox 中运行。

有没有其他方法可以使用没有内联样式且无需编写动态 <style></style>和随机数的CSS变量？

Answer 1

还没有。在同一链接中，您可以阅读：

注意： attr() 函数可与任何 CSS 属性一起使用，但对内容以外的属性的支持尚处于实验阶段，并且对类型或单位参数的支持很少。

仍然没有浏览器支持attr()与内容不同的属性，也不支持类型或单位。

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

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

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

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