跳到工具區
Web 開發

CSS 格式化、美化與壓縮工具

在瀏覽器本機格式化、檢查或壓縮 CSS，並清楚區分保守壓縮與 CSSO 結構重整。

線上工具 價格方案
輸入0 個字元
結果0 個字元
就緒

想要更順手的原生工作流程？

把「CSS 格式化、美化與壓縮工具」放進一個快速鍵。

DevSexy Mac 版保留同樣私密的本機處理，同時提供全域快速鍵；不用管理瀏覽器分頁，需要時直接叫出。

全域快速鍵可離線使用本機處理
免費試用 Mac 版

目前的瀏覽器工具仍然免費。

3 種操作 · 3 種不同承諾

先決定工具可以改動到哪一層。

格式化、語法檢查與壓縮都從可解析的樣式表開始，接著走向不同結果。共用前處理只針對 declaration boundary 的舊式 ; !important 次序，並不是通用自動修復；選好需要的結果後，仍要判斷輸出是否適合專案。

01

格式化

Prettier parser → 可讀 CSS

依縮排與列寬重新排版

02

語法檢查

Parser → 語法訊號

回報解析結果與現代語法計數，不是 lint

03

壓縮

保守清理 / CSSO

收緊空白，或進一步清理、縮寫及重整結構

現代 CSS 壓力樣本

拿今天的 CSS 語法來檢驗 formatter。

這些片段涵蓋 cascade layer、原生巢狀、自訂屬性、feature query、數學運算與感知色彩，不只測試傳統的屬性宣告。

@layer

@layer components { … }

格式化時保留原始 layer 順序

原生巢狀

.card { &:hover { … } }

父選擇器仍連接原本的巢狀規則

設計 token

:root { --space: 1rem; }

保留自訂屬性名稱

@supports

@supports (color: oklch(0 0 0))

條件規則維持原本的巢狀位置

數學運算

width: calc(100% - var(--space))

重新排出容易閱讀的運算間距

現代色彩

color: oklch(72% .18 145)

交由 parser 識別色彩函式 token

位元組預算流程

檔案變小是一條處理路徑，不等於排版變漂亮。

格式化可能增加檔案大小。預設 conservative 會移除一般註解並收緊空白，不合併規則；主動選擇 maximum 才會交由 CSSO 清理、縮寫，並以 restructuring 合併宣告或規則。

輸入

基準

保留原始空白、註解與換行

格式化

可能變大

為閱讀重新排版，位元組增加並不意外

保守壓縮

通常較小

保留 /*! 註解、收緊空白，不重整規則

Maximum

需主動選擇

CSSO 會清理、縮寫，並可能合併宣告或規則

Parser 定位線索

先看 parser 報出的第一個斷點。

未閉合的區塊可能改變後續 token 的解析方式。Prettier parser 拒絕輸入時，先從它回報的位置修正；瀏覽器本身的 CSS 錯誤復原規則不一定相同。

範例 · 從第 1 行開始的區塊沒有在結尾閉合
.card {
  color: var(--ink);
  &:hover {
    color: oklch(70% .2 145);
  /* 少了結尾大括號 */

先補上巢狀規則與父規則的結尾，再重新執行語法檢查；不要把 parser 訊息當成瀏覽器相容性結論。

Cascade 邊界法庭

解析成功，仍然無法證明這些事

超出格式化工具的判斷範圍
01

Specificity 是否符合意圖

合法的選擇器仍可能蓋掉不該覆寫的規則。

02

選擇器是否實際使用

工具看不到應用程式最後渲染出的 DOM。

03

目標瀏覽器是否支援

Parser 能讀取現代語法，不代表目標瀏覽器會執行。

04

畫面是否等價

尤其使用 CSSO restructuring 後，仍須以渲染與視覺回歸測試確認。

執行可重現的範例

用小規則對照可讀的 CSS 排版與保守壓縮。

使用範例會替換目前輸入、參考輸入、操作與選項。以下均為公開示範資料。

縮排網格規則

兩個空格縮排、100 列換行，不執行樣式表。

輸入

.card{display:grid;gap:1rem}

宣告仍按原規則排列，便於閱讀。

.card {
  display: grid;
  gap: 1rem;
}

壓縮簡單顏色規則

使用保守預設，處理白色和零邊距。

輸入

.card { color: #ffffff; margin: 0px; }

檢視緊湊輸出與縮短的十六進位值，再決定是否替換原始碼。

.card{
#fff

繼續處理相關任務

SCSS 格式化工具

在瀏覽器本機使用固定的 SCSS parser 整理變數、巢狀規則、mixin 與模組語法；只重新排版 .scss，不編譯成 CSS。

LESS 程式碼格式化工具

在瀏覽器本機整理 LESS 變數、mixin、巢狀選擇器與規則；只重新排版，不編譯或產生 CSS。

CSS 色碼與色彩空間轉換器

轉換 HEX、RGB、HSL、OKLCH 與 Display P3 等 CSS 顏色，檢視色域映射、sRGB fallback，並計算 Alpha 合成後的 WCAG 對比。

在 DevSexy Mac 應用程式中重複處理

反覆處理本機資料時，可透過 Option 快捷鍵開啟原生應用程式，離線使用工具。

直接回答

什麼是 CSS 格式化、美化與壓縮工具？

線上以 Prettier 格式化或檢查 CSS；預設只保守收緊空白，也可選用 CSSO maximum 結構重整。原始碼在瀏覽器本機處理，壓縮後仍應執行渲染回歸測試。

它能做什麼？

  • 格式化
  • 診斷
  • 壓縮

如何使用 CSS 格式化、美化與壓縮工具

  1. 01

    準備輸入

    貼上 CSS，把 SCSS 與 Less 交給對應工具。

  2. 02

    選擇操作

    選擇格式化、診斷，或明確的壓縮預設。

  3. 03

    核對結果

    閱讀警告，並在目標瀏覽器和真實層疊環境中檢查。

常見問題

格式化器會編譯 SCSS 或 Less 嗎？
不會。目前頁面處理 CSS；專門的 SCSS 與 Less 頁面保留源語言，也不能替代各自編譯器。
壓縮成功就能證明渲染完全一致嗎？
不能。最佳化策略可能改變表示並依賴特定假設，應檢查差異，並在真實應用程式及目標瀏覽器中測試受影響的規則。
相容性診斷是完整的瀏覽器支援資料庫嗎？
不是。報告只提供待核對線索，版本、層疊層、特性組合和回退行為仍需實際渲染驗證。