如何在 VS 程式碼中縮小 CSS？

VS 程式碼沒有內建的 Minify 命令，因此您可以安裝擴充功能（例如「縮小」命令）或在 SAVE 上執行 esbuild、lightning css 或 cssnano 等建置工具。對於不配置任何內容的快速一次性，請在此處貼上您的 CSS 並點擊 Minify - 它在瀏覽器中運行並顯示確切的位元組節省。

縮小會破壞我的 CSS 嗎？

不。此縮小器僅刪除可證明是多餘的字元：註解、額外空格、尾號和零長度的單位後綴。它在觸摸任何內容之前解析字串文字、url() 值和 calc() 表達式，因此 calc(100% - 20px) 等空白敏感結構和 div :hover byte-fo-byte-for-byte semantantical siment some some some sermantical semanticals s.

縮小 CSS 實際上節省了多少？

手寫樣式表通常會縮小 25-40%；評論過的檔案可能會掉一半以上。如果您使用 GZIP 或 Brotli，電線節省會更小 - 通常在壓縮的基礎上節省 5-15% - 但縮小的輸入也會更快地壓縮，並且在瀏覽器中解析更快。儲蓄徽章顯示您的確切數字，因此您無需猜測。

如果我的伺服器已經使用 gzip，為什麼要縮小 CSS？

GZIP 和縮小是互補的，不可互換。 GZIP 無法刪除註解或縮短 #FFFFFF 到 #FFF - 它只能更緊湊地編碼它們 - 所以 minify-then-gzip 總是比單獨的 gzip 小。瀏覽器還必須解壓縮和解析完整的原始文字，而 CSS 解析位於關鍵的渲染路徑上。

我的 /*! 許可證評論是否已刪除？

不 . 以 /*!開頭的註釋預設保存，遵循與 Terser、CSSNANO 和 CLEAN-CSS 相同的約定。這意味著來自 Normalize.css 等圖書館的許可證標頭在縮小版中倖存下來，讓您遵守歸因要求。

將 #AABBCC 縮短為 #ABC 是否安全？

是的 - CSS 規格將三位數十六進位顏色定義為展開每個數字，因此 #ABC 和 #AABBCC 的顏色完全相同。該工具僅縮短每對重複的六位數值，並且它從不使用帶有 alpha 通道或字串或 url() 內的任何內容的八位六角色。

從零值 (0px → 0) 中刪除單位會導致問題嗎？

不適用於長度 - CSS 規格表示零長度不需要單位，因此邊距：0px 和邊距：0 是相同的。該工具故意將 0%、0s 和 0deg 單獨留下，因為這些單元可能很重要（關鍵影格中的 0% 是選擇器，動畫時序需要它的單位），它跳過括號內的所有內容，因此 calc() 永遠不會受到影響。

我可以取消沒有來源的生產 CSS 捆綁包嗎？

是的 - 這正是 Beautify 按鈕的用途。它將單行 CSS 擴展為每行一條聲明，其中包含適當的縮排和規則之間的空白行，這使得區分、讀取或調試供應商捆綁包變得實用。請注意，它還原格式化，而不是原始評論或來源結構，因為這些是在建置時刪除的。

我應該在瀏覽器中還是在我的建置管道中縮小？

對於生產應用程式，請在您的建置管道（CSSNano、ESBuild、Lightning CSS）中保持縮小，使其自動且可重複。這個工具適用於其他一切：快速一次性資產、電子郵件 CSS、注入 CMS 樣式、檢查檔案會縮小多少，或在無法重建的事件中美化捆綁包。

此工具是否支援 SCSS、較少或嵌套的 CSS？

它專為標準 CSS 而建，包括現代原生嵌套、媒體查詢和自訂屬性 - 瀏覽器可以解析的任何內容。應先將 SCS 變數或更少的混音等預處理器語法編譯為 CSS，因為縮小未編譯的來源可以更改您的預處理器輸出。

我的 CSS 上傳到伺服器嗎？

不 . 縮小和美化完全在您的瀏覽器中運行，使用普通的 JavaScript - 沒有任何東西在任何地方傳輸、記錄或儲存。您可以在網路標籤中驗證這一點：點擊 Minify 時不會提出任何要求。載入頁面後，它甚至可以離線工作。

CSS 小人和美化劑

Q: 縮小會破壞我的 CSS 嗎？

不 。 此縮小器僅刪除可證明是多餘的字元：註解、額外空格、尾號和零長度的單位後綴。 它在觸摸任何內容之前解析字串文字、url() 值和 calc() 表達式，因此 calc(100% - 20px) 等空白敏感結構和 div :hover byte-fo-byte-for-byte semantantical siment some some some sermantical semanticals s.

Q: 縮小 CSS 實際上節省了多少？

手寫樣式表通常會縮小 25-40%；評論過的檔案可能會掉一半以上。 如果您使用 GZIP 或 Brotli，電線節省會更小 - 通常在壓縮的基礎上節省 5-15% - 但縮小的輸入也會更快地壓縮，並且在瀏覽器中解析更快。 儲蓄徽章顯示您的確切數字，因此您無需猜測。

Q: 我的 /*! 許可證評論是否已刪除？

不 . 以 /*!開頭的註釋預設保存，遵循與 Terser、CSSNANO 和 CLEAN-CSS 相同的約定。 這意味著來自 Normalize.css 等圖書館的許可證標頭在縮小版中倖存下來，讓您遵守歸因要求。

Q: 將 #AABBCC 縮短為 #ABC 是否安全？

是的 - CSS 規格將三位數十六進位顏色定義為展開每個數字，因此 #ABC 和 #AABBCC 的顏色完全相同。 該工具僅縮短每對重複的六位數值，並且它從不使用帶有 alpha 通道或字串或 url() 內的任何內容的八位六角色。

Q: 從零值 (0px → 0) 中刪除單位會導致問題嗎？

不適用於長度 - CSS 規格表示零長度不需要單位，因此邊距：0px 和邊距：0 是相同的。 該工具故意將 0%、0s 和 0deg 單獨留下，因為這些單元可能很重要（關鍵影格中的 0% 是選擇器，動畫時序需要它的單位），它跳過括號內的所有內容，因此 calc() 永遠不會受到影響。

Q: 我可以取消沒有來源的生產 CSS 捆綁包嗎？

是的 - 這正是 Beautify 按鈕的用途。 它將單行 CSS 擴展為每行一條聲明，其中包含適當的縮排和規則之間的空白行，這使得區分、讀取或調試供應商捆綁包變得實用。 請注意，它還原格式化，而不是原始評論或來源結構，因為這些是在建置時刪除的。

縮小 CSS 以縮小檔案大小或美化縮小的樣式表以進行調試

Indent:

Input CSS

Output

Output will appear here...

什麼是 CSS 小調和美化劑？

CSS Minifier & Beautifier 是一個雙向樣式表工具：它透過刪除瀏覽器不需要的所有內容來壓縮 CSS - 評論、空白、冗餘分號、長格式六色和零值上的單元 - 它可以逆轉這個過程，將單行生產捆綁包擴展回可讀、適當縮排的規則。您從渲染封鎖樣式表中剝離的每個位元組都是瀏覽器下載和解析的位元組，它直接為核心的 Web Vitals 指標提供第一個 Contentful Paint 和最大的 Contentful Paint 等核心。

小人故意保守。它完全了解字串文字、url() 值和 calc() 表達式，因此它從不刪除 calc(100% - 20px) 所依賴的空白，從不重寫內容字串中的類似顏色的文字，並且從不觸摸區分 div :hover 與 div:hover 的間距。在典型的手寫樣式表上，您可以在 GZIP 之前預期縮小 25-40%；結合 GZIP 或 Brotli 上的電線，縮小仍然可以剃掉一個有意義的切片，因為壓縮在重複、無評論的輸入上效果更好。

瀏覽器中的所有內容都以 100% 的客戶端運行。您的 CSS 永遠不會上傳、記錄或儲存在任何伺服器上，這意味著您可以安全地貼上專有的設計系統代碼、未發布的產品樣式或客戶端工作。載入頁面後，它也可以離線工作 - 當您需要快速縮小通行證而無需接線完整的 PostCSS 或 ESBuild 管道時，它很有用。

這裡的縮小是語法感知，而不是一組尋找和替換規則，這使得在生產樣式表上運行是安全的：字串中的空白、url() 值和屬性選擇器是不存在的，因為刪除它會改變 CSS 匹配的內容。保留以感嘆號開頭的註釋，這是必須在構建中生存的許可證標頭的約定。

如何使用 CSS minifier & Beautifier？

貼上你的 CSS
將您的樣式表放入輸入區域 - 單一規則、組件檔案或完整的生產包。格式化和已經縮小的 CSS 都被接受。
選擇縮小或美化
按一下 Minify 以壓縮生產，或 Beautify 將縮小程式碼展開到每行一個聲明，規則之間的空行。對於 Beautify，請先選擇您喜歡的縮排。
檢查儲蓄徽章
該工具報告了確切的前後大小和百分比變化（例如“12.4 kb → 8.1 kb，-34%”），因此您確切地知道變換在運送之前為您買了什麼。
複製或下載
只需單擊一下即可將結果複製到剪貼簿，或將其下載為 .css 檔案，以便放入您的建置輸出或 CDN。

主要特點

安全、語法感知縮小
尊重字串文字、url() 值和 calc() 間距 - 它在不損壞有效 CSS 的情況下積極壓縮
六角形和零值縮短
將 #FFFFFFFF 改寫為 #FFF，將 0px 改寫為 0，可證明是安全的，擠出額外的位元組以超越普通空格刪除
許可證評論保存
保持 /*!橫幅評論完好無損，因此圖書館許可證標頭在縮小化、匹配標準建置工具行為中生存
一鍵美化
將縮小的捆綁包擴展到可設定的可讀規則，並使用可配置的 2、4 或 8 空間縮排來調試生產問題

Frequently Asked Questions

CSS 縮小是刪除瀏覽器不需要渲染樣式表的每個字元的過程 - 評論、空格、換行、尾隨分號 - 並將 #ffffff 等安全值縮短為 #FFF。結果是功能相同的 CSS，以更少的位元組，下載和解析更快。因為樣式表是渲染阻塞，所以較小的 CSS 可以改進像 First Contentful Paint 這樣的指標。