題幹與適用場景
一個說明面板或折疊卡片預設只顯示標題，展開後高度由內容決定。產品希望從固定高度平滑過渡到 auto、max-content 或 fit-content，同時保持鍵盤、螢幕閱讀器和舊瀏覽器體驗。請說明你會如何使用 interpolate-size 或 calc-size()，以及如何驗證收益和風險。
這道題適合前端、設計系統和效能職位。MDN 將 interpolate-size 標為非 Baseline 的有限支援特性；它需要明確啟用 intrinsic size 插值，不能把它當成所有瀏覽器都預設支援的動畫捷徑。
面試官考察點
- 是否理解長度值與 intrinsic size 關鍵字之間的插值邊界。
- 是否知道
interpolate-size會繼承，以及全域啟用可能影響後代。 - 是否區分
interpolate-size與calc-size()的職責。 - 是否保留不支援瀏覽器的靜態可用狀態和減少動效偏好。
- 是否驗證內容變化、版面抖動、焦點順序與效能，而不是只看示範影片。
回答前需要釐清的問題
先確認：
- 目標瀏覽器和最低版本是什麼，是否允許有限支援的漸進增強？
- 展開內容是可折疊語義，還是必須始終存在於文件和輔助技術樹中？
- 動畫對象是高度、寬度還是兩者，內容是否會在動畫期間非同步變化？
- 需要支援
prefers-reduced-motion、鍵盤操作、焦點回收和中途反向播放嗎？
若沒有補充，可以假設目標是現代 Chromium、Firefox 和 Safari 的差異化支援，舊瀏覽器必須保持可用但可以沒有平滑 intrinsic size 動畫。
30 秒回答框架
我會先把折疊狀態做成語義正確的按鈕和內容區域，再把動畫視為漸進增強。支援的瀏覽器在局部容器啟用 interpolate-size: allow-keywords，從一個明確的長度過渡到 max-content 或 auto；需要參與尺寸計算時再評估 calc-size()。不支援時使用靜態展開、預設最大高度或無動畫切換，不能依賴動畫完成業務狀態。最後用鍵盤、螢幕閱讀器、減少動效、內容變長、中途反向和真實效能測試驗證。
分步驟深入解答
1. 先建立語義狀態
按鈕使用 aria-expanded 指向內容區域，內容的隱藏策略與產品語義一致。動畫只改變視覺和版面過渡，不負責決定是否可操作。焦點不能因為折疊突然遺失；關閉後若焦點仍在隱藏區域，應移動到觸發按鈕或明確的下一個可見控制項。
2. 選擇插值方式
interpolate-size: allow-keywords 允許長度百分比值與 intrinsic size 值之間插值，但不能直接讓兩個 intrinsic size 關鍵字互相動畫。calc-size() 適合需要對 intrinsic size 做計算的場景；普通 calc() 不能計算 auto、max-content 等值。先用局部容器啟用，避免根元素繼承到不相關元件。
3. 處理內容與版面邊界
動畫容器應有清楚的 overflow、最大尺寸和定位邊界。非同步載入內容會改變目標尺寸，需決定是等待內容穩定、重新計算，還是在動畫完成後更新。巢狀網格、絕對定位和捲動容器可能讓 intrinsic size 與預期不同，必須在真實元件組合中測量。
4. 相容性與回退
檢測支援後才啟用增強規則；舊瀏覽器繼續使用靜態高度、max-height 近似或直接切換。回退必須保留內容可讀、按鈕可用、連結可聚焦和關閉狀態可理解。不要用 JavaScript 強行測量每一幀來掩蓋基礎 CSS 不支援，因為這會引入同步版面和更多狀態分支。
5. 動效偏好與互動
在 prefers-reduced-motion: reduce 下縮短或移除過渡，但保留狀態變化和焦點邏輯。鍵盤 Enter、Space、Tab 和 Escape 的行為要與元件規範一致。使用者在動畫中再次點擊時，瀏覽器應自然反向或跳到新目標，不應留下兩個並發動畫和錯誤的 aria-expanded。
6. 驗證指標
用真實內容覆蓋短文字、長文字、非同步錯誤和多語言換行。記錄版面偏移、動畫掉幀、主執行緒樣式與版面時間、互動延遲、焦點可見性和輔助技術結果。對支援與不支援路徑做對照，並測試屬性被忽略時頁面仍然可用。CSS 特性收益必須來自實測，不能把瀏覽器支援表當成產品效能承諾。
高品質示範回答
我會把面板實作成語義按鈕加內容區域，aria-expanded 是狀態來源，CSS 動畫只是增強。支援的瀏覽器在面板容器上局部設定 interpolate-size: allow-keywords，從一個明確的折疊長度過渡到 max-content 或 auto；如果需要對 intrinsic size 做額外計算，再使用 calc-size()。我不會在根元素盲目開啟，因為該屬性會繼承。
不支援時，面板仍能直接展開或使用有上限的 max-height，內容和焦點不依賴動畫完成。減少動效時移除過渡但保留狀態。動畫中內容非同步變更時，我會選擇等待穩定、重新計算或跳到最終狀態，並保證按鈕狀態只更新一次。
驗證包括長短內容、多語言、鍵盤、螢幕閱讀器、焦點回收、中途反向、舊瀏覽器和 prefers-reduced-motion。效能上比較樣式、版面、幀率、版面偏移和互動延遲；若支援路徑帶來抖動或相容性問題，就縮小選擇器範圍或關閉增強，而不讓 CSS 實驗影響基礎可用性。
常見錯誤
- 把 intrinsic size 關鍵字當成可以互相插值的普通數字。
- 在根元素設定
interpolate-size，讓不相關元件繼承意外行為。 - 把
calc-size()當成普通calc()的替代品，卻沒有說明適用邊界。 - 只在支援瀏覽器測試，忽略屬性被丟棄時的內容與焦點。
- 用
max-height的巨大常數掩蓋真實高度，導致動畫速度和版面結果失真。 - 用 JavaScript 每幀讀取版面並寫回，製造強制同步版面。
- 忽略減少動效、鍵盤反向操作和動畫中非同步內容變化。
- 只展示視覺流暢度，不測 CLS、互動延遲和螢幕閱讀器狀態。
追問及應對
為什麼不能直接從零過渡到 auto？
傳統插值需要可計算的數值端點；auto、max-content 等 intrinsic size 不是普通長度。interpolate-size 允許特定長度到 intrinsic size 的插值，但仍受支援範圍限制。
什麼時候用 calc-size？
當目標尺寸需要在 intrinsic size 基礎上繼續計算時使用，例如加入固定間距或上限。若只需啟用長度與 intrinsic size 的過渡，局部 interpolate-size 更直接。
內容在動畫期間變長怎麼辦？
先定義產品策略：等待資料穩定、重新計算目標，或立即跳到最終狀態。無論選擇哪種，都要保持可捲動、焦點和 aria-expanded 一致，並測試快速連續操作。
不支援該屬性的瀏覽器怎麼辦？
保留無動畫展開或有界的靜態回退，確保內容、連結和鍵盤路徑完整。漸進增強失敗只減少視覺效果，不能改變業務可用性。
如何驗收可及性？
用鍵盤完成展開、關閉、再次開啟和焦點移動，檢查輔助技術讀到的狀態與內容。再驗證減少動效設定下狀態仍及時更新，隱藏內容不會留下不可達焦點。