CSS 壓縮工具

CSS 壓縮工具會從樣式表中移除註解並摺疊空白，以縮小正式環境的檔案體積——更小的下載量，更快的解析和轉譯速度。貼上可讀的 CSS，立即取得精簡的輸出，並提供即時的前後體積比較和可調整的壓縮等級。

• •空白摺疊：具備引號和註解辨識能力的壓縮器會移除空格、換行和空行，同時保持字串內容不變
• •註解移除：移除 /* ... */ 註解，或透過保留註解開關保留它們——例如保留授權標頭
• •顏色最佳化：在通道允許的情況下，將 6 位十六進位顏色和 rgb() 值縮短為 3 位十六進位簡寫
• •壓縮等級：一般模式執行安全的空白、註解和顏色壓縮；積極模式還會移除多餘的前導零（0.5px → .5px），並移除零值長度中的數字（0px → 0）
• •體積比較：並排查看原始體積、壓縮後體積和百分比縮減
• •可下載輸出：直接將壓縮結果儲存為 .css 檔案

• •在部署到正式環境前壓縮樣式表以減少頁面載入時間
• •準備一小段 CSS 以內嵌方式嵌入 <style> 標籤或 HTML 郵件而不使其臃腫
• •在建立完整的 PostCSS 或建置流程之前，快速檢查樣式表能縮小多少
• •為 CodePen、gist 或靜態原型壓縮一次性樣式表，這些場景中建置步驟並不實際
• •在 Core Web Vitals 或 Lighthouse 稽核中將壓縮後的體積與效能預算進行比較

1. 1.將 CSS 貼到輸入編輯器，或上傳 .css 檔案
2. 2.選擇一般或積極壓縮，並決定是否保留註解
3. 3.壓縮後的輸出和體積縮減百分比會自動顯示
4. 4.複製輸出或下載為 .css 檔案
5. 5.在部署前檢查前後位元組數以確認體積節省

• •積極去零處理（0px → 0）對長度單位是安全的，但會跳過字串和註解內容，並且不會觸碰 calc() 表達式內部的運算
• •帶引號字串內的空白——font-family 名稱、content: "..."、url() 路徑——始終會被精確保留；只有字串和註解之外的結構性空白才會被移除
• •此壓縮工具不會重新命名類別、合併重複選擇器或移除未使用的規則——這些需要像 cssnano 或 PurgeCSS 這樣整合於建置工具的最佳化工具

• •這是空白、註解和顏色的壓縮，而非完整最佳化——要實現最大體積縮減（選擇器合併、重複規則移除、未使用 CSS 消除），請使用整合於建置工具的壓縮工具，如 cssnano 或 PurgeCSS
• •壓縮後的輸出會失去全部可讀性——請始終將原始原始碼保留在版本控制之下
• •非常大的樣式表在瀏覽器中完全處理可能較慢——對於正式環境建置流程，請將壓縮整合到 PostCSS 或你的打包工具中，而不是使用一次性的瀏覽器工具

如果你有壓縮過的 CSS 需要閱讀或除錯，請改用 CSS 美化工具。它會恢復縮排、排序後的屬性和一致的間距，讓樣式表真正可讀。