題幹與適用場景
設計系統希望在 CSS 屬性值內根據 style、media 或 feature 條件選擇顏色、間距和布局值。請說明 if() 的求值規則、回退、支援檢測、無障礙影響和漸進增強策略，不要只展示一段 CSS。
面試官考察點
- 是否理解
if()是值級條件邏輯，按條件書寫順序返回第一個為真的值。 - 是否能正確使用
else，並處理沒有匹配條件時的 guaranteed-invalid 結果。 - 是否核對瀏覽器支援、@supports、伺服器渲染和關鍵布局回退。
- 是否考慮主題切換、列印、減少動效和可存取性驗證。
回答前需要釐清的問題
- 條件來自媒體查詢、容器/樣式查詢還是特性查詢？多個條件衝突時誰優先？
- 目標屬性沒有有效值時，元件應使用什麼舊瀏覽器預設值？
- 這是裝飾性顏色，還是會影響尺寸、可讀性和互動命中區域的關鍵布局？
- 支援哪些瀏覽器和 WebView？是否已有建置時 CSS 降級鏈路？
30 秒回答框架
我會先把 if() 限制在可安全降級的屬性，再定義條件順序和 else 值。它在屬性值內依次評估條件，首個為真就返回對應值；無匹配且無 else 時可能產生無效值，屬性會回退。上線前用 @supports 或建置降級提供靜態預設值，驗證主題、列印、對比度、減少動效和舊瀏覽器渲染，關鍵布局不依賴實驗語法。
分步驟深入解答
1. 劃定值級條件邊界
if() 適合讓同一屬性在多個條件下選擇值，不能取代選擇器樹、DOM 狀態機或業務邏輯。先確認條件可在 CSS 中觀察，避免把需要 JavaScript 資料的判斷硬塞進樣式。
2. 設計順序與回退
條件按出現順序求值，先寫最具體或最重要的規則，最後用 else 給出安全值。若沒有條件命中，結果可能是 guaranteed-invalid，瀏覽器會按屬性繼承或初始值處理，因此必須明確設計舊環境預設值。
3. 漸進增強與相容
MDN 將該函式標為有限支援的實驗技術。為關鍵屬性先提供靜態宣告，再在 @supports 或分層樣式中啟用 if()；不要把使用者代理字串當作唯一檢測。伺服器渲染只輸出結構，樣式能力由客戶端驗證。
4. 驗證體驗與可存取性
用真實主題、視窗、列印和特性支援組合測試，檢查文字對比度、焦點可見性、命中區域和 prefers-reduced-motion。記錄不支援率和回退命中率，發現關鍵布局漂移就關閉增強層。
高品質示範回答
我會把 if() 當作值級漸進增強。先確定條件屬於 style、media 或 feature 查詢，再按優先順序書寫條件並提供明確 else 安全值；沒有匹配條件時的無效值不能依賴瀏覽器猜測。關鍵布局先有靜態預設宣告，在 @supports 中啟用增強，透過真實瀏覽器和 WebView 矩陣驗證相容性。測試主題、列印、對比度、焦點、減少動效和不同條件組合，監控回退命中與布局差異，必要時移除增強層。
常見錯誤
- 把
if()當成 JavaScript 業務邏輯或選擇器替代品。 - 忽略條件按書寫順序求值，導致寬泛條件提前命中。
- 沒有
else和靜態預設值，舊瀏覽器出現關鍵樣式缺失。 - 把實驗語法直接用於尺寸、導航或互動命中區域。
- 只在最新瀏覽器測試，不驗證 WebView、列印和主題組合。
- 沒有檢查對比度、焦點和減少動效。
追問及應對
沒有條件命中會怎樣？
沒有 else 時結果可能為 guaranteed-invalid，屬性隨後按繼承、初始值或未指定值處理。關鍵屬性必須提供可接受的靜態回退。
為什麼不能只用 @supports？
@supports 只能判斷宣告是否被解析，不能證明每個條件組合和實際值都符合設計。仍需在目標瀏覽器、主題和輔助技術下進行行為驗證。
什麼時候繼續用自訂屬性和多個宣告？
當瀏覽器覆蓋面要求高、條件少或回退必須透明時，多個宣告更易稽核。if() 帶來的壓縮和集中表達只有在相容矩陣可接受時才值得採用。