題幹與適用場景
你要為產品卡片製作橫向輪播，希望瀏覽器原生產生前後捲動按鈕與位置標記。請說明 CSS Overflow Module Level 5 的能力、不支援瀏覽器的 fallback、無障礙與驗收指標。
CSS Overflow 5 定義由捲動容器產生的 ::scroll-button() 與 ::scroll-marker 控件，以及 scroll-marker-group 分組方式。它仍處於瀏覽器逐步實作階段，面試重點是能力邊界與漸進增強，不是把實驗特性當成全瀏覽器基線。
面試官考察點
面試官會看你能否區分捲動容器、捲動按鈕與標記組；能否解釋按鈕的軸向選擇、停用狀態與捲動行為；能否保留原生連結和鍵盤路徑；能否給不支援特性的瀏覽器提供可用 fallback；能否用真實裝置與輔助技術驗證，而不只看視覺效果。
回答前需要釐清的問題
內容與版面
確認輪播是分頁卡片、連續圖庫還是標籤清單，每頁顯示幾項，項目寬度是否固定，以及是否允許使用者自由拖曳捲動。
瀏覽器範圍
確認目標瀏覽器、版本窗口、是否允許 JavaScript，以及產品是否接受實驗特性在部分瀏覽器中隱藏。
互動與無障礙
確認鍵盤焦點順序、螢幕閱讀器對目前項目的表達、觸控/滾輪操作、減少動態效果偏好和按鈕不可用時的回饋。
30 秒回答框架
「我先用普通橫向捲動容器和可聚焦卡片建立基線，再在支援 CSS Overflow 5 的瀏覽器中啟用 scroll-marker-group 與 ::scroll-button()。按鈕只負責觸發捲動，卡片本身仍有語意和鍵盤路徑；我會提供 @supports selector(::scroll-button(*)) 的樣式分支。不支援時保留原生捲動或小型 JavaScript 控件，並以鍵盤、螢幕閱讀器、觸控和 reduced-motion 測試作為發布門檻。」
分步驟深入解答
第一步：建立可用基線
捲動容器先使用普通版面、overflow-x: auto、明確的捲動捕捉策略和可見焦點樣式。每張卡片應有標題、連結或按鈕，使用者不依賴生成的標記才能到達內容。
第二步：啟用原生控件
在支援的瀏覽器中設定捲動標記組，並用 ::scroll-button(left) 與 ::scroll-button(right) 生成前後控件。規範將按鈕綁定到來源捲動容器；按鈕可用性隨是否還有可捲動內容變化，不能把它當成普通裝飾偽元素。
.carousel {
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-marker-group: after;
}
.carousel::scroll-button(left),
.carousel::scroll-button(right) {
inline-size: 2.5rem;
block-size: 2.5rem;
}第三步：處理能力偵測
用 @supports 或選擇器能力偵測包住增強樣式。偵測失敗時不要隱藏捲動條、卡片或手寫替代控件；偵測成功也要保留版面正常尺寸，避免生成控件後改變內容可見範圍。
第四步：保留語意與鍵盤路徑
偽元素生成的按鈕不應成為唯一操作入口。為焦點移動、Home/End、左右方向鍵和觸控滑動定義一致行為；焦點進入不可見卡片時把它捲動到可見區域。螢幕閱讀器應讀到輪播名稱、目前卡片和可執行動作，而不是只讀「下一個」。
第五步：處理軸向與 RTL
按鈕參數與捲動軸相關，不能把 left、right 直接等同於邏輯起點和終點。RTL、垂直書寫模式和不同 writing mode 要單獨驗收；優先使用邏輯尺寸與邏輯間距，檢查視覺方向和鍵盤方向是否一致。
第六步：設計 fallback
不支援時保留原生橫向捲動；若產品需要明確按鈕，再由 JavaScript 監聽捲動位置並更新 disabled、目前項目和 aria 狀態。fallback 與增強實作共用卡片資料和語意，避免維護兩套內容。
第七步：驗證發布門檻
測試支援與不支援的瀏覽器、鍵盤、觸控、滾輪、縮放 200%、高對比度、螢幕閱讀器和 prefers-reduced-motion。記錄首屏可見卡片數、按鈕誤觸率、焦點遺失、捲動延遲和 fallback 覆蓋率；只憑截圖通過不能證明控件可用。
高品質示範回答
我會把普通橫向捲動和卡片語意當作基線，再把 CSS Overflow 5 的按鈕與標記作為增強層。支援時透過能力偵測啟用 scroll-marker-group 和 ::scroll-button()，不支援時仍可捲動，必要時啟用小型 JavaScript fallback。生成按鈕不能取代連結、焦點和螢幕閱讀器語意；我會驗證 RTL、垂直書寫、停用狀態、焦點可見性、觸控和 reduced-motion。發布前用支援矩陣和真實輔助技術確認無論是否生成偽元素，使用者都能到達每張卡片。
常見錯誤
- 錯誤表現： 把
::scroll-button()當成所有瀏覽器都存在的普通按鈕。→ 失敗原因： CSS Overflow 5 的實作仍在演進。→ 修正方法： 用能力偵測，並保留原生捲動基線。 - 錯誤表現： 隱藏捲動條和卡片連結，只留下圓點標記。→ 失敗原因： 鍵盤和輔助技術可能失去內容路徑。→ 修正方法： 卡片語意獨立成立，標記只是附加導覽。
- 錯誤表現： 用物理 left/right 邏輯處理 RTL。→ 失敗原因： 視覺方向、書寫模式和邏輯方向可能不同。→ 修正方法： 在 RTL 與 vertical writing mode 中分別測試按鈕、焦點和捲動結果。
- 錯誤表現： 只測滑鼠點擊。→ 失敗原因： 無法發現焦點遺失、縮放溢位和 reduced-motion 問題。→ 修正方法： 把鍵盤、觸控、螢幕閱讀器和 200% 縮放列為驗收項目。
追問及應對
::scroll-button() 與普通按鈕有什麼邊界？
它由捲動容器生成並綁定捲動動作，樣式和可用狀態由捲動上下文決定。產品級自訂動作、分析埋點或複雜確認流程仍可能需要真實按鈕或 JavaScript。
為什麼還要保留原生捲動？
它是無增強環境的可用路徑，也涵蓋觸控、滾輪和使用者偏好。增強控件失效時，使用者仍能存取內容。
如何避免生成控件造成版面跳動？
預留控件空間，使用穩定的容器尺寸和邏輯間距，並在能力偵測分支中比較首屏卡片數量與捲動捕捉位置。
什麼時候不該採用這項特性？
當目標瀏覽器不支援、輪播需要複雜業務狀態，或團隊無法維護可靠 fallback 時，使用普通捲動加成熟控件更穩妥；不要為了減少 JavaScript 而犧牲可達性。