AI 摘要：本文介绍了 CSS attr() 函数的进阶用法，包括通过类型声明（如 <color>、<length>）将 HTML 属性值动态应用于网格布局、颜色和字体大小等场景，并提供了实际代码示例和设计系统中的应用思路。目前该功能仅在 Chrome 中支持，但未来将逐步普及。

1. 功能概述与背景
• 历史限制：传统 attr() 仅返回字符串，仅适用于 content 属性等简单场景。
• 新特性：现在可通过类型声明（如 type(<length>)）将属性值解析为数字、颜色等，扩展了应用范围。
• 兼容性：目前仅 Chrome 支持，但其他浏览器将跟进（参考 Can I Use）。

2. 核心用法示例
• 基础语法：

attr(data-font-size type(<length>));
attr(data-color type(<color>), black);

• 支持的类型：包括 <color>、<integer>、<length-percentage> 等 11 种 CSS 数据类型。

3. 实际应用场景
• 网格控制：通过 data-columns 设置元素跨越的列数，或 data-column-start 定义起始位置。
• 动态颜色：结合 color-mix() 或 oklch() 调整亮度，确保可读性（如 max(l, 0.9)）。
• 字体大小：使用 round() 限制字号为设计系统的固定增量（如 5px 倍数）。

4. 扩展思路与其他用途
• 设计系统工具：如 data-gap 控制间距，或 data-border 定义边框样式。
• 层叠传递：通过自定义属性（如 --button-color: attr(...)）向子元素传递值。
• 命名空间建议：推荐使用 data-* 前缀避免与未来标准冲突，并兼容 dataset API。

5. 参考资料与社区动态
• 推荐阅读：Una Kravets、Bramus Van Damme 的相关文章。
• MDN 文档 已更新新特性说明。

Frontend Masters

How to Use attr() in CSS for Columns, Colors, and Font-Size

I’ve personally put “advanced attr() usage” on my CSS wishlists for years and years. All the sudden we’re seeing support for it start to drop! Props to the Chrome gang and others for shipping and highlighting this wonderfulness. I’m avoiding being entirely…