Using attr to set css variable inline that work with CSP

Not yet. In the same link you can read:

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.

Still no browser support the attr() for properties different than content and also no support for the type-or-unit.

Worth to note that you can use attr() inside a CSS variable but it need to be later used with content. CSS variables is only an intermediate so we don’t evaluate the support based on the variable but based on the property that will use the variable.

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

*::before {
  content: var(--color, "default");
  color:blue;
}
<div data-color="red">hello</div>

Leave a Comment