CSS is evolving, and in the future, it may be able to read data from HTML attributes directly — replacing some JavaScript for dynamic styling. In this video, we explore the typed attr() function, which allows CSS to theoretically use attribute values (like colors, numbers, or units) for styling properties.
⚠️ Important: Currently, typed attr() only works with content: (for ::before / ::after) in modern browsers. Using it for properties like width or background-color is still experimental. In this video, we show what works today and what the future could look like.
What you’ll see in this video:
How typed attr() works in theory for colors and numeric values
Examples with progress bars and mini theme cards
The current browser reality and limitations
How to use attr() with content: today
Learn more:
MDN docs for attr(): https://developer.mozilla.org/en-US/docs/Web/CSS/attr
