demo · v136

Syntax migration

Side-by-side: the same content rendered with attr(data-label string) (legacy) and attr(data-label raw-string) (136+). Pre-136 the new keyword parses to unset; post-136 both work, with the legacy name marked deprecated in DevTools.

Probing CSS support for both keywords…
CSS.supports old syntax—
CSS.supports new syntax—

attr(data-label string) — deprecated

First row text
Second row text
Third row text
.item::before { content: attr(data-label string) ": "; }

attr(data-label raw-string) — 136+

First row text
Second row text
Third row text
.item::before { content: attr(data-label raw-string) ": "; }

why this angle

The sibling concept toggles the syntax. This concept shows them rendering simultaneously — the migration story for any production CSS that has been using the legacy keyword. Useful for sanity-checking a global find-replace.

see also