重點整理
- Baseline 是瀏覽器功能互通標準，分為 Newly available 與 Widely available 兩階段。
- WebTransport 與 Readable byte streams 讓網站處理大量資料與即時串流更高效。
- CSS subgrid 與 contain-intrinsic-size 改善版面配置，減少畫面跳動。
- Reporting API 可集中收集瀏覽器錯誤與資安違規通知，方便監控網站狀況。
- 選擇 Baseline 目標時，可對齊專案上線日，兼顧新功能與相容性。
文章目錄
這件事跟你有什麼關係？
如果你是中小企業主或行銷人員，平常不一定會追蹤網頁技術的最新發展。但每一次瀏覽器支援新功能，都代表你的網站可以跑得更快、版面更穩定、使用者體驗更好。2026 年 3 月，Web 平台有一批新功能正式通過 Baseline 標準，意味著它們已經可以在主流瀏覽器上穩定使用。以下我們用白話文，幫你整理這次更新中最值得關注的重點。
什麼是 Baseline？先搞懂兩個階段
Baseline 是由各大瀏覽器廠商共同維護的「功能互通標準」。簡單來說，它告訴你哪些網頁技術已經在所有主流瀏覽器上都能正常運作。Baseline 分為兩個階段：
- Newly available（新可用）：剛剛在所有核心瀏覽器引擎上互通，代表這個功能已經可以開始使用，但還需要留意少數舊版瀏覽器。
- Widely available（廣泛可用）：已經互通超過 30 個月，代表在大多數生產環境中都可以放心使用，不需要額外的相容性處理。
了解這兩個階段，可以幫助你在規劃網站時，決定哪些新技術可以大膽採用、哪些需要再觀望。
3 月 Newly available：值得留意的新功能
這個月有幾項新功能正式進入 Newly available 階段，以下挑選與網站體驗、效能和監控最相關的幾個來介紹：
WebTransport：低延遲的即時通訊
WebTransport 是建立在 HTTP/3 上的新 API，提供低延遲、雙向的客戶端與伺服器通訊。它同時支援可靠資料傳輸與不可靠的 datagram，特別適合用在即時互動應用，例如線上遊戲或直播串流。對企業來說，如果你的網站有即時通訊、直播或互動式體驗需求，這項技術能讓反應更即時、更流暢。
Readable byte streams：高效處理大量資料
Streams API 現在完整支援 readable byte streams，專門用來處理二進位資料。它允許開發者將資料直接讀入自訂的緩衝區，有效管理記憶體。對於需要處理大檔案或大量網路資料的應用，這項功能可以顯著提升效能。
Reporting API：集中監控瀏覽器錯誤
Reporting API 提供一個通用的回報機制，讓網站可以接收瀏覽器層級的錯誤與違規通知，例如內容安全政策（CSP）違規、功能棄用通知或崩潰報告。這些報告會集中發送到指定的端點，方便開發團隊監控與排除問題。對重視資安與網站穩定度的企業來說，這是一個很實用的工具。
Math font family 與文字縮排控制
font-family 新增了 math 值，專門用來渲染數學內容，確保 MathML 元素使用最佳化的字型顯示。另外，text-indent 新增了 each-line 與 hanging 兩個關鍵字，讓開發者可以更精細地控制文字縮排，適合用在技術文件或特定編輯排版需求。
Iterator.concat()：簡化資料處理
這是一個新的靜態方法，讓開發者可以把多個可迭代物件（如陣列、Set 等）結合成單一的迭代器，簡化需要連續處理資料序列的程式碼，不需要手動巢狀迴圈或建立中間陣列。
3 月 Widely available：可以放心採用的成熟功能
以下這些功能已經在瀏覽器中互通超過 30 個月，現在正式進入 Widely available 階段，代表在大多數環境中都可以安全使用：
CSS subgrid：更強大的版面配置
CSS subgrid 是 CSS Grid 的擴充功能，允許巢狀網格繼承父層網格的欄列定義。這讓跨層級的 DOM 元素對齊變得容易許多，解決了長期以來的版面配置難題。對於需要複雜排版的網站，這項功能可以大幅簡化 CSS 寫法。
contain-intrinsic-size：減少版面跳動
這個 CSS 屬性允許開發者為受大小 containment 限制的元素指定預留尺寸。當內容延遲載入或隱藏時，可以防止版面跳動（layout shift），對網站的視覺穩定度與 Core Web Vitals 評分都有幫助。
image-set()：自動選擇最適合的圖片
image-set() 函數讓 CSS 可以根據使用者裝置的能力（如螢幕解析度）提供最適合的圖片，功能類似 img 標籤的 srcset 屬性。這能確保高畫質視覺效果，同時不浪費頻寬。
hyphens 與 hyphenate-character：更細緻的文字排版
hyphens 屬性控制文字換行時的斷字行為，可設定為 none、manual 或 auto。hyphenate-character 則讓你可以自訂斷字時使用的字元。這兩項功能對於多語言網站或特定設計需求很有幫助。
Device orientation events 與 update media query
Device orientation events 提供裝置硬體資料（如陀螺儀、加速計），讓開發者可以建立回應裝置物理移動的沉浸式體驗。update media query 則可以偵測輸出裝置更新畫面的頻率，幫助區分快速刷新螢幕（如手機）與慢速刷新或靜態顯示器（如電子紙閱讀器），以便調整樣式。
其他實用功能
- @counter-style：自訂清單的編號或項目符號樣式，不再侷限於標準的數字或圓點。
- <link rel="modulepreload">：讓瀏覽器在頁面載入早期就預先抓取與處理 JavaScript 模組，提升模組化應用的效能。
- Overflow media queries：查詢裝置如何處理溢出初始視窗的內容，適合用來針對不同顯示裝置（如列印媒體與連續捲動螢幕）調整樣式。
- navigator.storage：Storage API 提供管理與查詢網站儲存空間持久性與配額的方式，讓開發者可以檢查可用空間並要求瀏覽器保留資料。
如何選擇你的 Baseline 目標？
Chrome 的 Rachel Andrew 在 Web Day Out 的活動中分享了一個重要觀念：選擇 Baseline 目標時，不要只把它看作「哪些瀏覽器支援」，而是把它當作「時間點」來思考。如果你選擇較晚的 Baseline 目標，可以使用更多新功能，但代價是相容性範圍會縮小。
一個實用的建議是：將你的 Baseline 目標對齊專案的上線日。這樣一來，你在上線第一天就能安全使用所有已經互通的功能，不會錯過任何可以大膽採用的新技術，同時維持高標準的相容性。
崴米的建議
- 定期檢視網站的瀏覽器相容策略：了解你的使用者主要使用哪些瀏覽器與裝置，根據他們的習慣來決定可以採用哪些 Baseline 新功能，避免過度追求新技術而影響部分使用者的體驗。
- 善用 Widely available 的成熟功能優化網站：例如 CSS subgrid 可以簡化複雜版面、contain-intrinsic-size 可以減少版面跳動、image-set() 可以優化圖片載入。這些功能已經穩定，可以安全地應用在你的網站上，提升效能與使用者體驗。
- 重視網站監控與錯誤回報：利用 Reporting API 等工具，建立完善的錯誤監控機制。及時的錯誤回報可以幫助你快速發現並解決問題，維持網站的穩定度與資安。
