10月下旬推出的Chrome 156正式支援CSS random()函數，加上Safari從26.2(2025年12月)起就已支援，網頁上的「隨機感」第一次可以只靠CSS完成，不必再寫JavaScript。裝飾元素的位置、角度、色相、動畫延遲，都能在每次載入時略有不同；不過MDN目前仍標示它為「有限支援」，還不是Baseline，正式上線一定要準備備援。
KYART光沅創意的工作橫跨品牌網站、大型系統的UIUX設計、前後台整合到雲端部署。不論是對外的品牌首頁，還是同仁每天登入的內部資訊系統，我們都常被問到同一件事：「畫面能不能不要那麼制式？」以前要做到這點，得靠JavaScript亂數，或預先排好幾組版面輪播。這篇整理random()帶來的設計可能，以及我們在不同規模的專案裡怎麼拿捏分寸。
一、CSS random()是什麼？一行就能產生亂數
簡單說，random()會在你指定的最小值與最大值之間，產生一個隨機數值，可以用在長度、角度、時間、百分比、數字等型別上。基本寫法長這樣：
rotate: random(-8deg, 8deg);：每個元素各自歪一點點角度。animation-delay: random(0s, 2s);：讓一排圖示不要同時動起來。width: random(0px, 100px, 10px);：第三個參數是「級距」，只會出現0、10、20……這類整齊的值。
比較有意思的是「共用亂數」的設計。加上element-scoped，同一個元素的寬和高會拿到同一個亂數(變成大小不一的正方形)；用自訂名稱如--card，則能讓多個地方共用同一個值。這讓設計師能決定「哪裡要亂、哪裡要齊」，而不是全部交給運氣。
二、哪些瀏覽器能用？現在可以上正式站嗎？
結論是：可以用，但只能當「加分」，不能當「必要」。依Chrome Platform Status，Chrome 156已正式出貨random()；WebKit官方部落格則說明Safari 26.2就已支援，並在Safari 26.5調整了共用亂數的命名規則。但MDN仍將它列為有限支援，代表還有主流瀏覽器跟不上。
所以我們的做法是先寫好一組固定數值當預設，再用@supports判斷瀏覽器支援時才換成random()。不支援的使用者看到的是一個排得整整齊齊的版本，支援的人則多了一點生命力，兩邊都不會壞。
三、設計上怎麼用，才不會變成「亂」？
我們的原則是：隨機只放在裝飾層，不碰資訊層。實務上適合的情境大概有這幾種：
- 背景幾何與紋理：首頁主視覺旁的點、線、色塊，每次載入位置略有差異，讓品牌有「手作感」。
- 卡片與相片牆的微角度：像拼貼板一樣的作品集或活動照片牆，±3度以內的傾斜就很夠了。
- 動畫節奏：讓進場動畫的延遲錯開，比整排同時跳出來自然得多。
- 節慶或活動頁：雪花、紙花、光點這類粒子效果，現在不必再載入一整包JavaScript套件。
- 系統的登入頁與空狀態：大型內部系統的登入畫面、查無資料時的插圖、載入骨架動畫，加一點點變化，能讓每天使用的人少一分疲乏。
反過來說，導覽列、按鈕位置、文字大小、表單欄位、資料表格這些使用者需要「找得到」的東西，就不應該每次不一樣。尤其在欄位動輒上百個的後台系統裡，穩定與可預期永遠比新鮮感重要。
好的隨機感，是設計師先畫好邊界，再讓瀏覽器在邊界裡自由發揮。
四、無障礙要注意什麼？
先講結論：亂數不能碰對比與動態安全。MDN特別提醒，像hsl(random(0, 360) 50% 50%)這種隨機色相，很容易產生文字與背景對比不足的組合，而WCAG要求一般文字至少4.5:1的對比。我們會把文字色固定，只讓背景裝飾的色相在品牌色附近小範圍浮動。
另外，帶有無限循環的粒子動畫，一定要搭配prefers-reduced-motion，對減少動態效果的使用者直接關掉或改成靜態。這點在政府、醫療類網站的無障礙檢測上尤其重要。
五、KYART光沅創意會怎麼導入？
在大型系統的UIUX專案裡，我們通常會先建立設計系統(Design System)，把色彩、字級、間距整理成設計師與前後端工程師共用的變數。random()適合放進這套規範，多寫一欄「可隨機範圍」：哪些元件可以變化、角度與位移的上下限、色相允許的範圍。工程師照規範實作，設計師預先模擬幾種可能的排列，確認每一種都成立，才算過關。
對已上線的網站或系統，我們不建議為了這個功能大改。比較實際的是在下次改版或活動頁時，挑一兩個裝飾區塊小規模試用，觀察使用者反應再決定要不要擴大。
常見問題
Q：random()每次重新整理都會變嗎？
會。數值在頁面載入時產生，重新整理就會重新抽一次；如果希望固定，可以用fixed參數指定種子值。
Q：會影響SEO或網頁效能嗎？
random()只影響畫面呈現，不改變HTML內容，對搜尋引擎讀取沒有影響；相較於用JavaScript產生同樣效果，通常還更輕量。
Q：舊瀏覽器看到會壞掉嗎？
不支援的瀏覽器會忽略整條宣告，所以務必先寫好固定值當預設，再用@supports覆蓋。
介面設計走了這麼多年「整齊」與「一致」，random()讓我們重新思考：在可控的範圍內留一點點不確定，或許正是讓網站與系統都更有溫度的方式。
參考資料：
Chrome 156 Release Notes(chromestatus.com)
random() CSS function(developer.mozilla.org)
WebKit Features for Safari 26.5(webkit.org)
Understanding SC 1.4.3 Contrast (Minimum)(w3.org)
prefers-reduced-motion(developer.mozilla.org)
