使用方式
先完成一次順手的操作
- 把 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 適合在要貼入部署片段、文件或測試 payload 前先把多餘空白與註解壓掉；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 的整理與壓縮，不是完整編譯流程。
Quick guide
Use cases, answers, and nearby tools
Compact below-tool notes that help first-run users and repeated visitors move faster without changing the main interface.
Chinese search: CSS 壓縮器、CSS 美化器、CSS 格式化、CSS 壓縮 線上
How to use
Run a clean first pass
- Paste CSS into the left input and keep the source intact.
- Switch between Minify and Beautify to update the proof sheet and byte ledger together.
- Check the summary rail, then copy the transformed output.
Examples
Real jobs this page helps with
- Compress a stylesheet before shippingShrink a landing page or component stylesheet into a lighter payload and confirm the byte savings before copying it into production snippets.
- Reopen dense CSS for reviewBeautify a compact or messy CSS fragment so selectors, blocks, and spacing become readable again.
FAQ
What people usually want to know
Does this tool upload my CSS anywhere?
No. Formatting runs locally in your browser.
Why can Beautify make the file larger?
Beautify adds line breaks and indentation for readability, so the ledger can show growth instead of savings.
Does it support Sass, SCSS, or autoprefixer?
No. This version is scoped to ordinary CSS cleanup and formatting, not full preprocessing or build-pipeline transforms.