attribute values in custom props?

So since we can do content: attr(data-value), I’m curious if there’s a way to store the value of attributes within custom properties ? Can I do something like —_value: attr(data-value)? Will it look for an attribute of [data-value] on the element I use it on ?
5 Replies
MarkBoots
MarkBoots8mo ago
unfortunatly not (yet). If i understand correctly it is because the the attr(name) function interpretates everything as a string (That's why it can only be used on the content property) I think they are working on expanding the function attr(name type) to set the type. Probably from there on it can also be assigned to a custom property, or even do calculations or other fun stuff with it While waiting for it, you could ofcourse just do an inline style custom property
<div data-value="50" style="--_value: 50"></div>
<div data-value="70" style="--_value: 70"></div>
<div data-value="50" style="--_value: 50"></div>
<div data-value="70" style="--_value: 70"></div>
MarkBoots
MarkBoots8mo ago
yea, my assumption was correct. It's in experimental fase now https://developer.mozilla.org/en-US/docs/Web/CSS/attr
No description
Kevin Powell
Kevin Powell8mo ago
really looking forward to when we can do more with attr(). the inline style idea that mark shared is quite common in some circles. It works well, but I wish there was a different way.
clevermissfox
clevermissfox8mo ago
Thank you, exciting to hear it’s in any kind of phase !! Yeah in-line styles work for now , just wondered if there was a way with @Property. Appreciate the answer and resources ! Me too, I’m glad it’s in the works though! Is content the only property that can take the attr() function ?
Kevin Powell
Kevin Powell8mo ago
Yup. Though the spec has it extended out now, it's only supported with content for the moment
Want results from more Discord servers?
Add your server