免費轉換器

CSS 壓縮工具

在瀏覽器中即時壓縮CSS樣式表。刪除註解、折疊空白、縮小檔案大小。免費且私密。

將CSS檔案拖放至此

支援.css檔案,或在上方貼上CSS程式碼。

關於此工具

CSS 縮小會從樣式表中刪除空格、註釋和不必要的字符,以在提供給瀏覽器之前減少其大小。實際的規則沒有改變:縮小的樣式表以與未縮小的來源相同的方式呈現頁面。節省的成本來自於刪除換行符、多餘的分號、註釋、十六進位顏色速記機會和零單位快捷方式(用 0 替換 0px)。

在具有數十種樣式規則的現代網站上,與未縮小的來源相比,典型的減少量為 20-40%。與伺服器上的 gzip 壓縮相結合,邊際節省會縮小——gzip 已經有效地壓縮了重複的文字——但這種組合仍然勝過單獨的壓縮,特別是當樣式表被緩存並多次提供給許多訪客時。

這個壓縮器一次處理 CSS,刪除 url() 值之外的註釋,折疊空白,刪除右大括號之前的多餘分號,應用零單位速記,並在可能的情況下將六位十六進制顏色轉換為三位數形式(#ffffff → #fff)。輸出仍然有效,任何瀏覽器都可以正確解析。

為什麼要縮小 CSS

較小的 CSS 檔案載入速度更快,渲染阻塞時間也會減少,這兩者都會提高「首次內容繪製」和「最大內容繪製」分數。對於 Core Web Vitals 影響搜尋排名的網站來說,削減每一千位元組的渲染阻塞 CSS 都是值得的。

頻寬成本在規模上也很重要。當樣式表縮小 30% 時,提供數百萬頁面瀏覽量的網站可以節省可觀的出口量。 CDN 帳單、行動數據使用量和能源消耗均略有受益。縮小本質上是免費的——一次性建造步驟,無需維護成本。

使用方法

貼上CSS,得到縮小版。

  1. 貼你的CSS: 將 .css 檔案拖曳到輸入區域或將 CSS 來源貼到輸入區域。縮小器接受任何有效的 CSS — 現代語法,包括 CSS 變數、calc()、grid 和 flexbox。
  2. 選擇選項: 預設值會刪除註解、折疊空格並套用常見的捷徑。如果需要保留註解或特定格式,您可以停用特定轉換。
  3. 縮小: 縮小器遍歷 CSS,應用每個啟用的轉換。輸出是功能相同的 CSS,但尺寸減少了。
  4. 使用輸出: 複製或下載。將建置輸出中的來源 CSS 替換為縮小版本,或將縮小作為工具中的建置步驟運行。

常見用例

技術細節

CSS 縮小主要是保守的空白刪除。選擇器、聲明和值中重要的空白會被保留;外部的空白被折疊。註釋除非以 /* 開頭,否則將被刪除! (許可證保存評論)。

常用快捷鍵:0px、0em等類似的零單位值變為0;帶有配對數字的六位十六進制顏色(#ffffff、#336699)變為三位數(#fff、#369); } 之前的最後一個分號被刪除。顏色名稱不會自動轉換為十六進制,因為十六進制有時會更長(紅色的長度比 #f00 短;#ff0000 比紅色長)。

輸出應該通過任何接受輸入的 CSS 驗證器。瀏覽器支援保持不變-縮小不會修改規則本身,只會修改它們的文字表示形式。

最佳實踐

常見問題

CSS 縮小會刪除什麼?
空格(空格、製表符、換行符)、註釋 (/* ... */)、不必要的分號、冗餘零 (0.5 → .5)、速記優化 (#ffffff → #fff) 和冗餘單位 (0px → 0)。
縮小版 CSS 在生產中使用安全嗎?
是的。縮小保留所有 CSS 規則、選擇器和屬性值。輸出在功能上是相同的——瀏覽器以完全相同的方式解釋它。這是所有生產網站的標準做法。
我預計尺寸會減少多少?
對於編寫良好的 CSS,通常為 20-50%。帶有詳細格式的大量註解程式碼可以看到更大的減少。已經緊湊的 CSS 可能只會縮小 10-15%。
如果我使用 gzip,我應該縮小 CSS 嗎?
是的,兩者都有。 Gzip 壓縮重複的模式,而縮小則刪除不必要的字元。它們一起提供比單獨使用更好的壓縮效果。縮小 + gzipped CSS 通常比原始檔案小 85-95%。
我應該總是縮小嗎?
對於生產來說是的。對於開發原始檔來說,沒有-可讀的CSS對於維護來說是必不可少的。在建置時運行縮小,而不是在編輯時運行。
我的 CSS 是否已上傳到伺服器?
不會。壓縮器在您的瀏覽器中運作。
這與 cssnano 或 csso 相比如何?
cssnano 和 csso 是用於生產建置的 PostCSS 外掛程式;它們提供了更積極的轉換,例如合併冗餘規則。該工具涵蓋了無需建置設定即可臨時使用的基本縮小。
縮小會破壞來源映射嗎?
縮小不會產生來源映射;該工具僅產生最小化的輸出。若要在生產中偵錯縮小的 CSS,請在建置過程中產生來源映射。