人一旦習慣了某些東西就很難去改,以及各種各樣的原因,新的瀏覽器越來越多,而老的總淘汰不了。增長總是快于消亡導致了瀏覽器兼容是成了談不完的話題。說到瀏覽器兼容,CSS HACK自然而然地被我們想起。今天,我們通常都有一個團隊或者將有一個團隊的人在一個公司里面做相同的事,需要我們有統(tǒng)一的規(guī)范來進行Coding,以方便維護。而解決兼容的方法就是(必須是,因為這才最容易有問題的)其中一個最重要的、要解決的規(guī)范之一。
在解決兼容方法上,想定出一個統(tǒng)一的規(guī)范,個人認為應該以下面3點為基本原則:
- 權(quán)衡成本:在瀏覽器被淘汰后,如何快速清理掉無用代碼
- 可維護:在資源成本和完美間平衡的向后兼容
- 可讀:省力、易記
這里把成本放在了第一位,并不是說我們不愿意追求完美,而只是,太刻意追求完美有時候可能會阻礙我們前進;在成本后,應該是可維護和可讀,這點對于團隊的合作來說至關(guān)重要,而最終結(jié)果也是為了減少成本。
先把這三個原則存起來,來看看我們平時解決兼容的寫法(后面會附詳細的Hack方法列表):
一、CSS 選擇器 Hack
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{head~body .sofish{display:block;}}
這種寫法的優(yōu)缺點是:
- 優(yōu)點:全面,各種HACK都有;清理無用代碼里易認
- 缺點:選擇器名稱不易記;代碼量多(要重復寫選擇器)
二、CSS 屬性 Hack
.sofish{
padding:10px;
padding:9px\9; /* all ie */
padding:8px\0; /* ie8-9 */
*padding:5px; /* ie6-7 */
+padding:7px; /* ie7 */
_padding:6px; /* ie6 */
}
這種寫法的優(yōu)缺點是:
- 優(yōu)點:易記,代碼少
- 缺點:不全面
-
三、IE 注釋
IE only
這種寫法的優(yōu)缺點是:
- 優(yōu)點:安全;向后兼容好;易維護
- 缺點:用不好會增加HTTP請求;用得好代碼又多
四、瀏覽器探測:JS/后端程序判斷
// 以jQuery為例,檢測是否是IE6,是則加上class="ie6"
if ($.browser.msie && $.browser.version = 6 ){
$('div').addClass('ie6');
}
這種寫法的優(yōu)缺點是:
- 優(yōu)點:全面;易維護;可讀性高
- 缺點:占資源;代碼量大(要重寫選擇器)
上面4種是我們最常用的方法,F(xiàn)在,讓我們抽出心里存著的那3個原則,看看如何選擇。要時間思考一下么?這里簡單地說一下我的選擇:
1、盡量使用單獨HACK
這樣維護起來成本比較低,改動不會影響其他的瀏覽器,而一旦有瀏覽器淘汰,只要搜索關(guān)鍵字,就可以批量去掉這些代碼。比如,ie6的單獨hack:
_padding:6px;;
2、向后兼容的目標:1年
你想現(xiàn)在的網(wǎng)站兼容IE10么,誰不想,但這可預見性太低了,也可以說,成本太高了。暫時沒必要。不過,IE9可能要發(fā)布了,所以,選擇像
padding:8px\0;
這樣的IE8+的hack,在刪掉其他代碼不影響向后兼容上,會更好;并且,如果IE10出來,一旦支持這個hack,而又沒有這個bug,可能刪掉只影響2個瀏覽器,也會更方便;
3、盡可能省資源
你要是不考慮頁面加載速度,不考慮服務器承受能力的話,那在向后兼容和淘汰的處理上可以做得很完美(從代碼上),但這從某種程度上,不如不做。
-
五、個人推薦寫法
其實可以糾結(jié)的還真多,這里結(jié)合A-Grade瀏覽器的種類和HACK的種類,寫兩種個人認為比較合理的HACK和向后兼容相兼顧的寫法,僅供大家參考的。