⚙

CSS 壓縮

移除註解、空白與冗餘程式碼來壓縮 CSS。顯示確切的位元組節省量與壓縮率。一切都在你的瀏覽器中執行 — 沒有伺服器，也不追蹤。

開發者工具 本機執行 不會傳送任何資料
CSS 壓縮 壓縮 最佳化 僅限用戶端
選項：
CSS 輸入
0 位元組
→
壓縮後的 CSS
0 位元組
💡
CSS Minifier removes comments and unnecessary whitespace to reduce file size without changing functionality. Use the CSS 格式化工具 若你需要美化已壓縮的 CSS 以便編輯，可使用此工具。典型壓縮： 20-40% 更小。

什麼是 CSS 壓縮？

立即壓縮 CSS 程式碼。移除註解、空白與多餘程式碼，以縮小正式環境的檔案大小。免費、瀏覽器端執行，不會傳送任何資料。

如何使用 CSS 壓縮

  1. 將 CSS 貼到輸入面板。
  2. 執行壓縮工具以移除空白與其他非必要字元。
  3. 檢查壓縮後的輸出，確認樣式表仍正確。
  4. 複製或下載壓縮後的 CSS，以供部署或嵌入使用。

相關工具

📝
CSS 格式化工具
以可自訂格式美化或壓縮 CSS 程式碼
 ⚙
JS 壓縮
使用 Terser 壓縮 JavaScript - 混淆與壓縮
 📄
HTML Formatter
使用可自訂的縮排美化或壓縮 HTML
了解 CSS 壓縮 ▾
範例
輸入 \n.btn {\n color: red;\n padding: 8px 16px;\n}
輸出 .btn{color:red;padding:8px 16px}
常見使用情境
  • 部署前縮小樣式表大小
  • 用於嵌入或程式碼片段的精簡 CSS
  • 偵錯時比較格式化與壓縮後的輸出
  • 為靜態網站或電子郵件準備更小的樣式內容
常見問題
壓縮 CSS 會破壞我的樣式嗎？

No. The minifier only removes characters that have no effect on CSS parsing -whitespace and comments. The minified output is functionally identical to the original.

我應該保留原始格式化 CSS 嗎？

是。請務必在儲存庫中保留人類可讀的原始檔，只部署壓縮版。若需要在瀏覽器 DevTools 中偵錯壓縮後的 CSS，請使用 source map。

檔案大小預期可減少多少？

通常可節省 20% 到 50%，取決於原始檔包含多少空白與註解。額外的節省來自伺服器層級的 gzip 壓縮。

壓縮器支援 CSS 自訂屬性（變數）嗎？

是。CSS 自訂屬性（--my-var: value）在壓縮期間會完全按原樣保留。