開發者工具 / 16

CSS格式化與美化工具

將CSS規則、選擇器清單和屬性宣告格式化、縮排並展開為易讀的程式碼。

CSS格式化與美化工具: TOEA會解析CSS規則、媒體查詢和宣告，統一屬性間距與區塊縮排。全程在瀏覽器中於本機執行，檔案不會上傳至伺服器。

分類: 開發者工具
使用次數: 在瀏覽器中
費用: 免費・免註冊
可用狀態: 可立即使用

CSS 格式化與美化工具本機處理

全程在瀏覽器中執行

美化後的CSS輸出

body {
  font-family: system-ui,sans-serif;
  line-height: 1.5;
  color: #333;
  margin: 0;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: #f8f9fa;
}

.header a {
  color: #0066cc;
  text-decoration: none;
}

.header a:hover {
  text-decoration: underline;
}

@media (max-width:600px) {
  .header {
    flex-direction: column;
    padding: 1rem;
  }
}

閱讀他人的樣式表

格式化壓縮檔案會讓它更容易閱讀，但不會還原成原始來源：壓縮工具會合併規則並重新排列宣告，因此請預期會看到群組選取器和簡寫值。若要找出哪個規則套用了元素，瀏覽器的開發人員工具更快，而其 Sources 面板可直接將壓縮檔案美化格式。將樣式表的兩個版本格式化後，在差異檢查工具中比較，即可看出更新修改了哪些內容。

格式化不會改變什麼

格式化工具會加入縮排和空格；不會排序屬性、修正拼錯的屬性名稱、加入廠商前綴，或移除重複宣告，因此colour: red會原樣保留。所有空白字元序列都會被合併，包括引號字串內的空白，因此請檢查依賴多個空格的content值。檔案準備發布時，請使用CSS 壓縮器再次壓縮。

使用方式

貼上原始或壓縮過的CSS程式碼。
選擇2格或4格縮排。
點選「格式化CSS」，然後複製或下載結果。

隱私與限制

所有CSS格式化作業都會在您的瀏覽器中本機執行。

常見問題

支援@media查詢嗎？

支援，巢狀at-rule和媒體查詢會以正確的縮排格式呈現。

會修改色碼或選擇器嗎？

不會，格式化只會調整空白、縮排和結構，不會變更屬性值。

免費工具・使用在瀏覽器中次・免註冊