CSS Attr() Gets an Upgrade
a year ago
- #Web Development
- #CSS
- #attr()
- The redesigned CSS `attr()` function now works with any CSS property, not just the `content` property of pseudo-elements.
- It can parse HTML attribute values into various CSS data types, such as `<color>`, `<custom-ident>`, and length units like `px`.
- Examples include using `attr()` to set `color` from a `data-color` attribute and `view-transition-name` from an element's `id`.
- The function supports fallback values, e.g., `attr(data-foo type(<color>), red)` defaults to `red` if parsing fails.
- Without a specified type, `attr()` defaults to parsing as a CSS string, maintaining backward compatibility.