前端面試：如何用 anchored container query 處理浮層定位降級？
題幹與適用場景
你維護一個大量重用的 tooltip 元件。它用 CSS anchor positioning 貼近觸發按鈕，並透過 position-try fallback 避免溢出；但浮層換到另一側後，箭頭方向、滾動區域和內距仍保持舊狀態。
請設計純 CSS 優先的方案，說明如何讓 fallback 狀態驅動樣式、如何避免元件互相影響，以及不支援 anchor positioning 時的降級行為。
面試官考察點
- 是否理解 anchor positioning 的定位關係與 fallback 選擇。
- 是否能用 anchored container query 讀取實際落位，而非複製 JS 狀態。
- 是否考慮無障礙、滾動邊界、層疊和重複元件隔離。
- 是否提供特性檢測、靜態佈局和漸進增強路徑。
回答前需要釐清的問題
- tooltip 是普通文字、選單還是可互動對話框？
- fallback 是上下左右切換，還是會進入滾動容器？
- 目標瀏覽器是否支援 anchor positioning 與 container queries？
- 元件是否允許 JS 讀取尺寸，還是必須 CSS-only？
30 秒回答
我會把按鈕設為 anchor，把 tooltip 設為 anchor-positioned container，並用 position-try fallback 定義候選位置。每個 fallback 用 anchored container query 改變箭頭、內距和最大高度；元件內部樣式只依賴自身容器，不讀全域狀態。先用 @supports 檢測能力，不支援時回退到靜態或 JS 定位，並保留可存取的描述關聯。壓測視窗邊緣、縮放、滾動容器和長文字，確認不溢出、不遮擋焦點。
分步驟深入解答
建立 anchor 與候選位置
觸發元素宣告 anchor-name，tooltip 使用 position-anchor 和 inset/anchor() 關聯。用 position-try fallback 描述候選位置順序，不把方向寫死在元件邏輯中。
把浮層設為查詢容器
設定 container-type，讓浮層內部的 anchored container query 根據實際 fallback 狀態調整。查詢的是錨定結果對應的容器條件，避免讀取視窗寬度猜測位置。
同步箭頭與滾動策略
不同落位使用不同箭頭邊、transform-origin、max-block-size 和 overflow。長內容進入浮層內部滾動，不能讓 tooltip 撐出視窗或截斷鍵盤焦點。
隔離重複元件
每個實例使用獨立 anchor 名稱或命名作用域，避免一個列表項的 anchor 被另一個實例匹配。層疊順序、position-area 和遮罩規則也應局部化。
做特性檢測與降級
透過 @supports (anchor-name: --x) 和必要的 container query 檢測能力。降級版本可使用靜態相鄰內容或既有 JS 定位器，但必須保留 aria-describedby、鍵盤關閉和焦點順序。
驗證邊界與無障礙
測試窄視窗、縮放、RTL、滾動容器、觸控和 reduced motion。用鍵盤和螢幕閱讀器確認 tooltip 不搶焦點、不被裁切，fallback 改變時內容仍可讀。
高品質示範回答
我會把觸發按鈕宣告為 anchor，把 tooltip 設為 container，並給出有順序的 position-try fallback。浮層內部用 anchored container query 根據實際落位調整箭頭、內距、最大高度和滾動方向，元件只讀取自身容器條件。每個實例隔離 anchor 名稱和層疊規則。用 @supports 做漸進增強，不支援時回退到靜態或既有 JS 定位，同時保留 aria-describedby、鍵盤關閉和焦點順序。透過窄視窗、縮放、RTL、滾動容器、長文字和螢幕閱讀器測試邊界。
常見錯誤
- 用 JS 讀取視窗寬度猜測 fallback，而不是回應實際落位。
- 把所有 tooltip 共用一個 anchor 名稱，導致實例串聯。
- 只改變 top/left，不同步箭頭、滾動和 transform-origin。
- 沒有
@supports，讓不支援瀏覽器出現不可見或不可操作浮層。 - 只測正常視窗，忽略 RTL、縮放、滾動容器和鍵盤焦點。
- 把 tooltip 當對話框使用，卻沒有明確的無障礙語義。
追問及應對
anchored container query 與普通 container query 有何差別？
它用於根據 anchor-positioned 元素的 fallback 落位狀態選擇樣式，普通 container query 主要依據容器尺寸或樣式條件。
不支援 anchor positioning 時怎麼辦？
提供靜態相鄰佈局或既有 JS 定位器，並保持相同的可存取名稱、關閉方式和內容順序；不要依賴半套新語法。
如何避免浮層遮擋焦點？
限制最大尺寸並讓內容內部滾動，測試鍵盤 Tab、Escape、螢幕閱讀器和滾動父級，確保焦點元素始終可見。
為什麼不能只寫四個方向的媒體查詢？
媒體查詢反映視窗，不反映 anchor 與容器的實際空間；fallback 可能受滾動容器、字型和內容長度影響。