不能，attr()在css中仍仅返回字符串，用在width、color等需计算值的属性时会失效；当前唯一可靠方案是js读取data-*值并设为css变量，再用var()引用。
attr() 新语法在 CSS 中能直接当长度或颜色用吗？不能，目前完全不支持
CSS attr() 函数在 Level 3 规范中仍被定义为「仅返回字符串」，即使你写 attr(data-size px) 或 attr(data-color)，浏览器也不会自动解析为 length 或 color 类型。所有现代浏览器（Chrome、Firefox、Safari）都只把它当作纯文本处理，用在 content 属性里可以显示，但用在 width、background-color、font-size 等需要计算值的地方会直接失效（降级为初始值或忽略）。
常见错误现象：
- 写
width: attr(data-width px);→ 元素宽度变成auto或0 - 写
color: attr(data-color);→ 文字颜色不变，控制台无报错但样式不生效 - 写
font-size: attr(data-fz em);→ 字体大小回退到继承值或浏览器默认值
data-* 属性的值怎么才能真正参与样式计算？靠 CSS 自定义属性 + JavaScript 中转
这是当前唯一可靠、跨浏览器的方案：用 JS 把 data- 值读出来，赋给 --custom-prop，再在 CSS 中用 var(--custom-prop) 引用。它绕过了 attr() 的类型限制，把“数据解析”交给 JS（可做类型转换、校验、fallback），把“样式应用”留给 CSS 变量（原生支持单位和类型）。
实操建议：
- HTML 中保留语义化
data-属性，例如：<div data-width="120" data-bg="#3b82f6"></div> - JS 中批量同步：遍历元素，读
dataset.width，转成数字/颜色后设为style.setProperty('--width-px', width + 'px') - CSS 中使用：写
width: var(--width-px); background-color: var(--bg-color); - 注意兼容性：CSS 变量 IE 不支持，如需兼容 IE，必须用 JS 直接写
style.width等内联样式
为什么不能等 attr() 新标准落地？因为 Level 4 还没实现，且优先级很低
CSS Values and Units Level 4 确实扩展了 attr() 语法，允许声明类型（如 attr(data-size length, 1rem)）和 fallback，但它仍是草案状态（W3C Editor’s Draft），没有任何浏览器实现该能力。Chromium 和 Gecko 的 issue 跟踪中，该特性长期标记为 “low priority” 或 “blocked on use cases”。
这意味着：
- 你无法在生产环境依赖这个语法，哪怕加了前缀或实验标志
- 工具链（PostCSS、Tailwind JIT）也不识别这种新
attr()写法，会直接剔除或报错 - 所谓“新语法示例”在网上多是误传或基于旧草案的过时文档
有没有更轻量的纯 CSS 替代方案？有，但局限明显
如果只是想减少 JS，可用属性选择器 + 预设类组合，比如：
div[data-size="sm"] { font-size: 0.875rem; }
div[data-size="lg"] { font-size: 1.25rem; }
div[data-theme="dark"] { --text: #e2e8f0; }
这种方式可行，但本质是枚举而非动态计算——你得提前知道所有可能的 data- 值，并为每个写一条规则。一旦 data- 值来自用户输入或 API（比如 data-opacity="0.73"），就彻底不可行。
所以真要动态、可计算、可单位转换，还是得走「JS 读 data → 设 CSS 变量 → CSS 用 var」这一条路。别被“attr() 新语法”的标题误导，现在它连基础长度解析都不支持，更别说颜色、角度、时间这些。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
