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

我一直在思考如何在不使用内联样式的情况下使用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中也不起作用。

还有没有其他方法可以使用css变量而无需内联样式，也无需编写动态<style></style>和随机数？

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一样，它应该对此做些事情，但实际上并没有完全做到这一点。

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

注意：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>

相关问答