CSS 壓縮工具

壓縮 CSS 檔案

在網頁渲染之前，必須下載並解析 CSS 的每個位元組，因此較小的樣式表代表更快的首次繪製 (First Paint)、更好的網站核心指標 (Core Web Vitals) 以及更少的行動數據用量。這款 CSS 壓縮工具會去除空白與註解，並進行結構最佳化——合併重複的規則、縮短顏色代碼、移除多餘的數值——讓您的樣式表在不改變網頁外觀的前提下，盡可能縮小體積。

功能特色

• 移除空白與註解。
• 縮短數值：顏色代碼、零、單位與字體粗細。
• 結構最佳化：合併重複的選擇器並移除被覆蓋的宣告。
• 依需求保留授權註解 (/*! … */)。
• 大小比較：以位元組與百分比顯示。
• 注重隱私：完全在您的瀏覽器中執行。

壓縮前後對比

.card .title {
  font-weight: bold;
  color: #333333;
}
.card .title {
  font-size: 1.25em;
}

轉換為

.card .title{font-weight:700;color:#333;font-size:1.25em}

何時需要壓縮

在正式環境的建置過程中壓縮 CSS，並將易於閱讀的原始碼保留在版本控制中。大多數的框架與打包工具都會自動執行此步驟；這款工具非常適合用於快速修正、CMS 佈景主題、電子郵件範本、嵌入式小工具，以及沒有建置步驟的專案。

相關工具

使用 JavaScript 壓縮工具 壓縮指令碼，透過 Box Shadow 產生器 與 CSS 漸層產生器 視覺化建立樣式，或是使用 JSON 格式化工具 來排版 JSON。