Css Compressor- Css壓縮的好工具/網站大整理
當一個網站建置完成時，將css檔壓縮，減少其檔案大小，有其好處。
線上有許多網站跟工具可以幫忙你壓縮css檔，
並且為已撰寫好的css檔進行優化。
以下逐一介紹：
以本網站的default.css作為範例，來比較各壓縮網站/工具的優劣。
• site1:
css compressor
1.將margin:0 0 0 0;這種寫法變成margin:0;
2.將0px加上像素單位的這種寫法px變成0;
3.壓縮顏色色碼的寫法，例如 #ffffff 變成 #fff;
4.將font-weight:normal; normal值改為400;（利用數字的換算來減少空間）
5.移除空白字元，移除註解。(對css hack無影響, css hack的寫法並不會被移除)
6.有4種壓縮程度可以選擇，low, standard,high, highest:
這幾種的差別在於css樣式表排列的方式不同。
7.下面有壓縮百分比顯示共減少了多少檔案量。
8.使用結果：壓縮濾為12.973KB/24.228KB = 46.5% (-11255 Bytes)
• Site2: Clean CSS
除了擁有與上述網站有的優點之外，
這個網站(CleanCss)是根據CSStidy v1.0版本而進行開發的，
還可以選擇將具有同樣屬性的css, merge在一起（但要謹慎使用）
為此進行實驗，我自己撰寫了一個css檔，其中具有以下特性
1. class red 與 footer 具有相同的值，
2. 值為0時伴有px, 例如 margin:0px;
3. 有大寫的class命名。
4. class撰寫的順序跳著寫 例如 .content下之後並不是接 .content p
5. Css 撰寫layout不整齊。
進行壓縮之前，可以選擇將撰寫過的選擇器重新排序分類（需謹慎使用）
也可以選擇將有同樣屬性的選擇器合併為一，例如
.red{color:red;}
.footer{color:red;}
會變成 .red, .footer{color:red;}
也可以選擇將大寫的css class/id命名全部轉為小寫。
壓縮結果：
1.class red, footer因為具有相同的屬性而被合併寫在一起。
2.具有大寫的class命名被轉化為小寫了。
3.content 下緊接著.content p,
4.layout 漂亮多了
5.所有0值後的
例如：margin:0
• Css Tidy
想要將css壓縮程式打包下載的人，選擇這個就對了。Csstidy 提供程式開發者直接將css壓縮寫進程式裡，
更詳細的介紹請到 Css tidy usage。
除了上面的好處他都有之外，
他可以將多寫的屬性給去掉
例如 .class{property:x;property:y;} 變成 .class{property:y;}
所有重複的屬性會被覆蓋掉。
並且背景的屬性會被合併在一起，
例如：background-color, background-image, 等全部會被合寫為background:...;
壓縮前後的範例在此
更多壓縮特徵參考在此
想要打包下載嗎？按這裡就對了
• 個人使用心得
雖然上述網站都滿方便的，但我個人建議，在撰寫css時，盡量養成好習慣，
例如margin-top:12px; margin-left:10px;
可以濃縮成margin:12px 0 0 10px;
這種寫法。
而使用compressor，我建議是撰寫到某個段落時，
即可使用compressor,
用意是在幫你先行將具有相同屬性的css class寫在一起，
以後沿用即可。（當然請先別壓縮Css layout的部份）
而最後再進行compress，在選擇設定選項時，
要格外的小心，因為css繼承特性的關係，其實有一定的風險，
變成最後能壓縮的部份可能只是把空白移除，註解拿掉，
縮成一行，而屬性分類這部份雖然很貼心，但對於龐大繁雜的css檔還是
有一定的風險。
對了，上面舉的四個網站，壓縮能力比較起來是第二個最佳。
並且這些工具在壓縮CSS檔時，並不會將Hack拿掉喔。
所以可以放心的使用。
其他更多CSS相關壓縮網站：
1.Csstidy
2.CssTidyonline
3.Csscompressor
4.csscheck
5.codebeautifier
6.Free CSS Validator, CSS Formatter, CSS Compressor
7.23 Resources for Clean and Compressed CSS
沒有留言:
張貼留言