Dev Tools
CSS 壓縮與格式化 – 免費線上工具
直接在瀏覽器中壓縮或美化 CSS。移除註解與空白,縮小檔案大小。
檔案絕不儲存即時完成無需註冊
🔒 您的檔案不會離開瀏覽器。所有處理都在本機完成。
如何線上壓縮 CSS
- 1
貼上 CSS
將 CSS 程式碼貼到輸入框,或直接輸入。
- 2
選擇壓縮或美化
點選「壓縮 CSS」可縮小程式碼,點選「美化 CSS」則會以一致的縮排重新排版。
- 3
複製結果
輸出結果會顯示在右側,點選「複製」即可複製到剪貼簿。
CSS 會阻擋畫面渲染:瀏覽器必須先下載並解析 head 中所有樣式表,才能顯示任何內容。因此即使只有幾 KB,也會拖慢 First Contentful Paint,在行動網路上尤其明顯。壓縮 CSS 是成本最低的最佳化方式,不需要建置流程,也不用修改程式,只要得到一個更小、外觀完全相同的檔案。
被移除的內容包括:註解、縮排、換行、大括號與冒號前後的空白,以及每個右大括號前最後一個分號。選擇器、屬性名稱與屬性值完全不會被更動,所以壓縮後的 CSS 與原始檔的行為完全一致。「美化」則相反:把正式環境的樣式表還原成縮排整齊、容易閱讀的規則。
如果樣式表偏大是因為有許多未使用的規則,而不是空白,壓縮能節省的有限;請先在建置時移除用不到的選擇器。至於其他資源,JS 壓縮工具與 HTML 壓縮工具則以相同的概念處理腳本與標記。