再會了，CSS Hack @ 佳佳的窩

每天都會用到的 CSS Hack

之前當前端工程師 (F2E) 時，常得對不同瀏覽器的 CSS 樣式做非常細微的處理，以知識+ 的某個 Rule 為例：

.ykpmodule .hd div h3 {      padding:9px 7px 0;      *padding-bottom:4px;      _padding-bottom:0; }

第 1 行是所有瀏覽器、第 2 行是所有 IE、第 3 行是 IE6 含以前，但第二行被第三行影響到後，只有 IE7 以後會套到，這樣的方法算簡單。加上公司有規定 DOCTYPE 與套用 YUI Reset 與 Fonts，建立了良好的 CSS 撰寫環境，所以一直以來都只用到這兩種 CSS Hack 就幾乎可以滿足所有需求。

此 CSS Hack 所碰到的問題

之前覺得此方法不方便時是在 Study 一套叫 CSSTidy 的工具：它不但可以做最小化（去除換行與空白）、也可以整理多個相同的 Rule 成一個、及把屬性與屬性值縮減成最短。但就是死在 * 這個 Hack，改了好久都不成功，反正只是 Nice to have，放棄不用也沒差。
而最近 IE8 一直都沒有好的 CSS Hack 可以應用，只能在 Header 裡面切換到 IE7 Compatible，不是個好的或標準的解法。同事中肯兄是建議用 Conditional Comment 來解決：

這種方法還不錯，因為可以只用一個 CSS 檔案、不同的 Class 來做，針對 IE 不需要使用任何的 Hack：

.ykpmodule .hd div h3 {padding:9px 7px 0;} .ie6 .ykpmodule .hd div h3 {padding-bottom:0;} .ie7 .ykpmodule .hd div h3 {padding-bottom:4px;} .ie8 .ykpmodule .hd div h3 {padding-bottom:2px;}

但是用 Conditional Comments 的問題就在於不標準，此外僅 IE 支援，我個人也很討厭在 HTML 裡面還要有一些奇怪的邏輯判斷。就在想有沒有一些更好的解法...

什麼是 browscap？

先前老爹有吩咐，叫我花點時間瞭解一下 browscap，研究後才發現這是解決 CSS Hack 的王道啊！browscap 是由 Microsoft 提出，藉由 Web Server 定期的自動更新一個叫 browscap.dll 的檔案，讓程式可以從 Header 的 User Agent String 中對應出正確的 Browser 與 Operation System、以及其版本。但微軟提出了這個計畫後並沒有持續地更新這個檔案。還好有位叫做 Gary Keith 的好心人，藉由每個禮拜日分析自己網站上的 Log 檔、更新 browscap.ini 檔案並提供其他人下載使用。（browscap 官網）

安裝 browscap 的步驟

使用起來很簡單，我是 Apache 2.0 + PHP5 + Debian 的環境，依照以下步驟執行即可：

將檔案 copy 回自己的機器：

> curl http://browsers.garykeith.com/stream.asp?Lite_PHP_BrowsCapINI > ~/browscap.ini > sudo mv ~/browscap.ini /etc/php5/apache2/.

修改 php.ini
```
> sudo vim /etc/php5/apache2/php.ini 
```

把 browscap 的註解拿掉，改為：

[browscap] browscap = /etc/php5/apache2/browscap.ini

重新啟動 Apache：
```
sudo /etc/init.d/apache2 restart 
```
裝好之後，你可以寫個簡單的 PHP 來看看是否正確：
```
 
```

PHP 官方的 get_browser 的 function 頁面也有特別推薦要更新此檔案才能讓 get_browser() 取得正確的資料。

著手解決 CSS Hack

只要寫短短的 PHP Code 就可以做到上面 Conditional Comments 的所有工作，經過測試即使不做 Cookie 的 Cache、每次載入頁面都執行 get_browser() 也花不到什麼資源！

browser . $browser->majorver); ?>

更棒的是，管你是 IE 還是 Safari 甚至是 Chrome，我們都可以用不是 Hack 的作法來解決：

.ykpmodule .hd div h3 {padding:9px 7px 0;} .ie7 .ykpmodule .hd div h3 {padding-bottom:4px;} .ie8 .ykpmodule .hd div h3 {padding-bottom:2px;} .safari2 .ykpmodule .hd div h3 {padding-bottom:10px;} .chrome1 .ykpmodule .hd div h3 {padding-bottom:1em;}

延伸的想法

其實 browscap 還可以用來作為 Device 的判定，像是可以依據手機的不同就吐不同的網頁。另外就是既然沒有 CSS Hack 的存在，那麼我就可以使用 CSSTidy 讓 CSS 檔案達到更有效率的最小化。對了，記得還自己做 Cron Job 每個禮拜把最新的 browscap.ini 抓回來喔！

http://josephjiang.com/entry.php?id=249