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

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

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

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

Answer 1

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

注意：attr() 函数可以与任何 CSS 属性一起使用，但对内容以外的属性的支持是实验性的，对 type-or-unit 参数的支持是稀疏的。

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

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

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

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

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

Answer 2

CSS attr 属性的一个有趣用途，但正如问题所述，在伪元素属性之外对它的支持很少见例如https://developer.mozilla.org/en-US/docs/Web/CSS/attr

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

* {
    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 3

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

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

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