在CSS中使用Random()进行实验

CSS 即将迎来原生的随机函数 random()，目前处于 CSS 值模块 Level 5 的编辑草案阶段。它允许开发者直接在样式表中生成随机数值（例如随机颜色、位置、尺寸），无需借助 JavaScript 或预处理器。该提案由 Google 工程师 Tab Atkins 等人推动，是 CSS 向“动态语言”演进的一部分。此前实现随机效果需通过 JS 计算或使用 SVG/SASS 变通方案，性能和维护成本较高。random() 配合容器查询、自定义属性（CSS 变量）后，可构建原生随机 UI——如随机生成的背景图案、卡片排列、动画延迟等。该功能尚未在主流浏览器中正式发布，但已可通过 Chrome Canary 和 Polyfill 实验。Firefox 和 Safari 的态度尚未明朗，因此它短期内不会进入生产环境。Polypane 的这篇文章用大量 Demo 展示了 random() 在排版、生成艺术、游戏界面等场景中的可能性，是前端社区对此特性的首次系统性实验。阅读本文需了解 CSS 自定义属性、calc() 及容器查询基础。