免費註冊

CSS 壓縮

貼上 CSS 得到更小的檔案，壓縮前後大小和減小的百分比實時顯示。

關於CSS 壓縮

CSS 壓縮把樣式表裡瀏覽器用不到的內容去掉，網頁載入能快一點，也能少佔一點流量。沒有構建工具的時候最常用：WordPress 子主題、靜態落地頁、要粘進建站後臺的一段樣式。把 CSS 貼進來或開啟檔案，壓縮結果隨輸入實時出現，同時顯示壓縮前後的大小和節省的百分比。網站裡的指令碼檔案，也可以用JS 壓縮壓小。

註釋和空白都會去掉，每條規則最後一個分號也會刪掉；#ffffff 縮成 #fff，0px 縮成 0。以 /*! 開頭的版權註釋會保留，版權宣告不會丟。引號裡的字串和 url() 裡的路徑不做任何改動，圖片、字型地址不會出錯。原始檔案請留著方便以後修改，萬一丟了，可以用 CSS 格式化把壓縮過的 CSS 展開。程式碼只在瀏覽器裡處理，不上傳，也不佔每日次數。

CSS 壓縮怎麼用

  1. 1
    貼上 CSS

    貼上樣式程式碼，或開啟本地 CSS 檔案。

  2. 2
    看節省多少

    CSS 壓縮結果實時出現，顯示壓縮前後的大小和減小的百分比。

  3. 3
    複製或下載

    複製壓縮後的 CSS，或下載成檔案。

為什麼用熊仔工匠

  • 去註釋去空白

    瀏覽器用不到的內容全部去掉，/*! 版權註釋除外。

  • 數值更短

    #ffffff 變成 #fff，0px 變成 0，規則末尾的分號刪掉。

  • 字串不動

    引號裡的文字和 url() 路徑原樣保留。

  • 前後大小對比

    複製之前就能看到壓縮前後的大小和減小的百分比。

常見問題

CSS 壓縮常見問題

CSS 壓縮後網頁樣式會變嗎？
不會。只去掉註釋、空白和多餘字元，#fff 和 #ffffff 是同一個顏色；字串和 url() 不做改動。
版權註釋會被刪掉嗎？
寫成 /*! … */ 的註釋會保留，這是標記必須保留的版權宣告的通用寫法；其他註釋都會刪掉。
CSS 能壓縮多少？
要看檔案裡有多少空白和註釋。貼上後就會顯示壓縮前後的大小和節省比例，一看便知。
壓縮了 CSS 還要開 gzip 嗎？
要。程式碼壓縮和伺服器的 gzip、Brotli 壓縮效果可以疊加；伺服器有沒有壓縮 CSS，可以用“網頁壓縮檢測”查。
CSS 程式碼會上傳嗎？
不會。壓縮在瀏覽器裡完成，不用註冊，也不佔每日次數。
把CSS 壓縮分享給朋友開啟瀏覽器就能用，對方不註冊也能先試。

相關工具

HTML HTML 格式化把雜亂的 HTML 按層級縮排，一目瞭然。
JS JS 格式化美化壓縮過或排版混亂的 JavaScript。
HEX 色碼轉換顏色在 HEX、RGB、HSL、CMYK 之間互轉，並檢查對比度。
CRON Cron 表示式生成與解析生成 Cron 表示式，用大白話說明含義並列出接下來的執行時間。
CSS CSS 格式化把壓縮過的 CSS 還原成整齊易讀的樣式。
HTML HTML 壓縮去掉註釋和多餘空白，壓縮 HTML。
HTTP 線上 HTTP 請求測試向公開的介面傳送 GET、POST 等請求，檢視返回結果。
JS JS 壓縮去掉 JavaScript 的註釋和空白，不改變執行結果。