題幹與適用場景
產品希望搜尋框、標籤輸入和多行備註能隨內容變寬或變高，減少空白；設計又要求它們不能超出網格、不能造成版面偏移，並在舊瀏覽器中保持可用。請說明 field-sizing: content 如何改變表單控制項的預設首選尺寸，以及如何設定約束、降級和可及互動。
這道題適合前端、設計系統和表單體驗職位。重點是理解它改變的是控制項的預設首選尺寸，不會自動替你設計容器、捲動和驗證行為。
面試官考察點
強回答會指出 content 讓文字輸入控制項按內容收縮或增長，fixed 是預設值；沒有最小寬度時，空輸入可能只剩游標寬度，帶佔位符時控制項會按佔位符變大。回答還應涵蓋 min-inline-size、max-inline-size、文字區高度、長內容捲動、版面穩定性、舊瀏覽器降級和標籤／錯誤訊息關聯。
回答前需要釐清的問題
- 哪些控制項要自適應：單行輸入、文字區、選擇框還是檔名顯示？
- 允許改變的是內聯尺寸、區塊尺寸，還是只在達到上限後內部捲動？
- 網格欄、行動裝置寬度和相鄰按鈕有什麼硬約束？
- 空值、佔位符、超長字串和貼上內容應如何呈現？
- 目標瀏覽器是否支援此屬性，降級時要保持固定尺寸還是用腳本增強？
30 秒回答框架
「我會把 field-sizing: content 當成控制項首選尺寸增強，而不是完整的自動版面方案。先給輸入和文字區設定 min-inline-size、max-inline-size，為文字區設定可接受的最大高度，超過上限後讓內部捲動。保留明確的 label、錯誤關聯和焦點樣式；不支援的瀏覽器繼續使用固定尺寸。透過空值、佔位符、長文字、縮放、鍵盤操作和版面偏移測試確認沒有破壞表單契約。」
分步驟深入解答
第一步：理解 fixed 與 content
field-sizing 的初始值是 fixed，表單控制項採用瀏覽器提供的預設首選尺寸。設為 content 後，支援的文字輸入會根據內容調整尺寸，表現為收縮包裹或隨輸入增長。它不改變控制項的語義、驗證或提交規則。
第二步：為單行控制項設定寬度上下限
沒有最小寬度的空輸入可能只顯示游標，使用者難以發現可輸入區域；佔位符也可能把控制項撐得過寬。使用邏輯方向的最小和最大尺寸，把自適應限制在網格允許範圍內。
.tag-input {
field-sizing: content;
min-inline-size: 8rem;
max-inline-size: min(100%, 28rem);
}第三步：處理 textarea 的雙軸增長
文字區在寬度受限時可能透過增加行數來顯示更多內容。應設定最大區塊尺寸，並在達到上限後允許內部捲動，否則貼上長文字會把後續欄位推到視口之外。resize、overflow 和 line-height 仍需按產品互動明確設定。
第四步：避免版面跳動和網格破壞
內容增長會改變相鄰元素的位置，尤其是表格、工具列和彈窗。把欄位放在可伸縮的網格軌道中，為相鄰按鈕預留空間，並在關鍵操作區設定最大尺寸。用 CLS 和真實輸入序列測量，而不是只看初始截圖。
第五步：處理 placeholder、空值和檔名
支援 content 的控制項可能按佔位符顯示較大初始尺寸；空輸入沒有佔位符時則可能很窄。檔案選擇控制項的顯示檔名變化也可能觸發尺寸變化。給每類控制項設計可讀的最小尺寸和截斷策略，不要讓佔位符成為唯一標籤。
第六步：保留表單可及性
field-sizing 不會自動提供 label、錯誤提示或焦點可見性。每個控制項仍要有程式關聯的標籤、錯誤訊息和鍵盤路徑；尺寸變化不能遮擋目前焦點，也不能把錯誤訊息移出視口。放大字型和高對比主題要單獨驗證。
第七步：規劃相容降級
MDN 將此屬性標為較新的特性，舊瀏覽器可能忽略它。預設 CSS 應提供固定或可增長的合理尺寸，支援環境再覆寫為 content。不要為了模擬效果立即加入逐鍵測量腳本；只有產品確實需要舊瀏覽器自適應時，才評估輸入事件、節流和可及性副作用。
第八步：建立可重複驗證
測試空值、短值、長值、貼上、多語言、佔位符、刪除、復原、縮放、鍵盤導覽和錯誤狀態。記錄控制項寬高、捲軸、CLS、焦點位置和相鄰按鈕可達性，並在 Chromium、Firefox、Safari 及不支援屬性的瀏覽器上比較降級結果。
設計取捨與邊界
自適應尺寸可以減少空白和腳本，但也會增加版面變化和跨瀏覽器差異。固定尺寸更可預測，content 更適合標籤、搜尋詞等內容長度與語義緊密相關的場景。對主表單欄位，應優先保證可發現性、可操作性和錯誤恢復，再決定是否讓尺寸隨內容變化。
不要把 field-sizing: content 當成自動換行、自動驗證或防止溢出的保證。容器約束、捲動和錯誤呈現仍由元件設計負責。
落地計畫與證據
先選擇一個標籤輸入和一個備註文字區做試點，記錄預設尺寸、內容長度分布、最大約束和版面指標。先提供固定尺寸，再在支援屬性的瀏覽器啟用 content，觀察 CLS、焦點、捲動和表單完成率。
把最小最大尺寸、佔位符策略、文字區上限、降級樣式和瀏覽器矩陣寫入元件文件。視覺回歸之外，補充鍵盤和讀屏驗收，確保尺寸變化沒有破壞 label、錯誤訊息和提交按鈕順序。
常見誤區與追問
不設定最小寬度
空輸入可能只剩游標寬度，控制項很難被發現。設定可讀的最小內聯尺寸，並保留可見標籤。
讓 textarea 無限增長
貼上大段文字會推動整個頁面。設定最大區塊尺寸，超過上限後在控制項內部捲動。
把 placeholder 當作 label
placeholder 會影響初始尺寸，也會在輸入後消失。它不能取代持久、可關聯的 label。
只在支援屬性的瀏覽器測試
舊瀏覽器會忽略宣告。固定尺寸或可增長的預設樣式必須獨立可用，並納入同一套表單驗收。
尺寸變化導致按鈕不可達怎麼辦？
檢查網格軌道、最大尺寸、捲動容器和焦點位置，使用 CLS、鍵盤導覽和長文字序列複測，而不是簡單停用自適應。