CSS 壓縮/格式化 - 線上壓縮與美化 CSS
線上壓縮 CSS 縮小檔案體積，或格式化還原縮排提升可讀性，免上傳即時顯示結果，免費好用的 CSS 工具。
貼上 CSS，這個工具會即時把它壓縮（minify）——移除註解、空白、換行與多餘字元，縮小檔案體積，讓網頁載入更快。想反過來「還原」也行：切到格式化模式，就能把壓成一行的 CSS 解壓縮成有縮排、好閱讀的程式碼，方便編輯與除錯。全部在你的瀏覽器本機執行，樣式表不會上傳到任何伺服器，原始碼與商業專案的 CSS 都不外流。
為什麼要使用線上CSS 壓縮/格式化？
壓縮以減小體積，格式化以提高可讀性。
貼上 CSS，這個工具會即時把它壓縮（minify）——移除註解、空白、換行與多餘字元，縮小檔案體積，讓網頁載入更快。想反過來「還原」也行：切到格式化模式，就能把壓成一行的 CSS 解壓縮成有縮排、好閱讀的程式碼，方便編輯與除錯。全部在你的瀏覽器本機執行，樣式表不會上傳到任何伺服器，原始碼與商業專案的 CSS 都不外流。
CSS 壓縮/格式化工具怎麼用
- 1
貼上你的 CSS
把樣式表程式碼輸入或貼到 CSS 欄位——單一規則或整份 stylesheet 都可以。
- 2
選擇壓縮或格式化
點「壓縮」把 CSS 壓成精簡的一行；點「格式化」把壓縮過的 CSS 還原成有縮排、可讀的程式碼。
- 3
檢查結果
確認轉換後的輸出；若 CSS 語法有誤會被標示出來，可先修正再複製。
- 4
複製輸出
用「複製」按鈕取得壓縮或格式化後的 CSS 直接用到專案裡，再用「清空」重新開始。
參考資料
- MDN — CSS
Mozilla 的 CSS 語法、屬性與值參考文件——壓縮或格式化後想核對規則是否正確時很實用。
- W3C — CSS Snapshot
W3C 官方彙整的 CSS 規範總覽，定義了合法樣式表語法的依據。
相關工具
常見問題
- CSS 壓縮工具是做什麼的？
- CSS 壓縮工具會把瀏覽器渲染樣式時不需要的東西全部移除——註解、換行、多餘空白與重複字元，產生一份體積更小的檔案，下載更快、改善網頁載入時間，而且不會改變樣式原本的呈現方式。
- 壓縮過的 CSS 要怎麼還原？
- 把壓縮（壓成一行）的 CSS 貼到輸入框，點「格式化」即可。格式化會重新加上縮排與換行，把擠成一行的 CSS 解壓縮成好讀的程式碼，方便編輯、除錯與 code review。這個工具同時支援壓縮與還原兩個方向。
- CSS 解壓縮和格式化是同一件事嗎？
- 在這個工具裡是同一個動作。所謂「CSS 解壓縮」就是把壓成一行的程式碼還原成有縮排、分行的可讀格式，點「格式化」就能完成；它並不會還原被縮短的屬性值，而是重建排版讓你看得懂、改得動。
- 壓縮 CSS 會改變我的樣式外觀嗎？
- 不會。壓縮只移除瀏覽器會忽略的字元，例如註解和空白。選擇器、屬性與值都維持原樣，所以渲染出來的樣式完全一致，只是檔案變小了。
- 我的 CSS 會被上傳到伺服器嗎？
- 不會。所有壓縮與格式化都在你的瀏覽器以前端程式碼完成，樣式表不會離開你的裝置，能讓專有或機密的 CSS 保持私密。
- CSS 檔案壓縮後能小多少？
- 取決於原始檔案裡有多少空白與註解。註解多、排版寬鬆的樣式表通常能縮小 20–50%，而當伺服器再套上 gzip 或 Brotli 壓縮後，節省的幅度還會更大。