Safari憋了2年的濾鏡功能，被1個Demo扒光了底褲

瀏覽器廠商有個默契：新功能上線，文檔寫得像天書，開發者看得直撓頭。Safari團隊最近干了件反常的事——把feComposite元素的支持打包進更新，然后扔給前端工程師Jen Simmons一個任務：做個Demo，得讓人一眼看懂這玩意兒能干啥。

結果她交出的作業，讓圈內人有點意外。三個彩色圓環，邊緣泛著柔和的光暈，鼠標一碰還能互動。沒有一行廢話，沒有技術名詞轟炸，就是把新特性的效果攤在桌面上。

這個Demo的聰明之處在于：它解決了一個真實存在的痛點。

做過SVG濾鏡的開發者都懂，發光效果以前是個體力活。你得手動調模糊、調疊加、調透明度，參數稍微偏一點，光暈要么臟得像油漬，要么淡到看不見。feComposite的作用，相當于給瀏覽器發了一張"快捷指令"——告訴它怎么把多個濾鏡層疊在一起，省掉中間那些試錯環節。

Safari這次更新，本質上是在填坑。Chrome和Firefox早就支持這類操作，蘋果遲到兩年，現在終于把作業補上了。

1個下拉菜單，把原生控件撕碎了重做

Chris Bolson的自定義選擇器，第一眼會讓人懷疑是不是看錯了標簽。它長得完全不像瀏覽器自帶的那個灰框框，倒像是某個設計團隊打磨了三個月的成品。

交互細節很克制：選項展開時有彈性動畫，選中后沒有突兀的閃爍，鍵盤導航的反饋也做了視覺提示。整個流程順下來，你會忘記這是個HTML select的替代品——而這恰恰是最高級的偽裝。

原生控件的尷尬在于，它太"正確"了。無障礙支持完善、系統一致性拉滿，但視覺設計像是被鎖死在2010年。Bolson的解法很直接：保留所有底層能力，把表皮整個換掉。ARIA屬性一個沒落，屏幕閱讀器照樣能讀，只是人類用戶看到的界面終于跟上了時代。

這種"借殼上市"的思路，在大型產品里越來越常見。不是推翻重建，而是在標準接口上包一層體驗更好的殼。

水果射擊選單：當表單控件變成小游戲

Temani Afif走了另一條路。他的選擇器把選項做成了懸掛的水果，用戶要用準星射擊來"炸開"目標。擊中蘋果，選中"蘋果口味"；打中香蕉，對應選項高亮。

聽起來像是為了炫技而炫技？實際體驗后會發現，這個設計有它的場景。面向兒童的配置頁面、活動營銷的報名表單、任何需要降低填寫焦慮的場合——游戲化外殼能消解"又要填表"的抵觸感。

技術實現上，Afif用了CSS動畫配合JavaScript的狀態管理。水果的搖晃是CSS關鍵幀，爆炸粒子用Canvas繪制，選中后的數據回傳還是走標準表單提交。花哨的是面子，里子依舊規矩。

這類Demo的價值在于拓寬邊界：原來select元素可以被解構到這個程度，而不必擔心兼容性崩盤。

數據表格的噩夢，Chrome打算親手終結

Bramus在Chrome Canary里挖到的新功能，直指一個折磨前端多年的問題——大型表格的固定行列。

做過后臺系統的開發者都經歷過：表格橫向滾動時，首列的姓名或ID必須釘在原地；縱向滾動時，表頭不能跟著溜走。實現這個需求，目前的主流方案是position: sticky配合一堆z-index調試，復雜表格還要動態計算偏移量，維護起來像在做數學題。

Chrome正在實驗的API，試圖把這套邏輯收進瀏覽器底層。開發者只需要聲明哪些行列需要固定，渲染和同步的工作交給引擎處理。

Bramus的測試頁面放了一個千行級別的表格，固定三列左欄、固定表頭、交叉區域高亮。滾動時沒有出現以往常見的閃爍或錯位，幀率穩定在60fps。

這個功能還沒進穩定版，但信號很明確：瀏覽器廠商開始正視企業級場景的體驗債務了。

純CSS造電視：按鈕能按，天線能轉，連雪花屏都還原了

Ben Evans的CSS藝術每次出現，都會刷新人們對這項技術的認知邊界。這次的電視機模型，從外殼紋理到旋鈕阻尼感，全部用HTML和CSS搭建。

交互設計藏著巧思：旋轉頻道旋鈕，屏幕內容切換；拉動天線，信號強度指示器隨之擺動；甚至專門做了"無信號"的雪花噪點動畫，用CSS隨機函數模擬。

最細思極恐的是性能。整個Demo跑在單文件里，沒有圖片資源，沒有JavaScript動畫庫，純靠GPU加速的CSS變換。在低端設備上測試，發熱和耗電都遠低于Canvas方案。

Evans在代碼注釋里寫了一句："這不是為了證明CSS比JavaScript更好，只是想看看不用腳本能走多遠。"

滾動變焦：把視差效果做出新花樣

Cyd Stumpel的Demo標題自帶劇透——"瘋狂變焦"。頁面滾動時，中心元素以指數級速度放大，背景層卻以不同速率后退，制造出類似穿越隧道的空間感。

技術拆解很干凈：CSS scroll-driven animations驅動時間線，scale變換配合will-change屬性優化，沒有依賴任何外部庫。Stumpel在博客補充說明，這個效果的靈感來自老式幻燈機的變焦鏡頭，但用Web技術復刻時，發現瀏覽器的合成器層機制反而讓實現更簡單。

她半開玩笑地標注："此創意開放偷師，但建議改個顏色，免得被一眼認出。"

色彩流動的數學： sibling-index()函數首次實戰

Many Nicole的SVG作品，展示了CSS Color Module Level 5的兩個新成員：相對顏色語法和sibling-index()函數。

相對顏色允許基于現有色值進行計算，比如"把主色的亮度提高20%"；sibling-index()則能獲取元素在同輩中的序號，用來生成漸變序列。兩者結合，一行代碼就能讓SVG路徑的色彩自動流動起來，無需為每個節點手寫色值。

這個Demo的代碼量極小，但依賴的瀏覽器特性很新。Nicole在描述里加了兼容性提示：Firefox目前不支持sibling-index()，Safari需要最新技術預覽版。

它更像是一份"未來代碼"的樣本——現在跑不起來沒關系，先存著，等生態跟上。

P5.js的溫柔入門：一條彩帶的參數實驗

Margarita的彩帶動畫，被不少教育者轉發作為P5.js的教學案例。頁面頂部暴露了一排滑塊：控制節點數量、波動幅度、色彩周期、運動速度。

調整參數的過程，本質上是在直觀感受算法變量的作用。把"振幅"拉到最大，彩帶變成狂暴的鞭子；關掉"色彩循環"，畫面退化為灰度絲帶。沒有教程文字，但比多數文檔都有效。

這種"可玩性優先"的設計，降低了創意編程的門檻。用戶先被視覺效果吸引，再主動探索背后的邏輯，學習路徑比傳統教程自然得多。

紅藍對抗：一個CodePen挑戰賽的解題思路

Shivani的"相反方向"參賽作品，把主題具象化為兩隊小人的推搡。青色隊和品紅隊從對角出發，在畫面中央碰撞，個體被彈開后重新組織攻勢，直到一方突破防線抵達對方腹地。

動畫沒有預設勝負，每次刷新都是隨機演算。觀看者會不自覺地站隊，猜測哪邊能贏——這種情感卷入，讓一個簡單的技術Demo有了游戲般的吸引力。

代碼層面，Shivani用了CSS變量控制隊伍屬性，JavaScript處理碰撞檢測和狀態切換。性能優化做得克制：小人數量控制在30個以內，移動用transform而非left/top，確保移動端也能流暢運行。

CSS條件語句：if()函數的實用手冊

Rob的教程頁面，聚焦CSS Values Module Level 5的if()函數。這個特性允許在樣式表里寫內聯條件，比如"如果容器寬度大于400px，則應用A樣式，否則應用B樣式"。

以前這類邏輯必須交給JavaScript或預處理工具，現在原生CSS就能處理簡單分支。Rob設計了漸進式的學習路徑：先看基礎語法，再研究嵌套條件，最后用交互測驗檢驗理解。

測驗環節的設計很"產品經理"——答錯不顯示紅叉，而是彈出解釋框，把錯誤選項對應的常見誤解逐個拆解。

這十個Demo散落在CodePen的各個角落，沒有統一的發布節奏，也不屬于某個官方項目。但把它們放在一起看，能拼出一幅前端技術的即時快照：瀏覽器在補全企業場景的短板，CSS在蠶食原本屬于JavaScript的地盤，而"好玩"這件事，始終是驅動開發者折騰的第一動力。

最后一個問題留給看完的你：如果讓你選，你愿意用"水果射擊"選單填一次報名表，還是繼續面對瀏覽器那個萬年不變的灰框框？