Exploring the Future of Atomic CSS with the New CSS attr() Feature

Quick start

Use attr() in a pseudo‑element to read an HTML attribute and generate content, e.g. a tooltip.

<span class="css-tips" data-title="I am a tooltip">Hover me</span>

.css-tips[data-title]::after {
  content: attr(data-title);
  /* additional styling */
}

Earlier implementations only returned strings, so numeric or color values were ignored:

<div w="10"></div>
<style>
  div { width: attr(w); /* ineffective */ }
</style>

Chrome 133+ adds full support for typed values and fallback handling.

Syntax details

The new syntax is

attr(<attr-name> <attr-type>?, <fallback-value>?)

. Two optional parameters are introduced: attr-type – specifies the CSS data type of the attribute value (e.g. px, rem, number, color, deg, etc.). fallback-value – used when the attribute is missing or empty.

/* Basic usage */
attr(data-count)
attr(href)

/* With type */
attr(data-width px)
attr(data-size rem)
attr(data-name raw-string)
attr(id type(<custom-ident>))
attr(data-count type(<number>))
attr(data-size type(<length>|<percentage>))

/* With fallback */
attr(data-count type(<number>), 0)
attr(data-width px, inherit)
attr(data-something, "default")

Typed values can be combined with any CSS unit. Example for rotation:

[rotate] {
  rotate: attr(rotate deg);
}

Progress bar with numeric display

Typical implementations use a CSS custom property:

<div class="progress" style="--value:30"></div>
<div class="progress" style="--value:42.5"></div>

Displaying the variable with content fails because var() cannot be used in content. Counters can show integers but not decimals.

.progress::before {
  --value: 50;
  counter-reset: progress var(--value);
  content: counter(progress);
}

With the enhanced attr(), numeric values can be read directly from an attribute and used both for the bar length and the displayed number:

<div class="progress" value="30"></div>
<div class="progress" value="42.5"></div>

.progress {
  color: royalblue;
  width: 300px;
  height: 20px;
  background: linear-gradient(currentColor, currentColor) 0 0 / attr(value %) 100% no-repeat #ccc;
  border-radius: 2px;
  position: relative;
}
.progress::after {
  content: attr(value);
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(10px, -50%);
  font-size: 20px;
}

Potential for atomic CSS

Because attr() can map an attribute directly to a CSS property, a handful of rules can replace large utility‑class libraries:

[fs] { font-size: attr(fs type(<length>)); }
[p]  { padding: attr(p type(*)); }

This approach could dramatically shrink stylesheet size once browser support is universal.

Advantages and limitations

Enables direct generation of content from HTML attributes.

HTML markup becomes more declarative; no need to duplicate values in style attributes or custom properties.

Provides a native, atomic‑style mechanism that is more efficient than generating many utility classes.

Current limitations:

URL values are not allowed; url(attr(src)) is invalid for security reasons.

Only works when the attribute is present and non‑empty; empty attributes trigger the fallback value.

div { background: url(attr(src)); /* not effective */ }

Work‑arounds resemble CSS variables, e.g. embedding the full url() string in the attribute:

<div src="url(xxx.png)"></div>

Reference

[1] 小tips: 如何借助content属性显示CSS var变量值 – https://www.zhangxinxu.com/wordpress/2019/05/content-css-var/ [2] 如何让CSS计数器支持小数的动态变化？ – https://juejin.cn/post/7137480392730214414