cosine - 前端人の日常频道

#优质博文 #前端 #CSS #新特性
How to Use attr() in CSS for Columns, Colors, and Font-Size

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 文档 已更新新特性说明。

author Chris Coyier

www.tgoop.com/cosine_front_end/2782

370 viewsAug 16 at 15:41

#优质博文 #前端 #CSS #新特性
How to Use attr() in CSS for Columns, Colors, and Font-Size

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 文档 已更新新特性说明。

BY cosine - 前端人の日常频道