CSS Hack和向後相容的常見問題

CSS Hack和向後相容的常見問題

　　人一旦習慣了某些東西就很難去改，以及各種各樣的原因，新的瀏覽器越來越多，而老的總淘汰不了。增長總是快於消亡導致了瀏覽器安全色是成了談不完的話題。說 到瀏覽器安全色，CSS HACK自然而然地被我們想起。今天，我們通常都有一個團隊或者將有一個團隊的人在一個公司裡面做相同的事，需要我們有統一的規範來進行Coding，以 方便維護。而解決相容的方法就是(必須是，因為這才最容易有問題的)其中一個最重要的、要解決的規範之一。

　　在解決相容方法上，想定出一個統一的規範，個人認為應該以下面3點為基本原則：

　　權衡成本：在瀏覽器被淘汰後，如何快速清理掉無用代碼 可維護：在資源成本和完美間平衡的向後相容 可讀：省力、易記

　　這裡把成本放在了第一位，並不是說我們不願意追求完美，而只是，太刻意追求完美有時候可能會阻礙我們前進;在成本後，應該是可維護和可讀，這點對於團隊的合作來說至關重要，而最終結果也是為了減少成本。

　　先把這三個原則存起來，來看看我們平時解決相容的寫法(後面會附詳細的Hack方法列表)：

　　一、CSS 選取器 Hack/* Opera */

　　@media all and(-webkit-min-device-pixel-ratio:10000),not alland(-webkit-min-device-pixel-ratio:0)

　　{head~body .sofish{display:block;}}

　　這種寫法的優缺點是：

　　優點：全面，各種HACK都有;清理無用代碼裡易認 缺點：選取器名稱不易記;代碼量多(要重複寫選取器) 二、CSS 屬性 Hack.sofish {

　　padding:10px;

　　padding:9px9;/* all ie */

　　padding:8px;/* ie8-9 */

　　*padding:5px;/* ie6-7 */

　　+padding:7px;/* ie7 */

　　_padding:6px;/* ie6 */

　　}

　　這種寫法的優缺點是：

　　優點：易記;代碼少 缺點：不全面 三、IE 注釋IE only

　　

　　這種寫法的優缺點是：

　　優點：安全;向後相容好;易維護 缺點：用不好會增加HTTP請求;用得好代碼又多 四、瀏覽器探測：JS/後端程式判斷// 以jQuery為例，檢測是否是IE6，是則加上class="ie6"

　　if($.browser.msie && $.browser.version =6){

　　$('div').addClass('ie6');

　　}

　　這種寫法的優缺點是：

　　優點：全面;易維護;可讀性高 缺點：佔資源;代碼量大(要重寫選取器)

　　上面4種是我們最常用的方法。現在，讓我們抽出心裡存著的那3個原則，看看如何選擇。要時間思考一下麼?這裡簡單地說一下我的選擇：

　　盡量使用單獨HACK

　　這樣維護起來成本比較低，改動不會影響其他的瀏覽器，而一旦有瀏覽器淘汰，只要搜尋索引鍵，就可以批量去掉這些代碼。比如，ie6的單獨hack：_padding:6px;;

　　向後相容的目標：1年

　　你想現在的網站相容IE10麼，誰不想，但這可預見性太低了，也可以說，成本太高了。暫時沒必要。不過，IE9可能要發布了，所以，選擇像padding:8px;這樣的IE8+的hack，在刪掉其他代碼不影響向後相容上，會更好;並且，如果IE10出來，一旦支援這個hack，而又沒有這個bug，可能刪掉隻影響2個瀏覽器，也會更方便;

　　儘可能省資源

　　你要是不考慮頁面載入速度，不考慮伺服器承受能力的話，那在向後相容和淘汰的處理上可以做得很完美(從代碼上)，但這從某種程度上，不如不做。

　　五、個人推薦寫法

　　其實可以糾結的還真多，這裡結合A-Grade瀏覽器的種類和HACK的種類，寫兩種個人認為比較合理的HACK和向後相容相兼顧的寫法，僅供大家參考的。

　　經濟實惠型寫法：注重單獨的HACK。 IE的HACK比較多，選擇省力易記的屬性HACK;其他瀏覽器HACK少，選擇塊狀的選取器HACK(推薦)

　　.sofish {

　　padding:10px;

　　padding:9px9;/* all ie */

　　padding:8px;/* ie8-9 目前應用於IE8的單獨hack，情況比較少 */

　　*padding:5px;/* ie6-7 */

　　+padding:7px;/* ie7 */

　　_padding:6px;/* ie6 */

　　}

　　/* webkit and opera */

　　@media all and(min-width:0px){.sofish{padding:11px;}}

　　/* webkit */

　　@media screen and(-webkit-min-device-pixel-ratio:0){.sofish{padding:11px;}}

　　/* opera */

　　@media all and(-webkit-min-device-pixel-ratio:10000),not alland(-webkit-min-device-pixel-ratio:0){.sofish{padding:11px;}}

　　/* firefox * /

　　@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */

　　html>/**/body .sofish, x:-moz-any-link, x:default{ padding:11px;}/* newest firefox */

　　准完美主義寫法：配合IE注釋，一律採用選取器HACK(選擇性推薦)

　　HTML:添加body class

　　<!--[if IE6]--><![endif]-->

　　<!--[if IE7]--><![endif]-->

　　<!--[if IE8]--><![endif]-->

　　<!--[if IE9]--><![endif]-->

　　<!--[if!IE]--><![endif]-->.sofish { padding:10px;}

　　.non-ie .sofish { padding:12px;}

　　.ie9 .sofish { padding:9px;}

　　.ie8 .sofish { padding:8px;}

　　.ie7 .sofish { padding:7px;}

　　.ie6 .sofish { padding:6px;}

　　/* webkit and opera */

　　@media all and(min-width:0px){.sofish{padding:11px;}}

　　/* webkit */

　　@media screen and(-webkit-min-device-pixel-ratio:0){.sofish{padding:11px;}}

　　/* opera */

　　@media all and(-webkit-min-device-pixel-ratio:10000),not alland(-webkit-min-device-pixel-ratio:0){.sofish{padding:11px;}}

　　/* firefox */

　　@-moz-document url-prefix(){.sofish{padding:11px;}}/* all firefox */

　　html>/**/body .sofish, x:-moz-any-link, x:default{ padding:11px;}/* newest firefox */

　　然後，從第二種方式我們也可以發現。把IE注釋用在body class上，而不是添加單獨的或者@import會是更好的選擇。雖然分檔案也是一種不錯的選擇，但了為頁面載入速度，HTTP請求一個都不能浪費。

　　至於利用JS或者後端程式來判斷，除非你有足夠的資源，除非你解決不了(90%不會發生)，不然，並不推薦用。附上一個表(via)，可以參考參考：

　　六：全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表：/***** Selector Hacks ******/

　　/* IE6 and below */

　　* html #uno { color: red }

　　/* IE7 */

　　*:first-child+html #dos { color: red }

　　/* IE7, FF, Saf, Opera */

　　html>body #tres { color: red }

　　/* IE8, FF, Saf, Opera (Everything but IE 6,7) */

　　html>/**/body #cuatro { color: red }

　　/* Opera 9.27 and below, safari 2 */

　　html:first-child #cinco { color: red }

　　/* Safari 2-3 */

　　html[xmlns*=""] body:last-child #seis { color: red }

　　/* safari 3+, chrome 1+, opera9+, ff 3.5+ */

　　body:nth-of-type(1)#siete { color: red }

　　/* safari 3+, chrome 1+, opera9+, ff 3.5+ */

　　body:first-of-type #ocho { color: red }

　　/* saf3+, chrome1+ */

　　@media screen and(-webkit-min-device-pixel-ratio:0){

　　#diez { color: red }

　　}

　　/* iPhone / mobile webkit */

　　@media screen and(max-device-width:480px){

　　#veintiseis { color: red }

　　}

　　/* Safari 2 - 3.1 */

　　html[xmlns*=""]:root #trece { color: red }

　　/* Safari 2 - 3.1, Opera 9.25 */

　　*|html[xmlns*=""]#catorce { color: red }

　　/* Everything but IE6-8 */

　　:root *>#quince { color: red }

　　/* IE7 */

　　*+html #dieciocho { color: red }

　　/* Firefox only. 1+ */

　　#veinticuatro, x:-moz-any-link { color: red }

　　/* Firefox 3.0+ */

　　#veinticinco, x:-moz-any-link, x:default { color: red }

　　/***** Attribute Hacks ******/

　　/* IE6 */

　　#once { _color: blue }

　　/* IE6, IE7 */

　　#doce { *color: blue; /* or #color: blue */ }

　　/* Everything but IE6 */

　　#diecisiete { color/**/: blue }

　　/* IE6, IE7, IE8 */

　　#diecinueve { color: blue9; }

　　/* IE7, IE8 */

　　#veinte { color/***/: blue9; }

　　/* IE6, IE7 -- acts as an !important */

　　#veintesiete { color: blue !ie; } /* string after ! can be anything */

　　其他的就不多說了。不過，還是要提醒一下: 注釋也是很重要的。雖然是HACK了，但現實中情況有時候比想象中的複雜得多，給代碼一個注釋，好過千言萬語。

　　最後，還是那句，希望看到你更好的方法!