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
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
yea, my assumption was correct. It's in experimental fase now
https://developer.mozilla.org/en-US/docs/Web/CSS/attr
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.
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 ?Yup. Though the spec has it extended out now, it's only supported with content for the moment