重點整理
- Chrome 146 支援捲動觸發動畫，讓網頁互動更流暢且效能更好。
- Firefox 與 Safari 支援「容器查詢」，排版不再只靠螢幕寬度。
- Safari 26.4 支援 Masonry 瀑布流排版，適合圖多或商品多的網站。
- Firefox 149 新增 CloseWatcher，讓彈出視窗能配合手機返回鍵關閉。
- Chrome 147 Beta 新增 contrast-color()，自動選出對比最高的文字顏色。
如果你公司有自己的網站，或是正在規劃改版，瀏覽器每個月推出的新功能，其實跟你的網站體驗、排版彈性、甚至手機使用者的操作順暢度都有關係。本文整理 2026 年 3 月 Chrome、Firefox、Safari 穩定版與 Beta 版的重點更新，用白話方式帶你了解哪些變化值得留意。
一、讓網站互動更流暢：捲動觸發動畫
Chrome 146 穩定版新增了「捲動觸發動畫」（scroll-triggered animations），簡單說，就是可以根據使用者在頁面上捲動的位置，來觸發 CSS 動畫效果。過去這類效果多半要靠 JavaScript 來計算，現在可以直接用 CSS 寫，瀏覽器也會把計算工作交給背景執行緒，讓網頁跑起來更順、更省電。
同時，Chrome 也新增了 trigger-scope 屬性，讓動畫觸發的名稱不會跟其他動畫衝突，對網站裡有很多互動效果的企業官網或電商網站來說，維護上會更方便。
二、排版更聰明：容器查詢與瀑布流
Firefox 149 和 Safari 26.4 都支援了「僅用名稱」的容器查詢（name-only container queries）。容器查詢是一種根據「父元素大小」來調整子元素樣式的技術，現在可以只靠容器名稱來套用樣式，不用再指定尺寸條件，寫法更簡單，適合用在複雜的區塊排版，例如首頁的多欄式商品區塊。
另外，Safari 26.4 支援了 display: grid-lanes，可以做出類似 Pinterest 的「瀑布流排版」（masonry layout），也就是高度不一的卡片可以自然錯落排列。如果你的網站有很多商品圖、作品圖或文章封面圖，這個功能會讓版面更好看，也不需要額外安裝外掛。
Safari 26.4 也支援在 <img> 的 sizes 屬性中使用 min()、max()、clamp() 等數學函式，讓回應式圖片（根據螢幕大小自動載入合適尺寸的圖片）的設定更有彈性，有助於提升網站載入速度。
三、手機使用者體驗升級：彈出視窗與返回鍵
Firefox 149 新增了 CloseWatcher 介面，讓網站上的彈出視窗、提示框等元件，可以像手機內建對話框一樣，用 Android 的「返回鍵」或電腦的 Esc 鍵來關閉。這對常用彈出視窗做促銷提醒、電子報訂閱的企業來說，是很實用的使用者體驗改善。
同時，Firefox 149 也支援了 popover 屬性的 hint 值，讓提示型彈出視窗不會自動關閉其他彈出視窗，可以更細緻地控制多個彈出視窗的顯示邏輯。
四、Beta 版搶先 preview：自動對比顏色
Chrome 147 Beta 版新增了 contrast-color() CSS 函式，可以根據傳入的背景色，自動回傳黑色或白色中對比最高的那一個。這代表未來網站上的按鈕、標籤文字顏色，可以自動確保清晰可讀，對品牌色彩多樣的企業官網或電商網站來說，能省下不少手動調整顏色的時間，也有助於無障礙設計。
崴米的建議
- 盤點網站的互動效果：如果你們官網目前有用到很多捲動動畫，可以請工程師評估是否能改用 Chrome 146 的捲動觸發動畫，提升效能與維護性。
- 檢視圖片排版需求：若網站有大量商品圖或作品展示，可以開始規劃使用
grid-lanes瀑布流排版，讓視覺更有層次，也減少對第三方外掛的依賴。 - 關注無障礙與手機體驗：彈出視窗的關閉邏輯、文字對比自動調整，都是提升使用者體驗的重點。下次網站改版時，可以把它們納入需求清單，讓網站對手機使用者更友善。
