CSS 壓縮器 - 免費線上開發工具

← ToolBox / CSS 壓縮器

📖 檢視「CSS 壓縮器使用指南」

🗜️ CSS Minifier

CSS Minifier - Strip comments and redundant whitespace to shrink CSS for faster loads, preserving semantics. Free, browser-only.

📐 工作原理與說明

壓縮 CSS 以減小檔案體積。

手段：去註釋與空白、刪除冗餘分號、把 0px 簡寫為 0、縮排顏色值。
合併：可合併等價宣告與簡寫屬性（如 margin 四值合併）進一步減小體積。
風險：過度合併可能改變層疊與優先順序，壓縮後必須做視覺迴歸。
建議：整合進構建流程併產出 source map，便於線上問題定位。

貼上 CSS

⚠️ 使用說明與注意事項

壓縮僅去註釋與空白，不改變選擇器與宣告語義；但會移除 source map 關聯與可讀性，釋出版勿保留源註釋。
本工具不重寫屬性（如合併 0px→0），屬於「安全壓縮」；激進壓縮（變數內聯、自動字首）需交給構建工具（cssnano/esbuild）。
生產環境應同時開啟 Gzip/Brotli，文本壓縮對 CSS 收益最大。

📋 說明

壓縮後請本地預覽效果是否一致；涉及 content 偽元素裡特殊空格時，過度去空白可能需謹慎。本工具保留宣告間必要空格。

📚 深度解析：CSS Minifier

💡 常見使用場景

與 css-minifier 同類，去空白壓縮。
把內聯在 HTML 裡的 <style> 塊壓縮後再嵌入，減少文件體積，適用於關鍵 CSS 內聯最佳化首屏渲染。

壓縮

註釋與多餘空白移除，體積常降 20–50%。

❓ 常見問題（FAQ）

壓縮會刪註釋嗎？: 會，含版權註釋如需保留用特殊標記。
壓縮會破壞 @media 或 @supports 嗎？: 正常的壓縮器會完整保留 at-rule 及其巢狀塊，不會破壞。風險來自兩處：一是壓縮器對現代語法（如 @layer、原生巢狀）支援滯後；二是 CSS hack（如 *height）可能被當作無效宣告刪除。壓縮後應在目標瀏覽器實測關鍵樣式。