CSS can take Attribute Values as Variables

2026-09-17
CSS

The attr() CSS value function has been supported for a long time already to fill the content property (e.g. for ::before and ::after pseudo elements).

Now it can also be used for other properties. Type casting may be needed.

.background[data-background] {
  background-color: attr(data-background type(<color>), red);
}

References

attr() CSS function: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/attr