行銷頁與文件站常為一個小浮層引入整包 JavaScript。Popover API 透過 HTML popover 與宣告式 popovertarget，讓靜態頁面把疊層提升到瀏覽器頂層，在支援的引擎裡獲得輕觸關閉與更合理的焦點行為。本文面向交付 MPA 或靜態產生頁面的團隊：給出 2026 年可用的相容性矩陣、Safari/WebKit 注意事項，以及必須在真實 macOS 上完成的驗收路徑。排程簽核時，可結合 靜態元件的容器查詢 與 Safari Technology Preview 對比穩定版 的閱讀清單。
與手寫 position: fixed 加無限 z-index 不同，頂層由瀏覽器管理堆疊順序；漸進增強仍是底線——不支援的瀏覽器應仍能讀完正文，popover 只是增強層。
宣告式基礎
最小可用形態：浮層根寫 popover="auto"（輕觸外部可關）或 manual（需明確關閉）；觸發按鈕寫 popovertarget 指向對應 id。引擎把節點提升到常規堆疊上下文之上，告別 z-index: 99999 軍備競賽。
<button popovertarget="tip" popovertargetaction="toggle">說明</button>
<div id="tip" popover="auto">簡短術語解釋…</div>特性以 HTML 為先，Eleventy、Hugo、手寫範本都能伺服器端輸出同樣標記。無支援時可用 [popover]:not(:popover-open) { display: none; } 或極小腳本切換 hidden。團隊規範可規定：同時開啟的 popover 不超過三個；每個觸發器須有可見文字標籤。
瀏覽器矩陣
評審時使用下表；預覽通路僅用於實驗，合約簽字以法務認可的穩定版為準。
| 引擎 | Popover + popovertarget | 說明 |
|---|---|---|
| Chromium 114+ | 穩定 | 開發者工具對頂層疊放支援佳。 |
| Safari 17+ | 支援 | 小版本需迴歸；修正常先出現在 STP。 |
| Firefox | 目前主線穩定 | 多 popover 頁面驗證焦點歸還。 |
| 舊 WebKit | 無 | 若必須支援 iOS 15 及更早，提供無 JS 降級。 |
企業內網仍有約 8%～11% 訪客使用無 popover 的鎖版本瀏覽器——每季迴歸一次降級路徑。把最低瀏覽器版本寫進 README，與 Node、套件管理器並列，可避免衝刺週誤刪宣告式標記。
設計評審時建議附帶錄影與對比截圖：同一互動在 Chromium 與 Safari 各錄一段 15 秒片段，標註開啟、輕觸關閉與鍵盤關閉三種路徑，方便產品、法務與前端共用一份證據鏈。
靜態站常見模式
文件飛層：術語點開緊湊 popover，無 JS 使用者仍可透過錨點連結讀全文。命令面板：popover=manual 搭配過濾腳本，開閉仍走原生管線。購物車預覽：用 auto，點外側即可收起。
避免五層巢狀：每次提升都消耗合成器記憶體。Apple Silicon 上同時開啟約三個表面通常仍順暢；行動 Safari 在 backdrop-filter 疊加時更早掉幀，用 Web Inspector 時間軸實測。
與 容器查詢版面 協同時，別讓寬度查詢與 popover 固有尺寸互相打架；根節點優先 max-inline-size。RTL 場景下箭頭與關閉按鈕要在 Safari 阿拉伯語介面鏡像驗收。
焦點、Esc 與減少動效
- 浮層內有可互動控制項時，開啟後應將焦點移入；否則保留在觸發器上。
- 確保 Esc 能關閉
autopopover，且焦點歸還路徑可預測。 - 遵守
prefers-reduced-motion: reduce：縮短或移除縮放動畫——Safari 使用者開啟此選項的比例高於直覺。 - 若用 JS 鏡像狀態，為觸發器補充
aria-expanded；純宣告式按鈕也應有可見按下態。
用 macOS VoiceOver 做冒煙測試，每個範本控制在20 分鐘內；缺陷附錄影給設計。
雲端 Mac 上的 Safari 工作流
Linux 筆電難以認證頂層混合的細微差異。每週預留30 分鐘實機：穩定版 Safari 負責生產簽字，需要前沿修復時對照 Safari Technology Preview。開閉過渡時截取 Web Inspector 層邊框圖。
採購受阻時，可租用雲端的 Apple Silicon Mac mini：SSH 部署、VNC 看 Safari，實驗前快照。短租約16.9 美元/天量級，常比跨國寄筆電做一週 HTML/CSS 攻堅更省。
同文件協同與其它細節
Popover 可與新一代 anchor 定位實驗共存，但在基線範本裡不要依賴 anchor，除非矩陣已覆蓋全部販售區域。靜態設定可用特性開關，讓 Jekyll/Astro 按區域輸出不同標記。
列印樣式應隱藏 popover：合規 PDF 不需要浮層。裝飾規則包在 @media screen 內，並在 Safari 列印預覽確認。
安全審查會關心點擊劫持：頂層仍服從 CSP 的 frame-ancestors；對客戶資料浮層避免無 sandbox 的第三方 iframe。
效能上，開啟 popover 會觸發提升子樹的樣式與版面。3000+ 節點頁面裡，重型圖表可延後到首次開啟後用 requestIdleCallback 或懶 import()，讓首切保持在節流 M 系列 CPU 上 50 ms 內。單浮層傳輸控制在 40 KB 內通常不拖累 Web Vitals。
分析埋點優先監聽 popover 的 toggle 事件，而非僅點擊——否則重複統計鍵盤使用者。高流量可 10% 取樣，確認轉化後再放大動畫投入。
教內容同事分清 auto 與 manual：CMS 裡寫錯屬性在 MacHTML 租戶調研中約占內部 QA 失敗的 30%。預發環境鏡像生產 CSP，避免週五才發現被策略攔截。
浮層內嵌影片需 playsinline，關閉時暫停——WebKit 偶發比 Chromium 更久保留音訊背景。專用 mini 比易休眠的筆電更易穩定重現。
發版說明記錄 Safari 建置號（17.x 及以上），便於對照客訴。合成監控建議每 5 分鐘點一次觸發器而非每秒，避免共用雲 CPU 誤報；告警看錯誤率而非單幀時間。
常見問題
能否做入場動畫？
可在支援處用 @starting-style 或關鍵影格；關閉動效時必須有無動畫兜底。
浮層裡提交表單？
與普通子樹相同；除非刻意漸進提交，否則不要把提交按鈕放在浮層外。伺服端仍需驗證。
能取代 hover 提示嗎？
不完全是——hover 偏指標，popover 偏點擊/點按；與鍵盤使用者混用時需謹慎。
Mac mini 仍是 WebKit 的安靜參考機：色彩準、輸入法原生、Safari 全天開啟仍低發熱。MacHTML 提供帶 SSH/VNC 的 Apple Silicon 裸金屬租賃，讓靜態站團隊不必再為一輪 Popover 攻堅買新硬體——按需開通、留證、通過即撤。