實用工具
輸入
結果
結果會顯示在這裡。來自 CDN 或正式建置的壓縮 CSS，本來就刻意讓人讀不懂。這裡用 js-beautify 的 CSS 美化工具將它展開：每行一條宣告、規則之間空一行、@media 與 @supports 區塊縮排，> 這類組合子兩側也留出空間。無論是閱讀第三方樣式表、檢查建置實際產出了什麼，或在送出 pull request 前整理手寫的 CSS，這都是你需要的。
它是怎麼運作的
- 以逗號分隔的選擇器清單中，預設每個選擇器各佔一行；關閉這個選項，.card, .panel 就會留在一起。
- 註解會留在原本的位置，包括壓縮工具會保留的 /*! 授權聲明。
- 值會完全依原樣保留——顏色、單位和自訂屬性只會調整空白，絕不會被改寫。
你的資料去了哪裡
哪也沒去。本工具完全在你的瀏覽器裡執行：你貼上的文字由頁面處理，不會傳輸到任何伺服器，也不會寫進任何紀錄。
本工具免費且免登入，執行結果只存在於你目前的頁面裡，不會被儲存到任何地方。
它要花多少
本工具完全免費，不需要登入，也不消耗點數。
常見問題
- 它會修正或驗證我的 CSS 嗎？
- 不會。它只改變空白，所以少了分號或屬性名稱拼錯，格式化後依然是錯的。不過格式化確實能讓這類錯誤更容易發現，因為每條宣告都會單獨佔一行。
- 支援 SCSS 或 Less 嗎？
- 部分支援。js-beautify 的 CSS 模式處理巢狀以及大部分 SCSS 和 Less 語法，足以讓你閱讀，但參數複雜的 mixin 和某些插值寫法的空白可能會很奇怪。對於要提交的原始檔，搭配 SCSS 解析器的 Prettier 是更穩妥的選擇。
- 格式化會改變網頁的外觀嗎？
- 不應該會。宣告之間與選擇器周圍的空白對呈現沒有影響。唯一的例外是極少數依賴特定空白的舊式瀏覽器 hack，而現代樣式表中已經不會有這種寫法。
背後的開源專案
本工具執行在 beautifier/js-beautify 之上，以 MIT 授權發布。如果你需要在自己的程式裡實作同樣的能力，直接用這個函式庫。
beautifier/js-beautify也常被稱作
- css 格式化
- css 美化
- css 反壓縮
- css 線上格式化
- css pretty print
- css formatter