CSS attr() Function Improvements

CSS attr() Function Improvements

The modern attr() work turns HTML attributes into something much closer to CSS props. Instead of using attributes only for generated text, you can read typed values into real properties like spacing, radius, or font size.

.card {
  padding: attr(data-pad rem, 1rem);
  border-radius: attr(data-radius px, 16px);
  font-size: attr(data-size rem, 1rem);
}

Why Teams Want It

When a component already exposes HTML attributes, it is wasteful to mirror those values into inline styles or JavaScript state just so CSS can see them. Improved attr() closes that gap and makes declarative HTML inputs more useful.

Keep Types and Fallbacks Explicit

Typed attr() is only safe when you declare what kind of value you expect and what should happen when the attribute is missing or invalid. That is why the fallback matters just as much as the happy path.

Where It Fits

Use it for component-level knobs such as density, spacing, radius, and typography adjustments. Avoid turning it into a mini templating language. If every property comes from attributes, your CSS API is probably too wide.

Interop 2026 Value

This is a small feature with an outsized effect on authoring ergonomics. It makes the HTML, CSS, and component-contract layers line up in a way the platform has historically made awkward.

---