🗜️
免費CSS 壓縮與美化工具
壓縮 CSS 以減小檔案體積，或美化壓縮後的 CSS 以提高可讀性。即時，在瀏覽器中完成。
載入後可離線使用
或把 .css 檔案拖到下方
把 .css 檔案拖到這裡，或點選選擇檔案
CSS · 無強制大小限制
或按 Ctrl+V 從剪貼簿貼上
輸入 CSS
輸出 CSS
輸出將顯示在此處…
工作原理
此工具使用完全用 JavaScript 建立的手寫零依賴 CSS 分詞器——沒有外部庫、沒有伺服器呼叫。分詞器在應用任何轉換之前，會將每個字元分類為程式碼、註解、引號字串或 url() 值，從而防止空白規則破壞字串內容、data URI 或 calc() 表示式。
- 1分詞階段輸入的 CSS 逐字元掃描並拆分為型別化的記號：原始程式碼片段、/* ... */ 註解、引號字串（保留跳脫序列）和 url(...) 塊。這確保下一步的轉換隻作用於真正的 CSS 語法——絕不會觸及字串字面量或 data URI 的內容。
- 2壓縮或美化在壓縮模式中，普通註解會被刪除（保留 /*! license */ 註解），程式碼記號中連續的空白壓縮為單個空格，{ } : ; , > ~ 等標點周圍的空白會被移除。+ 和 - 周圍的空格被刻意保留，以免破壞 calc() 表示式。在美化模式中，程式碼先被壓縮為乾淨的基線，再重新分詞並以兩個空格的深度追蹤重新縮排，同時檢測宣告冒號，以區分 property: value 中的冒號和 a:hover 這樣的選擇器冒號。
- 3Gzip 大小估算產生輸出後，使用瀏覽器原生的 CompressionStream API 以 gzip 壓縮結果並測量位元組數。這能給出與啟用 gzip 壓縮的 Web 伺服器在網路上實際傳輸大小相符的估算。
- 4複製或下載處理後的 CSS 透過 Clipboard API 寫入剪貼簿，或使用 MIME 型別為 text/css 的 Blob 下載為 styles.min.css（壓縮模式）或 styles.css（美化模式）。輸入時會即時顯示體積縮減百分比。