CSS 格式化與壓縮工具

CSS 格式化與壓縮的運作原理

在網頁開發過程中，CSS 樣式表會經歷兩種截然不同的狀態：便於人類閱讀與維護的「開發狀態」，以及便於瀏覽器快速載入的「生產狀態」。

當進行 CSS 格式化（美化）時，工具會重新整理程式碼的縮排與空格，將原本擠在一起或排版混亂的樣式表，轉換成結構清晰、層級分明的格式，方便前端工程師閱讀與修改。

相反地，CSS 壓縮則是移除所有瀏覽器解析時不需要的冗餘字元。瀏覽器在渲染網頁時，並不需要程式碼中的換行、空格或註解。透過將這些字元清除，並將特定的屬性值寫法簡化，就能顯著縮小檔案體積，提升網頁的載入速度。

本工具提供彈性的參數調整，以滿足不同情境下的程式碼處理需求：

縮排：在進行格式化時，可選擇「2 spaces」（2 個空格）、「4 spaces」（4 個空格）或「tab」作為標準縮排單位。
壓縮強度：
- 安全：此模式僅移除無用的空白字元與一般註解，並進行基本的數值縮短，所有 CSS 規則的書寫順序與位置都會維持原樣，完全不影響樣式的套用順序。
- 極致：此模式會進行更深度的優化，自動合併重複的選擇器與規則以追求最小檔案體積。由於合併過程可能會重組或調整規則的先後順序，若您的樣式表高度依賴後寫蓋前寫的覆蓋關係，使用此模式後建議進行畫面核對。

在壓縮過程中，工具會執行一系列優化規則來縮減字元：

空白與註解消除：移除程式碼中所有的換行符號、多餘空格以及標準 CSS 註解（即 /* 註解內容 */）。
數值與顏色縮短：將屬性值轉換為更緊湊的等價寫法。例如，將十六進位顏色值 #ffffff 自動縮寫為 #fff。
保留特定註解：為了符合版權宣告或授權說明的需求，凡是格式為 /*! … */ 的特定註解，無論在「安全」或「極致」壓縮模式下，都會被完整保留，不會被工具清除。
語法與前綴保留：在「安全」模式下，瀏覽器專屬的廠商前綴（Vendor Prefixes）以及現代 CSS 新語法皆會維持原樣，不進行任何破壞性改寫。

使用本工具處理 CSS 時，請注意以下輸入限制與系統回饋：

輸入大小限制：單次處理的 CSS 原始碼最大容量為 500,000 個字元。若超出此限制，工具會顯示「樣式表太大,無法處理。請換小一點的。」。
無效或空輸入：若輸入框內沒有任何內容，或壓縮器處理後輸出為空字串（通常代表輸入內容存在嚴重的語法問題），工具會顯示「找不到可壓縮的 CSS,請檢查是否有語法錯誤。」。
解析失敗：若輸入的 CSS 語法毀損嚴重而無法被解析器處理，工具則會顯示「無法處理這段 CSS。」。

本工具採用瀏覽器端處理機制。當您貼上程式碼並點擊格式化或壓縮時，所有的運算與字元處理皆直接在您個人的瀏覽器本機上完成，您的 CSS 原始碼不會上傳到 BroBroGo 伺服器。

處理完成後，工具會即時顯示處理結果的統計數據，包括「行數」、「字元」與「大小」。若進行壓縮，還會顯示「已壓縮——體積減少 {pct}%。」。您可以點擊按鈕直接複製結果，或將處理後的程式碼下載為 styles.css 檔案。

格式化會重新縮排、加上空白,讓樣式易讀易改;壓縮正好相反,去掉瀏覽器用不到的空白和註解,並把顏色等值寫短,讓檔案更小、載入更快。開發時用格式化,上線前用壓縮。

「安全」只刪除空白和註解、把值寫短,每一條規則都留在你寫的位置;「極致」會更進一步,合併重複的選擇器和規則,讓檔案更小——它可能調整規則順序,所以如果樣式表依賴書寫先後,上線前最好快速核對一下。/*! … */ 形式的註解兩種模式都會保留。

在「安全」模式下不會——樣式的渲染完全一樣。它只是摺疊空白、去掉一般註解、把值寫成更短的等價形式(例如把 #ffffff 寫成 #fff),絕不改動你的廠商前綴,也不改寫新語法。「極致」模式還會合併規則,在絕大多數樣式表上效果一致,但如果你的樣式依賴規則順序,值得核對一下。