CSS 美化與壓縮工具

原始 CSS

選項

美化後的 CSS

相關工具

HTML 美化/壓縮格式化或壓縮 HTMLJavaScript 美化/壓縮格式化或壓縮 JavaScriptJSON 格式化格式化和美化 JSON 數據

關於此工具

CSS 美化與壓縮工具是一個全面的 CSS 代碼格式化和優化工具。無論您是在調試第三方 CSS、為生產環境優化樣式表，還是維護大型代碼庫，乾淨且格式良好的 CSS 對於可讀性和性能都至關重要。此工具可以立即將壓縮的 CSS 美化為具有適當縮排的可讀格式，或將開發 CSS 壓縮以減小檔案大小，加快頁面載入速度。進階功能包括屬性排序（按字母順序組織以保持一致性）、顏色優化（縮短十六進位代碼，如 #ffffff 變為 #fff）、媒體查詢排序（按從小到大的斷點組織）以及語法驗證以捕獲缺失的大括號或分號。所有處理都在瀏覽器客戶端進行——不會將任何 CSS 上傳到伺服器，因此對生產樣式表和客戶專案是安全的。

使用方法

    • 將 CSS 貼上或輸入到輸入面板中
    • 選擇模式：選擇美化以使用適當的縮排（2 個空格、4 個空格或製表符）格式化壓縮或混亂的 CSS，或選擇壓縮以用於生產
    • 即時驗證：工具突出顯示語法錯誤（未閉合的大括號、缺失的分號、無效的屬性）
    • 進階選項：
      • 屬性排序：在每個規則內按字母順序組織 CSS 屬性（提高 Git diff 可讀性）
      • 顏色優化：縮短顏色代碼（#ffffff → #fff，rgb(255,0,0) → #f00）
      • 媒體查詢排序：從最小到最大斷點重新排序 @media 查詢
      • 壓縮級別：正常（安全）或激進（最大壓縮）
      • 保留註解：保留或刪除代碼註解
    • 適用於 CSS3、供應商前綴、CSS 變數、嵌套選擇器和 @supports/@media 規則

常見用例

    • 生產優化：將網站的 main.css 從 150KB 壓縮到 110KB——節省的每一千位元組都能改善頁面載入時間，尤其是在移動網路上
    • 調試第三方 CSS：美化壓縮的 Bootstrap 或 Tailwind 輸出，以了解正在套用的樣式並查找衝突
    • 代碼審查：在提交 CSS 更改之前，美化並按字母順序排序屬性，以便 Git diff 僅顯示有意義的更改，而不是格式差異
    • 維護遺留代碼：繼承了一個 CSS 格式不一致的專案？使用一致的縮排美化所有檔案以提高可讀性
    • 學習 CSS：學生可以貼上複雜的 CSS 範例並美化它們以理解結構、特異性和級聯規則
    • CSS 變數管理：按字母順序組織 :root 變數，以便在設計系統中更輕鬆地維護

限制和重要說明

    • 不支援：
      • CSS 預處理器（SCSS、SASS、LESS、Stylus）——請先編譯
      • CSS-in-JS 語法（styled-components、emotion）
      • 擴展語法的 PostCSS 插件
    • 性能：非常大的樣式表（>5MB）可能導致瀏覽器減速——使用命令列工具如 csso 或 clean-css 進行批處理
    • 需要審查的邊緣情況：
      • CSS hack（IE 特定過濾器）
      • 內容屬性中的故意空格
      • 非常舊的專有屬性可能導致警告
    • 屬性排序：純粹按字母順序——不針對 CSS 特異性或級聯順序優化
    • 媒體查詢排序：假定 min-width 斷點；具有 max-width/方向的複雜查詢可能無法按預期排序
    • 重要：始終在生產中徹底測試壓縮的 CSS——自動化無法捕獲所有邊緣情況