demo · v133

A chart with no JS recolour

Each bar's width and colour comes from data-pct and data-color on the row, via attr(data-pct type(<percentage>)). The chart is pure HTML + CSS. The sliders only mutate attributes — CSS does the rest.

Chrome
64% Safari
20% Firefox
9% Edge
5% Other
2%
Chrome % Safari % Firefox % Edge % Other %

the CSS

.bar {
  /* attr() now takes a type and accepts a fallback */
  width: attr(data-pct type(<percentage>), 0%);
  background: attr(data-color type(<color>), var(--accent-blue));
}

Before this shipped, attr() only worked inside the content property of ::before / ::after, and only as a string. Everywhere else, threading element data into CSS meant writing a script that read the attribute and pushed a CSS custom property. The chrbug had been open since 2010 (123 stars at landing). The new form accepts a typed signature — <number>, <length>, <percentage>, <color>, <angle>, <url>, etc. — and a fallback after the comma. Sliders here mutate data-pct and data-color; the bars redraw because CSS re-resolves the typed attr() on attribute change.

see also