Advanced attr() in
Chrome 133. Opening new
ways to integrate with CSS from your HTML:
<li scroll-snap="start"></li>
<li scroll-snap="center"></li>
[scroll-snap] {
scroll-snap-align: attr(scroll-snap type(start | center | end));
}
Try it & learn more from Bramus @ Chrome Developers
#CSS advanced attr() Unlocking new ways to integrate with CSS from your HTML nerdy.dev/advanced-attrAdam Argyle
Would scroll-snap-align: attr(scroll-snap type("start | center | end")) be valid? That seems more equivalent to the first example.Jason Christa
@argyleink This CSS feature is really really cool! Though inventing custom attribute names without `data-` is something we want to avoid generally
Jelmer
yep! you can: `attr(scroll-snap type(start | center | end))`Adam Argyle
@jelmerdemaat indeed, and especially avoid inventing custom attributes that don't have a `-`.
worth mentioning too that the `data-` prefix gets you included in `element.dataset`; very handy
Adam Argyle
@argyleink Uuuu thats a nice one! New attr() features are super powerful, and I am just waiting for new patterns we will explore soon.
https://mastodon.social/@pawelgrzybek/113843980110588700
Paweł Grzybek (@pawelgrzybek@mastodon.social)Paweł Grzybek
@unocss.dev attributify mode ???? unocss.dev/presets/attr...
This is awesome!
