免費CSS 美化工具

工作原理

此工具使用直接內建在頁面中的手寫遞迴解析器格式化 CSS——沒有第三方庫、沒有伺服器呼叫。解析器逐字元遍歷你的 CSS，能正確處理引號字串、url() 值、巢狀 at 規則和註解，而這些會讓較簡單的基於正則的方法出錯。

1. 1
   字元級分詞

   walkCss 函式逐字元掃描原始輸入，追蹤引號狀態和括號深度，因此 url()、字串值或註解中的分號或花括號絕不會被誤認為結構分隔符號。
2. 2
   區分塊和宣告

   掃描器發現頂層左花括號時，會提取前導部分（選擇器或 at 規則關鍵字），並遞迴處理塊體——塊體本身可能包含巢狀規則（@media、@supports、原生 CSS 巢狀），在更深的遞迴層級中處理。
3. 3
   屬性排序與縮排

   每個塊中的宣告被收集為一組，然後可選擇按屬性名字母順序排序，再以所選縮排寬度（2 或 4 個空格）輸出。壓縮模式完全跳過空白並去除註解。
4. 4
   瀏覽器內即時輸出

   透過 useMemo 鉤子，結果在你輸入時即時顯示——不會傳送到任何地方。格式化或壓縮後的 CSS 可以複製到剪貼簿或下載為 .css 檔案，面板還會顯示與原始檔案的大小差異。

相關工具