什麼是CSS壓縮工具？

CSS Minifier 透過移除空白、註解和冗餘語法來壓縮您的 CSS 程式碼。檔案更小，下載更快，PageSpeed 分數也更高。

底層使用 CSSO 演算法,不只是刪空白。它會合併相鄰的同選擇器規則,去除多餘的簡寫(margin: 10px 10px 10px 10px 變成 margin: 10px),清掉用不上的廠商前綴,還會把能寫成三位數的十六進位色從六位壓成三位。

使用方法

1. 將 CSS 程式碼貼到輸入區域、上傳 .css 檔案，或直接依網址載入樣式表。
2. 點擊壓縮按鈕——工具會自動移除註解、空白並簡化屬性值。
3. 複製壓縮後的輸出或下載為 .css 檔案，同時查看顯示的壓縮比。

何時使用

• 把靜態網站的樣式表上線,而專案沒有 build 流程。
• 比較兩個版本的樣式表,看手寫程式碼裡藏了多少冗餘。
• 將關鍵 CSS 直接內嵌到 HTML head 時,擠出最後幾位元的容量。

結果

一個 24KB 含註解和格式化的樣式表，壓縮後僅 16KB——減少 33%，在 3G 網路下可節省約 50ms 載入時間。

常見問題

壓縮後的 CSS 在瀏覽器渲染上會不一樣嗎?

瀏覽器解析壓縮和格式化 CSS 完全一致,層疊、優先級、計算值都不變。差別只是檔案在磁碟與網路傳輸上更小。

壓縮後還需要再 gzip 嗎?

需要。在壓縮之上再加 gzip 可再省 60-80%。多數 CDN 會自動套用 gzip。先壓縮仍有意義,因為 gzip 擅長壓縮重複樣式,而壓縮後的 CSS 重複更多。

壓縮會破壞我的 source map 嗎?

本工具不產生 source map,因為它只處理單一 CSS 字串,不是整個 build 圖。若需要 map,請用 esbuild 或 Vite 等工具,它們會在輸出壓縮 CSS 的同時產出 .css.map。

為什麼壓縮後還是殘留一些空白?

CSS 在字串值內、選擇器各部分之間(.a .b 和 .a.b 不一樣),以及 calc() 運算式內,空白是有語意的。工具只移除沒有語意需求的空白。

使用 CSS 變數(自訂屬性)的樣式表可以放心壓縮嗎?

可以。自訂屬性的名稱與值保留原樣,工具只壓縮周圍格式。像 --brand-color 這種變數會原封不動,讓 var() 呼叫照常運作。

相關工具