重點整理
- Chrome 148 支援影片與音訊原生懶加載，可提升網頁載入速度並節省流量
- CSS 容器查詢全面支援，讓 RWD 網頁設計更靈活、更好維護
- Document Picture-in-Picture API 可在桌面版開啟自訂內容的懸浮視窗
- Web Serial API 跨平台支援，讓網頁可直接與硬體裝置溝通
文章目錄
這些更新跟你的網站有什麼關係？
每個月主流瀏覽器都會推出新版本，帶來新的網頁技術與功能。對中小企業主來說，你不需要會寫程式，但了解這些更新背後的意義，可以幫助你在規劃網站時做出更好的決策——例如讓網站載入更快、手機版更好用、或是提供更特別的使用者體驗。以下整理 2026 年 5 月 Chrome 148、Firefox 151、Safari 26.5 穩定版，以及 Chrome 149、Firefox 152 Beta 版的重點功能。
網站載入更快：影片與音訊支援「懶加載」
過去我們知道圖片可以設定「懶加載」（lazy loading），也就是當使用者滑到該位置時才載入圖片，藉此加快網頁開啟速度。現在 Chrome 148 將這個功能延伸到 <video> 與 <audio> 元素，只要加上 loading="lazy" 屬性，瀏覽器就會延後載入這些媒體資源，直到它們接近使用者的畫面。
這對網站的好處很直接：首頁載入更快、節省使用者流量、降低伺服器負擔。如果你的網站有大量影片或音訊素材，這項更新值得請工程師評估套用。
RWD 更強大：CSS 容器查詢全面支援
RWD（Responsive Web Design，響應式網頁設計）是指網頁能根據不同螢幕大小自動調整排版。過去我們主要靠「媒體查詢」根據整個視窗寬度來調整樣式，但現在「容器查詢」（Container Queries）已全面支援，代表你可以根據「某個區塊」的寬度來調整內部元素的樣式，而不是只看整個視窗。
5 月的更新帶來兩個重要進展：
- 僅用名稱查詢容器：現在只要指定容器名稱就能套用樣式，不需要再額外設定條件，程式碼更簡潔。
- 容器樣式查詢支援自訂屬性：Firefox 151 支援根據 CSS 自訂屬性（例如
--theme: dark）來決定樣式，讓深色模式、主題切換等設計更靈活。
這兩項功能讓元件式的網頁設計更好維護，特別適合有複雜版面配置的電商網站或品牌形象網站。
更豐富的使用者體驗：懸浮視窗與硬體連結
除了效能與排版，5 月也有幾項值得注意的互動功能：
- Document Picture-in-Picture API：Firefox 151 桌面版支援此 API，可以開啟一個永遠置頂的懸浮視窗，裡面能放任何 HTML 內容——例如視訊會議的參與者方格、即時股價看板、或是倒數計時器，即使使用者切換分頁也不會消失。
- Web Serial API 跨平台支援：讓網頁可以直接與序列埠裝置（如微控制器、3D 列印機、開發板等）溝通。Firefox 151 桌面版與 Chrome 148 Android 版都已支援，對需要將網頁與硬體整合的企業來說是一大進展。
Beta 版預告：下一版瀏覽器值得期待的功能
Beta 版是下一個正式版的預覽，適合提前測試是否影響你的網站。本月重點包括：
- Chrome 149 Beta：新增 CSS gap decorations，可以為 flex 與 grid 排版的間距加上裝飾樣式；滾動方法（如
scrollTo()）現在會回傳 Promise，方便判斷平滑滾動是否完成；有 WebSocket 連線的頁面也能使用 BFCache（快取機制），提升返回上一頁的速度。 - Firefox 152 Beta：完整支援
field-sizing屬性，讓表單欄位能根據內容自動調整大小，減少手動設定。
崴米的建議
- 檢視網站的媒體載入策略：如果你的網站有大量影片或音訊，請工程師評估加入
loading="lazy"，這是最快提升網站速度的方法之一，也有助於 SEO 表現。 - 規劃網站時考慮元件式設計：CSS 容器查詢的成熟代表「元件化」的網頁設計更可行。如果你的網站需要頻繁更新或在不同頁面重複使用相同區塊，可以跟設計師討論採用這種架構，未來維護會更輕鬆。
- 留意新 API 帶來的可能性：如果你的產業需要網頁與硬體整合（如 IoT 設備控制、門市裝置串接），Web Serial API 的跨平台支援值得納入未來的數位規劃。崴米在網頁開發與數位整合方面有豐富經驗，歡迎與我們討論如何將這些新技術應用在你的商業場景中。
#瀏覽器更新#網站速度#RWD#CSS容器查詢
