使用方式

將 CSS 貼到輸入框、開啟 .css 檔案，或試用範例。
選擇 Beautify 取得易讀程式碼，或選擇 Minify 取得最小輸出。
美化排版時，可選擇 2 個空格、4 個空格或 Tab。
複製結果，或下載為 .css 檔案。如果大括號或引號未成對，錯誤會顯示行與欄。

運作方式

格式化工具會先將樣式表分割成 token：單引號或雙引號字串、url(…) 值、註解、大括號與分號。由於字串和 url() 都是單一 token，因此 data URI 中的分號，或 content: "{ }" 中的大括號不會干擾結構，而其內容會原樣複製。

Beautify 會將選擇器清單中的每個選擇器各自放一行，在子代、兄弟與相鄰組合器（>、~、+）前後加上空格，並將每個宣告以「property: value;」寫成獨立一行。@media、@supports、@layer、@container 與原生 CSS 巢狀內的區塊，每一層縮排一級。區塊最後一個宣告若缺少分號，會自動補上。註解保留原位。

Minify 會移除註解（但保留 /*! … */ 授權聲明）、收縮空白、移除大括號、冒號、分號、逗號與選擇器組合器前後的空格，並移除每個結束大括號前的分號。會保留影響意義的空格：例如「.a .b」中的後代組合器、「a :focus」中的空格，以及 calc(100% - 2px) 等值內的空格。「! important」會正規化為「!important」。

此工具不會改寫值：顏色、單位與零會保持原樣，規則不會合併或重新排序。僅使用一般巢狀的 SCSS 或 Less 檔案通常可用，但 // 行註解或 mixin 等自有語法無法解析。

範例

閱讀已壓縮的框架檔案

貼上一段單行的 bootstrap.min.css 內容，選擇以 2 個空格 Beautify，即可看到每條規則、媒體查詢及其巢狀規則分行並縮排顯示。

交付手寫樣式表

在將樣式表內嵌至郵件範本或頁面 head 之前，先為含有註解與縮排的 12 KB 樣式表執行 Minify。摘要會顯示前後字元數。

找出缺少的大括號

樣式表套用到一半就停止套用。格式化工具會回報「This { is never closed with a matching }」，並指出缺少結束大括號的規則所在行。

常見問題

使用此工具壓縮後的 CSS 是否可安全用於正式環境？

它只會移除 CSS 忽略的註解與空白，因此規則行為不變。它不會進行建置工具那類更深入的最佳化，例如合併規則或縮寫色彩，因此結果可能比它們稍大。

為什麼「a :focus」中保留了一個空格？

在選取器中，空格是後代組合器。「a :focus」代表連結內取得焦點的元素，而「a:focus」代表取得焦點的連結。移除該空格會改變符合條件的元素。

它可以格式化 SCSS 或 Less 嗎？

一般巢狀規則可正確格式化。前置處理器專用語法（例如 // 註解、帶引數的 mixin 或 @if 區塊）無法解析，可能排版異常，請檢查結果。

壓縮時會移除授權註解嗎？

隱私權

您的 CSS 只會在您的瀏覽器中處理，不會上傳、儲存或用於分析。