Advanced Attr · January 17, 2025

January 17, 2025

devrel@google1 month ago

notecss

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

9 mentions #

77likes

21reposts

Join the conversation on

#CSS advanced attr() Unlocking new ways to integrate with CSS from your HTML nerdy.dev/advanced-attr

Would scroll-snap-align: attr(scroll-snap type("start | center | end")) be valid? That seems more equivalent to the first example.

@argyleink This CSS feature is really really cool! Though inventing custom attribute names without `data-` is something we want to avoid generally

yep! you can: `attr(scroll-snap type(start | center | end))`

@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

Is this ???? Tailwind?

@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)

@unocss.dev attributify mode ???? unocss.dev/presets/attr...

This is awesome!

coding at night