# CSS 終於會擲骰子了：random() 登場，讓整齊到無聊的網頁多一點「手作感」 > **原生 CSS random() 函式已在 Safari 落地，Chrome 156 正在推出，Firefox 也釋出正面訊號。不用 JavaScript、不用 Sass 迴圈產生幾百行 CSS，就能讓字母微微歪斜、卡片隨手散落、動畫各跳各的節奏。Smashing Magazine 用六個示範告訴你哪裡該亂、哪裡絕對不能亂，給品牌網站與設計團隊的實戰筆記。** 做網站的人，大概都有一種職業病：看到卡片歪了 2 像素，就渾身不對勁。我們花了十年建立設計系統、間距規範、色彩 token，把一切對齊到網格上。如果某張卡片重新整理後往左跳了 20 像素，那不叫創意，那叫 bug，專案經理會很開心地開一張單給你。 所以當 CSS 說「我現在可以隨機了」，第一個反應很可能是：這不是在找麻煩嗎？ Smashing Magazine 在 10 月 20 日刊出比利時前端工程師 Brecht De Ruyte 的文章，他的第一反應跟你一樣，然後他做了一件很工程師的事：開 CodePen，做了一堆示範，親自找出隨機到底適合用在哪裡。 結論很有意思：隨機不是要你把設計系統丟掉，而是在對的地方加一點「不完美」，讓網頁重新有人味。 ## random() 是什麼？ random() 來自 CSS Values and Units Module Level 5 規格，它能直接在 CSS 裡產生偽隨機數值，不需要 JavaScript，也不需要在建置時用 Sass 迴圈產生大量靜態樣式。 目前支援狀況，依文章整理： - **Safari**：最早推出支援。 - **Chrome／Edge**：Chrome 156 正在推出中。 - **Firefox**：在標準流程上有正面訊號，希望不會落後太久。 基本寫法非常直覺，就是逗號分隔的最小值、最大值，以及可選的步進： css /\* -3 到 3 度之間的隨機角度 \*/ rotate: random(-3deg, 3deg); /\* 20px 到 80px，每次跳 10px \*/ inline-size: random(20px, 80px, 10px); ## 三個語法重點，少踩一半的坑 **一、單位要一致。** 最小值和最大值必須是同一種單位類型，random(2rem, 100px) 是無效的。真的需要混用，就在參數裡用 calc() 處理。 **二、步進能讓隨機「對齊網格」。** 加上第三個參數，數值會被四捨五入到固定間隔。例如 top: random(0px, 60px, 15px) 只會產生 0、15、30、45、60 這幾個值。對設計系統來說，這是很好的折衷：看起來有變化，但仍落在規範的刻度上。 **三、快取鍵讓多個屬性共用同一個隨機值。** 預設情況下，每個 random() 都是獨立計算的。如果你想讓縮圖寬高一樣、保持正方形，就要讓兩個屬性共用同一個鍵： css .card-thumbnail { inline-size: random(--square-size element-scoped, 60px, 120px); block-size: random(--square-size element-scoped, 60px, 120px); } 這裡有個細節：依最新規格，單獨寫 --square-size 會讓整份文件所有元素共用同一個種子，結果每張卡片一模一樣。加上 element-scoped，才會變成「同一個元素內同步、不同元素各自隨機」。 ## 六個示範，看懂「好的亂」長什麼樣 文章用六個 CodePen 示範，展示隨機能怎麼用： 1. **字母微歪斜**：每個字母隨機傾斜幾度、位移一兩像素、透明度略有差異，像老式活版印刷的油墨感。滑鼠移上去，所有字母立刻「站好」。 2. **字母彈跳**：每個字母有各自的跳躍高度、時長和落地壓扁比例，整個字像一群小角色在彈跳床上跳。作者用了**負的動畫延遲**，讓頁面一載入時每個字母就已經各自在跳，不會先集體發呆。 3. **卡片隨機傾斜**：作品集或旅遊照片牆可以讓卡片略微歪斜，陰影還會跟著傾斜角度變化；滑鼠移上去或鍵盤聚焦時就擺正。 4. **扇形展開的卡片堆**：用 sibling-index() 計算整齊的扇形結構，再用 random() 加一點「手發牌」的抖動，並綁定捲動時間軸。作者稱之為：數學負責結構，隨機負責人味。 5. **隨機捲動速度**：時尚或粗獷風網站常見的橫向跑馬燈，每行用 random(15%, 44%) 決定移動距離，捲動時各行速度不同，不必再寫一堆 .drift-slow、.drift-fast。 6. **景深模糊**：隨機的模糊、透明度與縮放，模擬大光圈鏡頭的散景；滑鼠移上去就「對焦」。適合主視覺或標籤雲。 另外規格中還有 random-item()，可以從一組設計 token 裡隨機挑選，例如從品牌色票中挑背景色。不過文章指出它目前**還沒有任何瀏覽器支援**，先放在願望清單就好。 ## 哪裡可以亂？哪裡千萬別亂？ 這是整篇文章對品牌和設計團隊最有價值的部分。 **適合的地方：** - 裝飾性元素的微小不完美：拍立得照片、便利貼、主視覺標題。 - 讓背景循環動畫「不同步」：狀態燈、漂浮徽章、粒子背景，完全同步反而顯得機械。 - 生成式背景：星空、彩帶、散景圓點、紋理顆粒。 - 編輯型視覺：雜誌風版面、活動傳單、活潑的活動頁。 - 疊在數學結構上的細微偏移。 **應該避免的地方：** - **核心版面與網格**：欄距、表單寬度、容器內距不要隨機，使用者需要可預測的結構。 - **內文**：長篇段落的字級、行高、字距不要動，閱讀疲勞是真的。 - **互動目標**：按鈕和連結如果歪斜或位移，至少要在 hover 與 focus 時恢復。讓使用者追著按鈕跑，就是失敗的設計。 ## 別忘了無障礙與漸進增強 三個實務提醒，直接寫進你的規範： **用 @supports 包起來。** 先給所有瀏覽器一個穩定的預設，再對支援的瀏覽器加上隨機效果。不支援的瀏覽器看到的只是一個正常、整齊的版本。 css .badge { rotate: 0deg; } @supports (rotate: random(-2deg, 2deg)) { .badge { rotate: random(-2.5deg, 2.5deg); } } **尊重 prefers-reduced-motion。** 使用者設定減少動態時，關掉動畫；作者還建議連傾斜角度一起拉平，因為大量歪斜的元素在捲動時也可能讓人不舒服。 **別讓螢幕閱讀器逐字母唸。** 把一個字拆成一堆 `` 來做字母效果時，螢幕閱讀器可能會一個字母一個字母地唸。做法是在外層用 aria-label 提供完整文字，並對視覺用的 span 加上 aria-hidden="true"。 ## 對品牌網站與客戶的實務建議 - **先挑一個小地方試**：例如活動頁的主標題、作品集的照片牆。不要一開始就想在整站套用。 - **把隨機寫進設計系統的「允許範圍」**：例如「裝飾元素可在 ±3 度內隨機傾斜，間距固定」，讓設計師和工程師有共同語言。 - **步進是你的好朋友**：用 step 把隨機限制在規範刻度上，品牌一致性和活潑感可以兼得。 - **測試截圖要有心理準備**：每次重新整理畫面都可能不同，視覺回歸測試和設計驗收流程要事先討論。這一點是我們的延伸提醒，原文未特別討論。 - **效能上的好處**：原本需要 JavaScript 動畫函式庫或大量預先產生的 CSS，現在交給瀏覽器引擎，作者特別點出「零 JavaScript 負擔」。 ## 情境演練：一家甜點店的官網（假設案例） 假設一家手作甜點店想改版官網，品牌形象是「溫暖、手工、不完美的可愛」。設計師可以這樣用 random()：首頁標題「今日出爐」每個字母微微歪斜，像手寫招牌；商品照片以拍立得風格散落排列，滑鼠移上去就擺正並放大；背景加上一點隨機漂浮的糖粉點點。 但結帳流程、商品規格表、營業時間這些資訊，全部維持整齊、清楚、可預測。這就是 random() 最好的打開方式：讓品牌有個性，但不讓使用者迷路。 ## 你可能會問 **Q：現在就能在正式網站用嗎？** A：可以，但要用 @supports 做漸進增強。Safari 已支援、Chrome 156 正在推出，Firefox 還在路上；不支援的瀏覽器看到的就是你的預設樣式。 **Q：每次重新整理都會變嗎？** A：random() 產生的是偽隨機值，文章的示範也請讀者多重新整理幾次觀察變化。若需要多個屬性保持一致，就用快取鍵。 **Q：會不會影響 SEO？** A：random() 只影響視覺呈現，不改變 HTML 內容。真正要注意的是無障礙：拆字母時記得 aria-label 和 aria-hidden。 **Q：random-item() 呢？** A：規格中有，但目前沒有瀏覽器支援，先別用在正式專案。 ## 結語：先學會整齊，才有資格玩亂 Brecht De Ruyte 在文章最後說，我們花了十年掌握一致性、token 和設計系統，既然基礎已經打好，也許是時候讓一點俏皮的凌亂回到網頁上。 這句話很適合送給所有品牌網站：整齊是基本功，不完美是調味料。用對地方，random() 能讓網站從「看起來很專業」升級成「看起來很有個性」。而那個差別，往往就是使用者記不記得你的關鍵。 --- **來源**：[Embracing Playful Imperfection With The CSS random() Function](https://www.smashingmagazine.com/2026/10/embracing-playful-imperfection-css-random-function/)（Brecht De Ruyte，Smashing Magazine，2026/10/20）。
