各種css hack 相容性探測

css hack:瀏覽器相容的一些寫法

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

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

1.權衡成本：在瀏覽器被淘汰後，如何快速清理掉無用**

2.可維護：在資源成本和完美間平衡的向後相容

3.可讀：省力、易記

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

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

一、css 選擇器 hack

/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
}

這種寫法的優缺點是：

優點：全面，各種hack都有；清理無用**裡易認

缺點：選擇器名稱不易記；**量多（要重複寫選擇器）

二、css 屬性 hack

sofish

這種寫法的優缺點是：

優點：易記，**少

缺點：不全面

三、ie 注釋

這種寫法的優缺點是：

優點：安全；向後相容好；易維護

缺點：用不好會增加http請求；用得好**又多

四、瀏覽器探測：js/後端程式判斷

// 以jquery為例，檢測是否是ie6，是則加上class="ie6" 
if ($.browser.msie && $.browser.version = 6 )

這種寫法的優缺點是：

優點：全面；易維護；可讀性高

缺點：佔資源；**量大（要重寫選擇器）

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

1、盡量使用單獨hack

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

_padding:6px;

2、向後相容的目標：1年

padding:8px\0;

你想現在的**相容ie10麼，誰不想，但這可預見性太低了，也可以說，成本太高了。暫時沒必要。不過，ie9可能要發布了，所以，選擇像

這樣的ie8+的hack，在刪掉其他**不影響向後相容上，會更好；並且，如果ie10出來，一旦支援這個hack，而又沒有這個bug，可能刪掉只影響2個瀏覽器，也會更方便；

3、盡可能省資源

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

五、個人推薦寫法

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

.sofish

/* webkit and opera */

@media all and (min-width: 0px) }

/* webkit */

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

/* opera */

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

/* firefox * /

@-moz-document url-prefix()} /* all firefox */

html>/**/body .sofish, x:-moz-any-link, x:default /* newest firefox */

html: 新增body class:

.sofish

.non-ie .sofish

.ie9 .sofish

.ie8 .sofish

.ie7 .sofish

.ie6 .sofish

/* webkit and opera */

@media all and (min-width: 0px) }

/* webkit */

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

/* opera */

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

/* firefox * /

@-moz-document url-prefix()} /* all firefox */

html>/**/body .sofish, x:-moz-any-link, x:default /* newest firefox */

六：全面的ie6+ / firefox / webkit / opera css hack列表：

[cc lang="css"]

/***** selector hacks ******/

/* ie6 and below */

* html #uno

/* ie7 */

*:first-child+html #dos

/* ie7, ff, saf, opera */

html>body #tres

/* ie8, ff, saf, opera (everything but ie 6,7) */

html>/**/body #cuatro

/* opera 9.27 and below, safari 2 */

html:first-child #cinco

/* safari 2-3 */

html[xmlns*=""] body:last-child #seis

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

body:nth-of-type(1) #siete

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

body:first-of-type #ocho

/* saf3+, chrome1+ */

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

}/* iphone / mobile webkit */

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

}/* safari 2 - 3.1 */

html[xmlns*=""]:root #trece

/* safari 2 - 3.1, opera 9.25 */

*|html[xmlns*=""] #catorce

/* everything but ie6-8 */

:root *> #quince

/* ie7 */

*+html #dieciocho

/* firefox only. 1+ */

#veinticuatro, x:-moz-any-link

/* firefox 3.0+ */

#veinticinco, x:-moz-any-link, x:default

/***** attribute hacks ******/

/* ie6 */

#once

/* ie6, ie7 */

#doce

/* everything but ie6 */

#diecisiete

/* ie6, ie7, ie8 */

#diecinueve

/* ie7, ie8 */

#veinte

/* ie6, ie7 -- acts as an !important */

#veintesiete /* string after ! can be anything */

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

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

這裡是hack相容性的東東，其實是從這裡來的

各種css hack 相容性探測

各種相容性的處理

相容性（空格相容性）

不同瀏覽器相容性常用的CSS Hack技術

各種css hack 相容性探測

各種相容性的處理

相容性（空格相容性）

不同瀏覽器相容性 常用的CSS Hack技術

相關推薦

不同瀏覽器相容性常用的CSS Hack技術