27個免費線上CSS檔案極簡化工具

如果您曾經在GTMetrix.com或任何其他網頁測試/分析工具上分析過您的網站，那麼您肯定會偶然發現“CSS極簡化或者CSS壓縮”建議。免費線上CSS檔案極簡化工具即通過減少頁面載入時間來提高您的網頁效能。

27個免費線上CSS檔案極簡化工具-1

根據Kissmetrics的資料，40%的網站訪問者會放棄載入時間超過3秒的網站，1秒的延遲（或 3 秒的等待）會使客戶滿意度降低約16%。所以最重要的是，您需要加快網頁載入時間。CSS檔案壓縮就是為了達到此目的，但首先，您應該知道“程式碼極簡化”是什麼意思。根據維基——

“在計算機程式語言，尤其是JavaScript中，極簡化是從原始碼中刪除所有不必要的字元而不改變其功能的過程。這些不必要的字元通常包括空格字元、換行符、註釋，有時還包括塊分隔符，它們用於增加程式碼的可讀性，但不是執行所必需的。”

所以程式碼壓縮意味著它將刪除空格、新行、塊分隔符和註釋以最小化檔案大小。但是對於新手或在編碼方面幾乎沒有經驗的人來說，程式碼壓縮可能是一項可怕的任務。這就是為什麼我列出了所有線上CSS壓縮工具的原因。這樣任何人都可以複製或上傳他們的原始CSS程式碼，壓縮並立即使用它，而無需擔心任何事情。

手動為CSS檔案瘦身

在使用線上CSS檔案極簡化工具之前，請注意，您可以在不使用任何工具的情況下手動為CSS檔案瘦身。例如，這是帶有換行符和註釋的典型原始CSS程式碼：

/*--------------------------------------------------------------

## Site Branding

--------------------------------------------------------------*/

.site-branding {

width: 80%;

}

/*--------------------------------------------------------------

## Site Navigation

--------------------------------------------------------------*/

#site-navigation{

float: left;

width: 1%;

margin-top: 2%;

}

/*-------------------------------------------------------------- ## Site Branding --------------------------------------------------------------*/ .site-branding { width: 80%; } /*-------------------------------------------------------------- ## Site Navigation --------------------------------------------------------------*/ #site-navigation{ float: left; width: 1%; margin-top: 2%; }

/*--------------------------------------------------------------
 ## Site Branding
 --------------------------------------------------------------*/
 .site-branding {
 width: 80%;
 }

/*--------------------------------------------------------------
 ## Site Navigation
 --------------------------------------------------------------*/
 #site-navigation{
 float: left;
 width: 1%;
 margin-top: 2%;
 }

現在刪除註釋、行間距和額外空格，上面的程式碼將如下所示：

.site-branding {width: 80%;}#site-navigation{float: left;width: 1%;margin-top: 2%;}

.site-branding {width: 80%;}#site-navigation{float: left;width: 1%;margin-top: 2%;}

這就是您手動進行CSS壓縮或者極簡化的方式，但這是一項過多的重複性任務，而且肯定是一種容易出錯的方法。除非你必須這樣做，否則我不會推薦它。最好使用線上工具壓縮您的CSS程式碼並從那裡複製。

CSS線上極簡化工具

1. cssminifier

使用包含下載檔案的選項，使用API和許多有用的外掛來極簡化/壓縮您的CSS程式碼，例如 – Django Helper、Sublime Text 2外掛、Krusader檔案管理器和PHP庫。

2. minifier

27個免費線上CSS檔案極簡化工具-2

這個線上極簡化工具提供刪除所有評論、超級緊湊、保持縮排、刪除最後一個分號的選項。

3. freeformatter.com/css-minifier

27個免費線上CSS檔案極簡化工具-3

基於Yahoo YUI Compressor：支援

刪除無用的空格、縮排字元和換行符
刪除所有評論
刪除樣式宣告的最後一個分號和額外的分號
刪除空的CSS 宣告
使用零值時刪除單位
如果浮點值小於1，則刪除前導 0
將RGB顏色值轉換為較短的十六進位制格式
遵循模式#AABBCC 的十六進位制顏色減少為#ABC
為每個CSS檔案保留一個字符集，刪除所有額外的宣告
只要安全，None值就會轉換為0

您可以複製貼上您的CSS或鍵入檔案的URL進行極簡化。

4. cleancss.com/css-minify

27個免費線上CSS檔案極簡化工具-4

你只需要鍵入需要極簡化的CSS程式碼，或者填寫CSS檔案URL地址，又或者上傳CSS檔案，即可實現CSS檔案壓縮。

5. cnvyr.io

27個免費線上CSS檔案極簡化工具-5

您可以從該網站極簡化和gzip壓縮您的CSS程式碼。該線上工具還支援JavaScript極簡化和影象優化處理。

6. minifier.org

27個免費線上CSS檔案極簡化工具-6

基於Peter Finland和MIT-licensed的極簡化專案，您可以使用該工具進行CSS和JavaScript檔案壓縮。

7. css-minifier.com

27個免費線上CSS檔案極簡化工具-7

一個提供豐富選項可供選擇的線上壓縮工具。

極限（無可讀性，最小尺寸）
高（中等可讀性，較小的尺寸）
標準（可讀性和大小之間的平衡）
低（更高的可讀性）

還有更多選項，例如 – 丟棄CSS屬性（CSS 3.0、CSS 2.1、CSS 2.0 和 CSS 1.0）、向最終CSS新增時間戳、壓縮顏色、壓縮字型粗細、刪除不必要的反斜槓和刪除最後一個分號。

8. css-beautify-minify

27個免費線上CSS檔案極簡化工具-8

通過檔案URL或上傳您的CSS 檔案，您可以壓縮和美化網站的CSS程式碼。該線上工具還提供可驗證CSS程式碼的選項。

9. minifycode.com/css-minifier

27個免費線上CSS檔案極簡化工具-9

一鍵壓縮您的CSS 程式碼。沒有其他選項或像其他服務那樣的任何額外選項，不過提供CSS美化器。

10. browserling.com/tools/css-minify

27個免費線上CSS檔案極簡化工具-10

另一個支援壓縮及美化CSS檔案線上工具。

11. countwordsfree.com/css-minify

27個免費線上CSS檔案極簡化工具-11

基於YUI Compressor作為CSS極簡化的主要引數：

刪除註釋和空格
去掉最後一個分號
去除多餘的分號
刪除空宣告
空值優化
轉換顏色值
去除重複的字符集
不透明度過濾縮短
優化空值

12. webtoolkitonline.com/css-minifier

27個免費線上CSS檔案極簡化工具-12

一個面向開發人員的線上工具，可以非常方便地壓縮CSS。並且還提供其他有用的CSS工具，例如：Less轉化CSS工具和CSS格式化工具。

13. foo123.github.io

27個免費線上CSS檔案極簡化工具-13

一個優秀的線上CSS處理和壓縮工具，提供很多選項，例如 – 壓縮、美化、刪除註釋、新增供應商字首、應用回退polyfills、將HSL(A)轉換為RGB(A)、將RGB(A)轉換為HEX和行包裝。此外，還有幾個“僅限伺服器”選項，例如 – 嵌入影象、嵌入字型和嵌入匯入。

14. varvy.com/tools/css

27個免費線上CSS檔案極簡化工具-14

Vary.com的工具可以壓縮CSS程式碼，但它不會刪除換行符，並且沒有選項。

15. beautifytools.com/css-minifier

27個免費線上CSS檔案極簡化工具-15

您可以通過刪除空格、換行符、縮排和註釋以及從URL載入和上傳檔案的選項來縮小和壓縮CSS程式碼，且提供美化選項。

16. codeamaze.com/code-minifier/css-minifier

27個免費線上CSS檔案極簡化工具-1

為您提供從URL載入檔案和從檔案載入的選項，您可以下載縮小的檔案或複製程式碼。

17. devotter.com/css-minifier

27個免費線上CSS檔案極簡化工具-1

基於clean-CSS，您需要拖放CSS檔案以壓縮。它使用流行的gulp-cssmin外掛背後的相同工具。

18. minifycss.io

27個免費線上CSS檔案極簡化工具-1

該線上工具支援URL載入或者上傳檔案極簡化及壓縮CSS。

19. minifyweb.com/minify-css

27個免費線上CSS檔案極簡化工具-1

該網站具有其他任何壓縮器都沒有的獨特功能。您可以將多個CSS檔案合併為一個極簡化CSS檔案。您可以貼上CSS檔案URL或貼上原始程式碼。到目前為止，我已經嘗試極簡化11個檔案並且成功了。我不確定是否有檔案限制，但同時極簡化10個檔案對任何人來說絕對是很多。

20. tutorialspoint.com/online_css_minifier

27個免費線上CSS檔案極簡化工具-1

另一個來自tutorialspoint.com的簡單工具，您只需貼上CSS程式碼，它就會自動極簡化程式碼。您可以複製程式碼或下載為檔案。

21. howtodoinjava.com/best-online-css-formatter-minifier

27個免費線上CSS檔案極簡化工具-1

一個線上CSS極簡化及格式化線上工具：

刪除無用的空格、縮排字元和換行符。
刪除所有評論。
刪除樣式宣告的最後一個分號和額外的分號
刪除空的 CSS 宣告
使用零值時刪除單位。
用於美化/格式化CSS。
用於極簡化CSS。

22. caiapps.com/tools/minifier

27個免費線上CSS檔案極簡化工具-1

另一個用於極簡化CSS的線上工具。

23. css-minify.online-domain-tools.com

27個免費線上CSS檔案極簡化工具-1

使用以下選項極簡化你的CSS程式碼：

將每個CSS規則放在單獨的行上
禁用高階優化
刪除特殊註釋（即 /*! 註釋 */）
不要刪除第一個特殊註釋
保持與IE8的相容性

24. webtools.joomboost.com

27個免費線上CSS檔案極簡化工具-1

該Web工具為您的CSS極簡化提供了四個壓縮級別：

最高（無可讀性，最小尺寸）
高（中等可讀性，較小尺寸）
標準（可讀性和大小之間的平衡）
低（更高的可讀性）

25. htmlminifiers.com/css-minifier

27個免費線上CSS檔案極簡化工具-1

在沒有可能的副作用的情況下極簡化CSS。

刪除無用的空格、縮排字元和換行符
刪除所有評論
刪除樣式宣告的最後一個分號和額外的分號
刪除空的CSS宣告
使用零值時刪除單位
如果浮點值小於1，則刪除前導 0

26. cuteseotools

27個免費線上CSS檔案極簡化工具-1

另一個簡化CSS程式碼的線上工具。

27. beautifyconverter.com/css-minifier

27個免費線上CSS檔案極簡化工具-15

包括的選項：從URL載入CSS檔案或上傳、美化CSS、極簡化CSS並下載壓縮後的版本。

極簡化與壓縮

極簡化是一項非常不錯的技術但不會與壓縮混淆，這兩者是不一樣的。極簡化後的程式碼可以按原樣執行，極簡化意味著它只會從檔案中刪除空格、註釋和其他不必要的字元，以建立一個無需任何操作即可執行的CSS檔案。而壓縮程式碼在執行前需要解壓縮。這是這兩者之間的主要區別。與壓縮器相反，壓縮後的檔案無需任何操作即可執行。

在極簡化程式碼之前，您應該始終保留檔案的副本。極簡化是改善頁面載入時間的好方法。我們相信這些免費的線上CSS極簡化工具列表將幫助您減少CSS程式碼。您是否使用過上述列出的任何CSS檔案線上極簡化工具？

css CSS優化 CSS極簡化程式碼壓縮

27個免費線上CSS檔案極簡化工具

手動為CSS檔案瘦身