CSS 美化

將緊湊的 CSS 格式化為可讀取的規則、選擇器和聲明。

輸入
輸出
0 字元 0 行

使樣式表更易於閱讀和審查

CSS 美化 將緊湊的 CSS 擴展為可讀的選擇器、聲明區塊、屬性和值。 它有助於偵錯複製的樣式、檢查產生的 CSS、檢查框架輸出或準備範例。

美化改變佈局，而不是級聯語義。選擇器順序、重複聲明、自訂屬性、註釋、媒體查詢和圖層順序應保持不變，因為這些細節可能會影響最終樣式。

使用方法

  1. 將 CSS 程式碼貼到輸入編輯器中。
  2. 按一下 美化 CSS 以重排規則和聲明。
  3. 檢查輸出中保留的選擇器順序、註解和 at 規則。
  4. 使用 複製 作為剪貼簿，使用 下載 作為文件，或使用 清除 進行重置。

什麼是CSS美容儀？

CSS 美化 是一個基於瀏覽器的實用程序，用於使樣式表更易於掃描。它將規則區塊和聲明分開，以便您可以檢查選擇器、屬性、值和 at 規則，而無需讀取密集的一行檔案。

CSS 行為取決於級聯順序、特異性、繼承、層和自訂屬性解析。格式化不應重新排序規則或聲明；驗證瀏覽器中重要的樣式表變更。

輸入說明

僅貼上 CSS，包括 @media、@supports 和 @layer 等 at 規則。將輸出複製回項目時，保持選擇器和宣告順序不變。

範例

一旦每個聲明都放在自己的行上，密集的 CSS 就變得更容易掃描：

--- Minified Input ---
body{margin:0;padding:0;font-size:16px;}.container{max-width:1200px;}

--- Beautified Output ---
body {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.container {
  max-width: 1200px;
}

MCP 整合

MCP（Model Context Protocol，模型上下文協議）讓 AI 代理和應用可以探索並呼叫 Coding.Tools 工具，用於可重複的轉換、格式化、雜湊和產生工作流程。

MCP 工具名稱: css-beautifier

MCP 端點: https://coding.tools/mcp

請先呼叫 tools/list。每個工具項目都包含 inputSchema、outputSchema 和 examples，AI 代理或客戶端可據此建立有效參數，不需要猜測。

呼叫 tools/call 後，result.content[0].text 是顯示用結果，result.structuredContent 是適合程式解析的結構化結果。工具層級失敗會回傳 isError: true；協議層級失敗會回傳 JSON-RPC error。

tools/call 請求範例：

curl -s https://coding.tools/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json" \
  -H "MCP-Protocol-Version: 2025-06-18" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"css-beautifier","arguments":{"input":".button{color:white;background:#3366cc;padding:8px 12px;}"}}}'

大多數文字與資料工具接受 input 字串以及可選的 options。只依賴瀏覽器圖片 API 的圖片工具會用於探索，並在需要瀏覽器能力時返回網頁入口。