每天都會用到的 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 的環境,依照以下步驟執行即可:
  1. 將檔案 copy 回自己的機器:
    > curl http://browsers.garykeith.com/stream.asp?Lite_PHP_BrowsCapINI > ~/browscap.ini > sudo mv ~/browscap.ini /etc/php5/apache2/.  
  2. 修改 php.ini
    > sudo vim /etc/php5/apache2/php.ini 
  3. 把 browscap 的註解拿掉,改為:
    [browscap] browscap = /etc/php5/apache2/browscap.ini    
  4. 重新啟動 Apache:
    sudo /etc/init.d/apache2 restart 
  5. 裝好之後,你可以寫個簡單的 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
創作者介紹

佳佳的窩

天秤女~佳佳 發表在 痞客邦 PIXNET 留言(0) 人氣()