Design News
網頁設計新知
沒想到吧！CSS也是可以被壓縮的唷！其實，我朋友曾經問過我，有必要對CSS做這種手段的壓縮嗎？我想，如果CSS又少又精簡，當然可以不需要這麼做，但是如果CSS又大又恐怖的話，我想這樣的壓縮動作也許還可以幫上一點忙吧！
這篇文章的原文，是 The Definitive Post on Gzipping your CSS ，作者於2004年時提出這樣的想法，後來引起不少人的迴響，英文閱讀OK的人，可以直接去該作者的網站閱讀完整的技術文章，裡面有整個程式的詳細說明與來龍去脈。
通常網站越龐大，所使用的CSS就越加的可怕，要是好死不死還碰到對CSS最佳化不擅長的網頁設計師，那個CSS根本就是裝滿肥肉的哥吉拉。這招可以有效的壓縮和減少CSS的檔案大小，大大的降低了網頁下載時的負載，基本上，該作者介紹了兩個減少CSS檔案大小的方法：
第一個方法，要在CSS檔案當中加入一點點的PHP語法，所以請把*.css的副檔名改成*.php，並且在CSS檔案開頭加上下列這串語法：
<?php
ob_start ("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>以上語法做了四件事情：
1.使用PHP的 ob_gzhandler 送出壓縮檔案，這個函式將會先檢查瀏覽器是否接受gzip的編碼型態，如果不接受，那就給它沒壓縮的檔案
2.送標頭，裡面包含了檔案類別與編碼資料
3.接著則是送出快取控制設定，這裡面的must-revalidate是確保不管你的文件可以讀取到你所送出的最新資訊
4.最後，就是送出Expires的標頭，設定快取檔的有效時間，這裡設定的時間是一小時
這個方法並沒有很漂亮，CSS裡面夾帶了php檔案看起來也不怎麼漂亮，就是實用而已，引用檔案的時候，只要使用：@import url(mycss.php); 引用就可以了。
第二個方法比較漂亮跟優雅，不需要在CSS檔案當中加入其他的程式碼，也不需要改變你的CSS副檔名，而且….它只需要兩個步驟喔！很神吧～不過缺點是，資料夾裡面所有的CSS檔案都會被壓縮喔！
首先，你必須要建立一個PHP檔案，裡面寫入上面那串程式碼，並且幫它命名成’gzip-css.php’；再來，把下面的程式碼加入.htaccess的檔案當中，並且存放在和CSS相同的檔案路徑中：
AddHandler application/x-httpd-php .css
php_value auto_prepend_file gzip-css.php
php_flag zlib.output_compression On
上面這串程式碼，總共做了三件事情：
1.首先告訴Apache把所有的css檔案當成PHP輸出
2.第二行把gzip-css.php的程式碼加在每個CSS檔案前面
3.[非必要]第三行將php.ini中的 zlib.output_compression 給打開，告訴PHP要啟動zlib的壓縮功能；因為主機可能不允許你編輯php.ini，所以只有用動態來變更囉！
真的是很神奇呢！不過因為我自己沒有親自試過，所以不確定這兩種作法實際上的差異以及效果，甚至實做時所會遇到的問題，等到我有空親自試過以後，再把一些細節補上吧！
Filed under: CSS