写过前端的都踩过这个坑——CSS 想读 HTML 里的 data-* 属性，以前只能靠 JS 先去读再写到 CSS 变量里，attr() 在 content 以外全是摆设。今天 Firefox 155 把这件事彻底原生化了

写过前端的都踩过这个坑——CSS 想读 HTML 里的 data-* 属性，以前只能靠 JS 先去读再写到 CSS 变量里，attr() 在 content 以外全是摆设。今天 Firefox 155 把这件事彻底原生化了。

这个坑踩得有多深？

以前你想让一个元素的宽度由 HTML 属性直接决定，得这么写：

document.querySelectorAll('.meter').forEach(el => {
  const pct = el.dataset.pct;
  el.style.setProperty('--pct', pct + '%');
});

.meter { width: var(--pct); }

五年前是这样，三年前还是这样，现在你打开 MDN 查 attr()，Chrome 133 就支持了，Firefox 155 刚发布，Safari 还在路上。但 90% 的前端项目里，这套 JS 桥接代码还在线上跑着。

现在的写法：attr() 直接出类型值

Firefox 155 稳定版把 CSS Values and Units Level 5 的 attr() 类型推导落地了，核心就是两个新语法：

单位后缀速写：

.card { width: attr(data-width px); }
.progress { height: attr(data-pct %); }
.rotate { transform: rotate(attr(data-deg deg)); }

type() 显式声明 + 回退值：

.meter { width: attr(data-pct type(), 60%); }
.badge { background: attr(data-color type(), #eee); }
.icon { font-size: attr(data-size rem, 1rem); }

Firefox 155 之前，这个写法在 Chrome 里写是能用的，但 Firefox 一直是实验性功能，需要手动开 layout.css.attr.enabled。从今天起，写完不用开任何 flag，线上直接用。

三类典型场景，JS 全部省掉

进度条——最常见的需求：

<div class="meter" data-pct="75"></div>

.meter { width: attr(data-pct type(), 0%); }

属性值直接驱动视觉，进度改了只要改 HTML，不用动一行 JS。

动态主题色——以前靠 CSS 变量桥接：

<div class="chip" data-tone="#f43f5e" data-radius="8px"></div>

.chip {
  background: attr(data-tone type(), #eee);
  border-radius: attr(data-radius type(), 4px);
}

单个 data 属性驱动多个 CSS 属性，属性一改样式全变。

带 type() 的 if() 条件样式——这个组合让 CSS 真正能做状态机：

.box {
  background: if(attr(data-state) == loading, gold,
            if(attr(data-state) == error, tomato,
            steelblue));
}

以前这种逻辑只能写 class + JS 切换，现在纯 CSS 就能跑。

为什么这套方案比 CSS 变量更好

这里有个微妙的问题：既然 @property + CSS 变量也能做类型推导，attr() 的价值在哪？

attr() 的核心优势：HTML 本身就是数据源，不需要额外部署 CSS 变量同步机制。对于服务端渲染、静态生成、多人协作场景，让设计师直接在 HTML 里配置值，比维护一套 CSS 变量命名约定要直观得多。

渐进增强写法

Firefox 155 + Chrome 133 + Safari 15.4 以下的浏览器不支持 type() 语法，但回退值让降级天然安全：

.meter { width: 60%; }
@supports (width: attr(data-pct type())) {
  .meter { width: attr(data-pct type(), 60%); }
}

不支持的浏览器走第一条，支持的浏览器走第二条，两个世界的行为都是合理的。

接下来怎么做

Firefox 155 已经稳定，下一步看看你项目里那些 element.style.setProperty('--xxx', value) 的代码，有多少是可以直接用 attr() 替代的。进度条、主题配置、动态尺寸——这三个场景优先级最高。

下次写组件需要动态样式，先问自己一句：能不能直接写在 HTML 属性里？