attr() is getting an upgrade!
Starting in Chrome 133 (stable rollout happening this month), you'll be able to access attributes in CSS as typed values beyond strings.
Here's an example of where that's pretty cool. Given:
<div data-rating="4.5">
You can use data-rating as a numerical value with:
attr(data-rating type(<number>)
So in this demo, I'm using that value to show a fill percentage in the stars (as a background gradient with a mask). I'm also able to use this value as a string (which was possible before) to represent its content as a string in a pseudo element. Two for one!
Dang I'm excited about new semantic attr() capabilities in CSS!
I wrote a post about why this feature is so powerful, how it could change the way you build components, and how I would use it.
It'll start rolling out next week in Chrome 133 🥰
https://t.co/xg0N8NVMmc