v133 · css

CSS advanced attr() function

Implement the augmentation to attr() specified in CSS Level 5, which allows types besides <string> and usage in all CSS properties (besides pseudo-element 'content').

concepts

  1. Typed attr()

    attr() learns typed values + fallbacks. Cascade-friendly way to thread element-level data into property values.

  2. Data-driven chart

    A bar chart whose width and colour come straight from data-pct and data-color attributes — no JS recolour, no CSS custom-property bridge. The 14-year-old request use case, made real.

  3. Type explorer

    Drive one card through four typed attributes — <color>, <length>, <angle>, <percentage>. Corrupt any one and watch its own fallback kick in.

  4. Palette wall

    120 swatches, one CSS rule. Each swatch paints itself from data-hex with a readable contrasting label colour — mark-up reduces to pure data.

  5. Progress Bars

    Progress bars styled entirely from data-value attributes via attr(data-value type(<number>), 0) in calc() — no inline style, no JS, no CSS variable bridge. Includes ratio bars using two attributes and a live slider editor.

  6. Product Card

    A product card where price counter, star rating, stock bar, and out-of-stock state are all driven by data-price, data-rating, data-stock, data-discount attributes. Zero inline styles; CSS reads each attribute via typed attr().

why it shipped

This is a highly requested feature, with 123 stars at crbug.com/246571. We also want to keep it considered in the CR period by adding the first implementation.

references