CSS格式化工具

把 CSS 規則展開，方便閱讀與檢查

CSS 格式化工具會將貼上的樣式文字重新排成較容易閱讀的樣子，例如把單行的 .card{color:#333;margin:0 auto} 展開成選擇器、宣告與值分行呈現。CSS 規則通常由選擇器和大括號內的宣告組成；這裡的縮排是幫助辨認層級的視覺線索，不會替你判斷哪個選擇器應套用到哪個頁面。CSS 語法的規則結構可參考 W3C CSS Syntax Module Level 3。

本頁預設採美化模式，將結果顯示在可複製的輸出區；工具也提供壓縮模式，改為較緊湊的文字輸出。美化時可選 2、4 或 8 個空格，或改用 Tab 作為縮排。縮排選擇只改變排版呈現，不代表程式碼符合團隊規範。

縮排設定如何影響巢狀規則

遇到 @media 等區塊規則時，內層宣告會依層級縮排，方便追看條件區塊包含哪些規則。空格適合需要固定可見寬度的團隊格式；Tab 則以一個定位字元代表層級，各編輯器顯示的視覺寬度可能不同。改動縮排選項後，輸出會自動重新整理。這個格式化流程著重空白與換行，不提供屬性排序、選擇器去重、錯誤修復、相容性檢查，也不會把 SCSS、Sass 或 Less 編譯成 CSS。格式化函式的縮排選項可對照 js-beautify 官方說明；它描述的是美化器的選項，不是 CSS 語法驗證標準。

從單行樣式到可複查的多行輸出

1. 準備 CSS 文字

   貼上一段 CSS 規則或樣式表。若原始內容來自建置後的檔案，先確認複製範圍只有 CSS，沒有混入 HTML 或其他文字。

2. 選擇縮排方式

   在美化模式中設定 2、4、8 個空格，或選擇 Tab。若要比對專案風格，請採用團隊既有設定；工具不會讀取專案的格式設定檔。

3. 檢視並取用結果

   輸入後稍候片刻，輸出區會自動更新。檢查選擇器、宣告值及巢狀區塊，再複製或下載輸出；下載檔名為 formatted.css。

例如輸入 .card{color:#333;margin:0 auto}，美化後可得到帶縮排與換行的規則，仍保留原有選擇器與宣告內容。不同的輸入或格式器處理方式可能呈現不同空白，應以畫面實際輸出為準。

使用時常見的三個問題

排版結果仍需回到專案脈絡確認

格式化只協助閱讀程式碼，不會證明 CSS 語法正確、樣式效果不變或支援特定瀏覽器。

• 格式器可能以自己的方式整理空格、換行和區塊層級；遇到自訂屬性、特殊值或格式不完整的片段時，請逐段核對輸出。
• 壓縮會移除或收斂空白，並可能處理註解；不要假設結果能還原成原本的排版或註解內容。
• 本工具不會替你檢查選擇器是否重複、宣告是否有效，也不提供瀏覽器相容性診斷或自動修復。
• 貼回正式專案前保留原始檔，並使用專案採用的檢查與測試流程確認結果。

CSS 的解讀取決於完整規則及其使用環境。單看格式化後的文字，無法推斷頁面最終呈現或某個瀏覽器的支援狀況。