The modern attr attribute adds a lot more functionality than the former one. Previously you could only use text, but now you can support different types.
attr(data-color, type(<color>), red)
We can check for the modern attr() support with CSS @supports. Here is an example:
@supports (x: attr(x type(*))) { /* modern attr() works */ }
This lets you pass a lot more information from HTML to CSS, which historically has different problems with different methods. e.g. this could be used to pass React props to CSS without having to use [[20231101113023-css-variables]] or classes.
This method also involves [[js]] entirely.