使用方式
先完成一次順手的操作
- 把 CSS 貼到左側輸入區，先保留來源不動。
- 切換 Minify 或 Beautify，右側結果和體積帳單會一起更新。
- 確認摘要列與差異比例後，再複製整理好的輸出。
CSS 壓縮 / 美化器
把 CSS 壓縮乾淨，或整理回可讀版面，順手看懂體積差多少。
輸入
Stylesheet source
貼上原始 CSS，左邊保留來源，右邊立刻看到結果。
貼上 CSS 後即可開始整理。
結果
Proof sheet
切換 Minify / Beautify，體積帳單會一起更新。
Compression ledger
原始
0 B
結果
0 B
差異
0%
等待內容以建立 proof ticket。
selectors
0
blocks
0
comments
0
等待樣式表
這裡會提示格式狀態、可疑結構與最佳化結果。
使用說明
Minify 適合在要貼入部署片段、文件或測試內容前先把多餘空白與註解壓掉；Beautify 則適合把緊湊 CSS 重新整理成可讀工作稿。
這個工具做的是前端本機格式整理，不是完整 CSS 編譯器。它不處理 Sass、Less、autoprefixing，也不保證覆蓋所有非常態語法。
體積帳單會顯示原始大小、結果大小與差異比例；摘要列則幫你快速核對 selector、區塊與註解數量，讓轉換不只是黑箱結果。
快速導覽
使用情境、常見問題與相關工具
把需要的說明放在工具下方，讓第一次使用與之後回來複用都更順。
英文搜尋: css minifier、css beautifier、css formatter、minify css online、beautify css online
常見情境
這個工具實際適合拿來做什麼
- 部署前先壓縮樣式把 landing page 或 component CSS 壓成更短的單行版本，先看省下多少 bytes 再貼進 snippet。
- 讀懂同事傳來的緊湊 CSS把一段單行或雜亂縮排的樣式切到 Beautify，快速重新打開規則結構與區塊邏輯。
常見問題
先把常見疑問說清楚
- 這個工具會把 CSS 上傳到伺服器嗎？
- 不會。所有壓縮與美化都在瀏覽器本機完成。
- Beautify 為什麼有時候會讓檔案變大？
- 因為 Beautify 會補回換行、縮排與可讀空白，所以體積帳單會顯示增加而不是節省。
- 它支援 Sass、SCSS 或 autoprefixer 嗎？
- 不支援。這一版專注在 ordinary CSS 的整理與壓縮，不是完整編譯流程。