拥抱 CSS `random()` 函数带来的趣味性不完美
内容提要
CSS 新增原生 random() 函数，无需 JavaScript 即可生成随机值，支持范围、步长和缓存键，已在 Safari 和 Chrome 156 中落地。作者用它实现字母微倾斜、弹跳动画、卡片随机倾斜与阴影、滚动展开卡组、随机滚动速度及景深模糊等效果。随机性适合装饰性元素，但应避免用于核心布局、正文和交互目标，并尊重减少动态偏好。
延伸解读
随机性不是设计系统的敌人
文章指出，设计系统长期追求一致性，但物理世界中的印刷、照片、灯光都带有微小不完美，这种不完美让界面显得有机、有人情味。CSS random() 的价值在于把随机性限制在装饰层面，比如字母微倾斜、卡片轻微旋转，而不是破坏布局几何。作者强调，随机性应作为设计系统之上的“可控混乱”，而非替代网格和间距规则。
缓存键让随机值可复用
random() 默认每次求值都产生独立随机数，但通过可选的缓存键参数，可以让多个属性共享同一个随机值。例如同时设置宽高时，使用相同的缓存键能保证元素保持正方形，避免变成随机矩形。这一机制在需要关联随机尺寸或角度的场景中很实用，也提醒开发者：随机不等于失控，关键在于是有意识地共享还是独立。
渐进增强与可访问性底线
由于 random() 仍在浏览器 rollout 阶段，文章建议用 @supports 包裹实验性样式，为不支持的环境提供静态回退。同时，拆分字母做动画时必须用 aria-hidden 隐藏视觉片段，并提供完整单词的 aria-label，否则屏幕阅读器会逐字母朗读。此外，任何随机动画都应尊重 prefers-reduced-motion，必要时不仅关闭动画，还要压平随机角度。
随机性的适用边界
文章明确列出随机性适合装饰性 UI、环境循环去同步、生成式背景和编辑式艺术指导，但应避免用于核心布局、正文排版和交互目标。随机化列宽、表单字段或按钮位置会破坏可预测性，增加阅读疲劳和操作难度。作者建议用数学结构（如 sibling-index()）搭建骨架，再用 random() 添加轻微抖动，让随机服务于人情味而非混乱。
Q&A
CSS random() 函数的基本语法是什么？
语法为 random( <random-caching-key>?, <min>, <max> [, by <step>]? )，实际使用时可写为逗号分隔的参数，如 random(-3deg, 3deg) 或 random(20px, 80px, 10px)。
CSS random() 的缓存键（caching key）有什么作用？
缓存键用于让多个属性共享同一个随机值。例如，为 inline-size 和 block-size 指定相同的缓存键，可以确保元素保持正方形，而不是随机矩形。
目前哪些浏览器支持 CSS random() 函数？
Safari 已率先支持，Chrome 156 正在推出，Firefox 也有积极信号但尚未支持。建议使用 @supports 进行渐进增强。
在哪些场景下适合使用 CSS random()？
适合装饰性元素，如微妙的倾斜卡片、错落的字母、生成式背景、去同步的环境动画，以及结合数学布局（如 sibling-index()）增加人性化抖动。
使用 CSS random() 时有哪些需要避免的情况？
避免用于核心布局和网格（如列间距、表单宽度）、正文排版（字体大小、行高）以及交互目标（按钮、链接），以免影响可读性和可用性。
如何让 CSS random() 效果尊重用户的减少动态偏好？
使用 @media (prefers-reduced-motion: reduce) 媒体查询，禁用动画并重置旋转、位移等随机变换，例如将 rotate 设为 0deg、translate 设为 0。
