Safari 预览版支持 CSS random()

本文介绍的 CSS random() 函数采用 random(min, max, step) 语法，可在 CSS 属性中直接生成随机数值，支持长度、百分比、角度等单位。文章通过星空、网格矩形、照片堆叠和转盘等示例展示其在布局、动画和颜色中的应用，并说明命名标识与 element-shared 两种随机值共享方式。目前该函数已在 WebKit 中实现，但规范仍在讨论中。

文章聚焦 CSS 语言新增的 random() 功能，解释其如何在样式表内完成随机布局、颜色和动画，而无需 JavaScript。文中对比了不同随机共享模式，并给出大量实际代码示例，展示 CSS 在动态内容生成方面的扩展能力。

本文指出 CSS 自定义属性与 random() 结合时，因文本替换特性需使用命名标识（如 --random-star-size）才能复用同一随机值。示例中通过 --star-size 实现星体大小与阴影模糊的联动，解释了为何直接 var() 无法保留随机结果的问题。

在星空示例中，文章使用 OKLCH 色彩空间配合 random() 为星星生成随机色相的柔和光晕。代码中通过 drop-shadow 层叠白光与彩色光，并结合 hard-light 混合模式，展示了 random() 在色彩设计中的实际应用效果。

本文中CSS Grid用于随机放置矩形示例。通过将页面划分为100行100列的网格，结合random()为grid-area生成随机行列值，实现矩形在网格中的随机定位与色彩变化，展示random()与布局工具的结合。

本文在幸运轮示例中使用CSS Keyframe Animations结合random()。@keyframes中通过random(2turn, 10turn, 20deg)生成最终旋转角度，实现转盘落地位置的不可预测性，展示CSS内随机性与交互动画的完整集成。

本文中shape()用于四角星的clip-path定义。通过指定形状坐标创建星芒轮廓，配合random()控制大小和element-shared旋转角度，使四角星与圆形星星形成对比，增强星空视觉层次。

根据本文，目前可在 Safari Technology Preview 中直接测试 CSS random() 函数。作者鼓励开发者尝试星空和转盘等示例，并通过 Bluesky 或 Mastodon 提交关于共享机制、命名及用例的反馈，以影响最终规范走向。