css 的 attr() 函数仅在 content 属性中可靠生效，width/color 等属性中均被浏览器静默忽略；替代方案是 js 读取 data-* 并设为 css 变量，再用 var() 引用。
attr() 在 width/color 等属性里直接写就失效
CSS 的 attr() 函数在非 content 属性中基本不生效，不是你写错了，而是浏览器根本没实现。比如写 width: attr(data-width px); 或 color: attr(data-color);，Chrome、Firefox、Safari 都会静默忽略整条声明——DevTools 里看不到计算值，元素也按默认样式渲染。
这不是兼容性问题，是规范落地滞后：CSS Values and Units Level 4 虽已定义 attr() 支持类型转换（如 px、color），但截至 2026 年 8 月，所有主流引擎仍只把 attr() 当作字符串提取器，且仅保证在 content 中可用。
为什么 content 是唯一“安全区”
content 属性从设计上就只接受字符串类值（含 attr()、counter() 等），所以浏览器对它的 attr() 实现最成熟、最稳定。其他属性如 width 需要解析为长度、background-color 需校验颜色语法，而 attr() 返回的纯字符串无法通过这类校验。
- 写
content: attr(data-label);→ 正常显示文本 - 写
width: attr(data-width px);→ 宽度回退为auto或继承值 - 写
font-size: attr(data-fz em);→ 字体大小不变，控制台无报错但样式不应用
想用 data-* 控制样式，该用什么替代
绕过 attr() 类型限制的可靠路径只有一条：JavaScript 读取 data-* 值 → 转成 CSS 自定义属性 → CSS 用 var() 引用。
例如：
document.querySelectorAll('[data-width]').forEach(el => {
const w = el.getAttribute('data-width');
if (w) el.style.setProperty('--width', w + 'px');
});
CSS 中再写：width: var(--width);
这个组合的关键点：
-
getAttribute()比dataset更稳，尤其处理带连字符的属性名（如data-max-height） - JS 负责类型判断和 fallback（比如
isNaN(+w) ? '100px' : w + 'px'） - CSS 变量天然支持单位和继承，
var(--width)可直接参与calc()计算 - 服务端模板直接输出值（如
<div style="width: {{ item.width }}px">）比前端 JS 补位更轻量<h3>别信“新语法已支持”的宣传</h3> <p>部分文章提到 “<code>attr(data-color color, #000)已可在 Safari 技术预览版使用”，实际测试表明：即使开启实验性 WebKit 功能，该语法在background-color中仍返回无效值；且 iOS Safari 17+ 完全不识别单位参数，attr(data-w px)和attr(data-w)表现一致——都是字符串。真正跨浏览器可用的，只有
content: attr(...)这一种写法。任何试图让attr()承担样式计算职责的做法，目前都得靠 JS 中转兜底。
