attr() type()

A bar sized by its own data attribute

CaveatThe type matters: bare attr(data-pct) is a string and will not size anything, so it has to be attr(data-pct type(<percentage>)). Give it a fallback as the second argument, because an attribute that is missing, misspelled or holding a bare number makes the declaration compute to that fallback rather than to nothing sensible.

FallbackWhere typed attr() is unsupported the whole value is invalid at computed-value time and the bar collapses, which is why the fallback argument is not optional in practice. If the numbers must be visible everywhere, write a custom property per row in a stylesheet instead and keep the attribute for the script that sets it.

<span data-pct="72%"></span>

.bar {
  /* typed, with a fallback if it is absent */
  width: attr(data-pct type(<percentage>), 4%);
}

Published 24 Sep 2026