CSS 格式化工具

輸入 CSS

縮排大小：

輸出結果

行數: 1字元數: 0字節數: 0

行數: 1字元數: 0

什麼是 CSS 格式化？

CSS 格式化工具會把樣式表整理成一致、清楚、便於閱讀的結構。選擇器、宣告、媒體查詢、關鍵影格、變數和前處理器輸出會比壓縮或縮排混亂的程式碼更容易檢查。它適合除錯、程式碼審查、設計系統維護、教學，以及理解從其他來源複製來的樣式。格式化不會自動改變層疊、優先級、繼承或瀏覽器相容性。看起來很小的一條規則，如果載入順序靠後或選擇器很強，仍可能造成很大影響。正式環境修改還應檢查響應式狀態、視覺回歸、lint、建置輸出和元件上下文。

使用方法

使用方式

在左側輸入框貼上或輸入 CSS 程式碼
選擇縮排大小和格式樣式
點選「格式化」美化程式碼，或點選「壓縮」減少大小
於右側檢視帶有語法突顯的結果
點選「複製」將結果複製到剪貼簿

格式樣式選項

展開每個屬性獨佔一行，適合開發與除錯

壓縮選擇器與屬性在同一行，適合快速瀏覽

鍵盤快捷鍵

Ctrl + Enter格式化
Ctrl + Shift + C複製結果

格式化技巧

格式化只會改變空白與排版，不會改變選擇器行為；編輯複雜的層疊或 media-query 程式碼後仍需測試樣式表。
僅在輸出用於傳輸或嵌入時才進行壓縮。保留一份可讀的來源副本以供審查與維護。

使用場景

將壓縮的 CSS 轉為可讀的規則從打包檔、CMS 欄位、瀏覽器開發工具或郵件範本貼上 CSS，以 2 空格、4 空格或 Tab 格式化，讓選擇器、宣告和巢狀的 media 區塊更容易檢視。展開後，規則順序也變得可稽核，有助於追蹤層疊覆寫或延遲觸發的 media query。

壓縮編輯後的 CSS 以便快速交接修改程式碼片段後切換到壓縮模式，移除註解和不必要的空白，然後複製或下載結果作為 CSS 檔案，快速嵌入郵件範本、CodePen 原型或靜態頁面。先格式化可讀版本以便清楚標示哪些選擇器已變更，並使用 stylelint 或專案 linter 驗證壓縮結果，因為壓縮不會檢查選擇器特異度、重複屬性或非預期的層疊覆寫。

適用於片段處理，不保證完整的 CSS 解析格式化器是一個輕量級的瀏覽器實作，能保留引號字串、url() 內容和宣告內的註解，但無法取代完整的 PostCSS 管線處理供應商語法、source map、lint 或正式環境建置驗證。先將 Sass、Less 或 CSS Modules 編譯為純 CSS，再透過本工具進行檢視快照；正式環境檢查請依賴 stylelint、PurgeCSS 或 CSS 稽核工具。

規範化供應商前綴或預處理器輸出格式化從 Sass、Less 或 PostCSS 編譯的輸出，讓 -webkit-、-moz- 和 -ms- 前綴對齊，在程式碼審查時一眼就能看出 media query 的層疊順序。展開後的區塊也讓巢狀的 @supports 或 @container 規則在稽核層疊優先權時更容易發現。

選擇符合專案風格指南的縮排寬度預先選擇 2 空格、4 空格或 Tab，讓格式化後的片段可以直接放入程式碼庫而不需要再跑一次 linter，這在貼入共用的設計系統檔案時特別重要。兩空格通常能保持深層巢狀的可讀性，Tab 則讓每位貢獻者自行選擇視覺寬度。

技術原理

CSS 格式化是一個詞法分析 + 美化列印的問題，而非完整解析。符合規範的 CSS 解析器（CSS Syntax Module Level 3，W3C 建議書）比格式化器所需的更重：它會建構包含樣式規則、at 規則、宣告和元件值的 AST，並處理解析邊界情況（未終止的字串、不匹配的大括號、供應商前綴屬性）。本頁面使用較輕量的詞法分析器，掃描字元流，辨識相同的詞法單元類別（識別碼、at 關鍵字、雜湊值、字串、壞字串、數字、尺寸、百分比、url、函式、標點符號、註解），將它們輸出為平坦列表，然後美化列印器根據選定的縮排、大括號風格和空白規則重新組裝這些詞法單元。 CSS 中的兩個結構單位是規則區塊（selector { declarations }）和 at 規則區塊（@media、@supports、@container、@keyframes 包裹一個或多個規則區塊）。格式化器遍歷詞法單元流並追蹤大括號深度：遇到 `{` 時深度遞增（後接換行 + 縮排），遇到 `}` 時深度遞減（縮排縮小至匹配的 `{` 層級）。選擇器原樣輸出——格式化器不解析選擇器，因為解析如 `.foo > .bar:hover:not(.baz)` 的選擇器是另一個問題（CSS Selectors Level 4）。選擇器逐位元組保留，僅正規化空白（多個空格合併為一個，移除尾部空白），因此壓縮的 `.a,.b,.c` 會變為 `.a, .b, .c`。宣告以選定風格格式化：'expanded'（每個屬性獨佔一行，最具可讀性）、'compact'（一個規則一行，多個宣告打包，正式環境 CSS 最常見）、'compressed'（壓縮，完全無空白，最小輸出）。屬性名稱後的冒號始終跟隨一個空格；值除了少量正規化外原樣輸出（`0.500` 去除尾部零變為 `.5`、`0px` 移除單位變為 `0`，這些是經典的 CSS 壓縮技巧）。壓縮是反向操作：移除註解、折疊宣告內及宣告間的空白、移除區塊中最後一個宣告後的尾部分號（依 CSS 2.1 §4.1.7 合法）、合併相同選擇器和相同 media 上下文的相鄰規則區塊、正規化顏色值（`#ffffff` -> `#fff`、`rgb(255,255,255)` -> `#fff`，如可行）。現代壓縮工具（cssnano、lightningcss、clean-css）還會進行結構最佳化：將獨立屬性合併為簡寫（`margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 1px;` -> `margin: 1px;`）、移除規則內重複的宣告、移除不匹配任何元素的規則（如死碼消除過程中的 `div:has-no-children { color: red; }`）。對於壓縮輸出，頁面套用標準轉換；對於人類可讀輸出，頁面套用選定的縮排和大括號風格。 CSS Nesting Module（CSSWG，2023 年起草，2024 年進入 Baseline）引入原生巢狀：`.a { color: red; & .b { color: blue; } }` 在現代瀏覽器中已是合法 CSS（Chrome 112+、Firefox 117+、Safari 16.5+）。2024 年之前的巢狀需要預處理器轉換（Sass `&` 或 Less `&` 來連結選擇器）。本頁面兩者都支援：預處理器巢狀的 CSS 按 SCSS / Less 格式化（保留 `&`），原生巢狀 CSS（不需要 `&`）同樣透過規則區塊遍歷來格式化。頁面處理的其他 at 規則：@keyframes 和 @counter-style 接受宣告區塊而非巢狀規則區塊，因此格式化方式不同（at 規則內的宣告，無巢狀大括號）。@media、@supports、@container、@layer 接受規則區塊。@import、@charset、@namespace 僅在頂層並獨佔一行。@property（已註冊自訂屬性）接受宣告區塊。@font-face 是一個無選擇器的單一規則區塊。頁面根據各 at 規則在規範中定義的區塊結構來處理，而非根據名稱。最常見的格式化陷阱是破壞字串字面值中的內容：`content: "hello world";`、`font-family: "Arial Black", sans-serif;`、`background: url("image.png")`——格式化器不得折疊字串內的空格、不得在 `/` 處拆分 URL、不得觸碰 `/* ... */` 內的註解文字。能正確追蹤字串狀態和註解狀態的詞法分析器，是能完整保留使用者內容的格式化器與會損壞內容的格式化器之間的關鍵差異。本頁面的詞法分析器是手寫的，體積小到可以用肉眼驗證；正式環境的格式化器使用 postcss 或 lightningcss，其內部詞法分析器承擔同樣的義務。

詞法分析（CSS Syntax Level 3）：掃描字元流，輸出識別碼 / at 關鍵字 / 雜湊值 / 字串 / 數字 / 尺寸 / 百分比 / url / 函式 / 標點符號 / 註解詞法單元。字串和註解有狀態——詞法分析器出錯會破壞 `content: "hello world";`。
兩個結構單位：規則區塊（selector { declarations }）和 at 規則區塊（@media、@supports、@container、@layer 包裹規則區塊）。格式化器遍歷大括號深度，每個 `{` 縮排一層；匹配的 `}` 縮回一層。
選擇器原樣輸出，空白正規化：`.a,.b,.c` -> `.a, .b, .c`。格式化器不解析選擇器（CSS Selectors Level 4 是另一個問題）——只清理空格和逗號。
輸出風格：'expanded'（每個宣告一行，最具可讀性）、'compact'（一個規則一行，正式環境常見）、'compressed'（無空白，壓縮）。冒號 + 空格是唯一通用的格式規則。
壓縮：移除註解、折疊空白、移除尾部 `;`、合併相同選擇器規則、正規化 `#ffffff` -> `#fff`、`0.500` -> `.5`、`0px` -> `0`。結構合併：獨立屬性 -> 簡寫（`margin-top: 1px; ... margin-left: 1px;` -> `margin: 1px;`）。
CSS Nesting（CSSWG 2023，Baseline 2024）：`.a { & .b { ... } }` 在 Chrome 112+、Firefox 117+、Safari 16.5+ 中已是原生 CSS。2024 年之前的預處理器巢狀（Sass `&`、Less）仍然有效；頁面透過遍歷規則區塊結構來格式化兩者。
at 規則區塊結構：@keyframes 和 @counter-style 接受宣告；@media / @supports / @container / @layer 接受規則區塊；@import / @charset / @namespace 是頂層陳述句；@property 和 @font-face 接受宣告區塊。頁面根據各 at 規則在規範中定義的區塊結構來處理，而非根據名稱。
安全邊界：字串字面值（content、字型名稱、URL）和註解文字在所有轉換中均保持不動。位元組精確的往返測試是 CSS 格式化器的正確性標準——破壞一個 content 字串使用者會立即察覺。

範例

壓縮 CSS 的格式化

輸入：  .btn{color:red;background:#fff;padding:8px 16px;border-radius:4px}
輸出：
.btn {
  color: red;
  background: #fff;
  padding: 8px 16px;
  border-radius: 4px;
}

展開巢狀規則

輸入：  .card{padding:16px}.card h2{margin:0 0 8px}.card p{color:#666}
輸出：
.card {
  padding: 16px;
}
.card h2 {
  margin: 0 0 8px;
}
.card p {
  color: #666;
}

媒體查詢格式化

輸入：  @media(max-width:768px){.nav{display:none}.menu{width:100%}}
輸出：
@media (max-width: 768px) {
  .nav {
    display: none;
  }
  .menu {
    width: 100%;
  }
}

常見問題

這個 CSS 格式化工具會做什麼？

把 CSS 重新排版成易讀格式：縮排一致、每條宣告獨立一行、冒號後加空格、每條規則一行。它不會改變選擇器的特異性或屬性值，純粹處理空白和括號位置。

也能壓縮 CSS 嗎？

如果有「最小化」或「壓縮」開關就可以。最小化會移除註解和空白、縮短十六進位顏色（#ffffff → #fff），並去掉規則中最後一條宣告的尾分號。反向操作（美化）則還原可讀性。

為什麼它沒幫我修正無效的 CSS？

它是格式化工具，不是驗證器。括號不匹配、缺分號、不認識的屬性都會原樣通過。請使用 CSS linter（Stylelint）或在瀏覽器開發者工具中載入 CSS 來檢查語法錯誤。

支援現代 CSS（巢狀、容器查詢、自訂屬性）嗎？

多數版本使用能解析現行語法的 CSS 解析器，包含 @container、@supports、自訂屬性（--var）、巢狀規則、@layer。若解析器較舊，較新的語法可能排版不佳——使用前請貼進去檢查結果。

註解會被保留嗎？

會。/* ... */ 區塊註解會被格式化工具保留。某些壓縮器預設會剝除註解，需要的話請關閉。單行 // 註解不是標準 CSS，可能會被移除（它屬於 SCSS，而非 CSS）。

CSS 會被上傳嗎？

不會。格式化在你的瀏覽器中由 JavaScript 編寫的 CSS 解析器/輸出器完成，貼上的 CSS 不會被傳出。

可以設定縮排嗎？

可以——通常是 2 或 4 個空格，或 Tab。請挑選與專案既有風格一致的設定。原文中混用的縮排會被統一成你選的值。