欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

說(shuō)說(shuō)CSS Hack 和向后兼容(推薦)

  發(fā)布時(shí)間：2010-07-15 00:29:54   作者：佚名   我要評(píng)論
人一旦習(xí)慣了某些東西就很難去改，以及各種各樣的原因，新的瀏覽器越來(lái)越多，而老的總淘汰不了。
增長(zhǎng)總是快于消亡導(dǎo)致了瀏覽器兼容是成了談不完的話題。說(shuō)到瀏覽器兼容，CSS HACK自然而然地被我們想起。今天，我們通常都有一個(gè)團(tuán)隊(duì)或者將有一個(gè)團(tuán)隊(duì)的人在一個(gè)公司里面做相同的事，需要我們有統(tǒng)一的規(guī)范來(lái)進(jìn)行Coding，以方便維護(hù)。而解決兼容的方法就是（必須是，因?yàn)檫@才最容易有問(wèn)題的）其中一個(gè)最重要的、要解決的規(guī)范之一。

在解決兼容方法上，想定出一個(gè)統(tǒng)一的規(guī)范，個(gè)人認(rèn)為應(yīng)該以下面3點(diǎn)為基本原則：
權(quán)衡成本：在瀏覽器被淘汰后，如何快速清理掉無(wú)用代碼
可維護(hù)：在資源成本和完美間平衡的向后兼容
可讀：省力、易記
這里把成本放在了第一位，并不是說(shuō)我們不愿意追求完美，而只是，太刻意追求完美有時(shí)候可能會(huì)阻礙我們前進(jìn)；在成本后，應(yīng)該是可維護(hù)和可讀，這點(diǎn)對(duì)于團(tuán)隊(duì)的合作來(lái)說(shuō)至關(guān)重要，而最終結(jié)果也是為了減少成本。
先把這三個(gè)原則存起來(lái)，來(lái)看看我們平時(shí)解決兼容的寫(xiě)法（后面會(huì)附詳細(xì)的Hack方法列表）：
一、CSS 選擇器 Hack

復(fù)制代碼
代碼如下:

/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{head~body .sofish{display:block;}}

這種寫(xiě)法的優(yōu)缺點(diǎn)是：
優(yōu)點(diǎn)：全面，各種HACK都有；清理無(wú)用代碼里易認(rèn)
缺點(diǎn)：選擇器名稱不易記；代碼量多（要重復(fù)寫(xiě)選擇器）
二、CSS 屬性 Hack

復(fù)制代碼
代碼如下:

.sofish{
padding:10px;
padding:9px\9; /* all ie */
padding:8px\0; /* ie8-9 */
*padding:5px; /* ie6-7 */
+padding:7px; /* ie7 */
_padding:6px; /* ie6 */
}

這種寫(xiě)法的優(yōu)缺點(diǎn)是：
優(yōu)點(diǎn)：易記；代碼少
缺點(diǎn)：不全面
三、IE 注釋

復(fù)制代碼
代碼如下:

<!--[if IE]>IE only<![endif]-->
<!--[if !IE]>NOT IE<![endif]-->

這種寫(xiě)法的優(yōu)缺點(diǎn)是：
優(yōu)點(diǎn)：安全；向后兼容好；易維護(hù)
缺點(diǎn)：用不好會(huì)增加HTTP請(qǐng)求；用得好代碼又多
四、瀏覽器探測(cè)：JS/后端程序判斷

復(fù)制代碼
代碼如下:

// 以jQuery為例，檢測(cè)是否是IE6，是則加上class="ie6"
if ($.browser.msie && $.browser.version = 6 ){
$('div').addClass('ie6');
}

這種寫(xiě)法的優(yōu)缺點(diǎn)是：
優(yōu)點(diǎn)：全面；易維護(hù)；可讀性高
缺點(diǎn)：占資源；代碼量大（要重寫(xiě)選擇器）
上面4種是我們最常用的方法。現(xiàn)在，讓我們抽出心里存著的那3個(gè)原則，看看如何選擇。要時(shí)間思考一下么？這里簡(jiǎn)單地說(shuō)一下我的選擇：
盡量使用單獨(dú)HACK
這樣維護(hù)起來(lái)成本比較低，改動(dòng)不會(huì)影響其他的瀏覽器，而一旦有瀏覽器淘汰，只要搜索關(guān)鍵字，就可以批量去掉這些代碼。比如，ie6的單獨(dú)hack：_padding:6px;；
向后兼容的目標(biāo)：1年
你想現(xiàn)在的網(wǎng)站兼容IE10么，誰(shuí)不想，但這可預(yù)見(jiàn)性太低了，也可以說(shuō)，成本太高了。暫時(shí)沒(méi)必要。不過(guò)，IE9可能要發(fā)布了，所以，選擇像padding:8px\0;這樣的IE8+的hack，在刪掉其他代碼不影響向后兼容上，會(huì)更好；并且，如果IE10出來(lái)，一旦支持這個(gè)hack，而又沒(méi)有這個(gè)bug，可能刪掉只影響2個(gè)瀏覽器，也會(huì)更方便；
盡可能省資源
你要是不考慮頁(yè)面加載速度，不考慮服務(wù)器承受能力的話，那在向后兼容和淘汰的處理上可以做得很完美（從代碼上），但這從某種程度上，不如不做。
五、個(gè)人推薦寫(xiě)法
其實(shí)可以糾結(jié)的還真多，這里結(jié)合A-Grade瀏覽器的種類和HACK的種類，寫(xiě)兩種個(gè)人認(rèn)為比較合理的HACK和向后兼容相兼顧的寫(xiě)法，僅供大家參考的。
經(jīng)濟(jì)實(shí)惠型寫(xiě)法：注重單獨(dú)的HACK。 IE的HACK比較多，選擇省力易記的屬性HACK；其他瀏覽器HACK少，選擇塊狀的選擇器HACK(推薦)

復(fù)制代碼
代碼如下:

.sofish{
padding:10px;
padding:9px\9; /* all ie */
padding:8px\0; /* ie8-9 目前應(yīng)用于IE8的單獨(dú)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 all and (-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 */

準(zhǔn)完美主義寫(xiě)法：配合IE注釋，一律采用選擇器HACK（選擇性推薦）
HTML: 添加body class

復(fù)制代碼
代碼如下:

<!--[if IE6]--><body class="ie6"><![endif]-->
<!--[if IE7]--><body class="ie7"><![endif]-->
<!--[if IE8]--><body class="ie8"><![endif]-->
<!--[if IE9]--><body class="ie9"><![endif]-->
<!--[if !IE]--><body class="non-ie"><![endif]-->


復(fù)制代碼
代碼如下:

.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 all and (-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 */

然后，從第二種方式我們也可以發(fā)現(xiàn)。把IE注釋用在body class上，而不是添加單獨(dú)的<link />或者@import會(huì)是更好的選擇。雖然分文件也是一種不錯(cuò)的選擇，但了為頁(yè)面加載速度，HTTP請(qǐng)求一個(gè)都不能浪費(fèi)。
至于利用JS或者后端程序來(lái)判斷，除非你有足夠的資源，除非你解決不了（90%不會(huì)發(fā)生），不然，并不推薦用。附上一個(gè)表（via），可以參考參考：
六：全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表：

提示：您可以先修改部分代碼再運(yùn)行

其他的就不多說(shuō)了。不過(guò)，還是要提醒一下: 注釋也是很重要的。雖然是HACK了，但現(xiàn)實(shí)中情況有時(shí)候比想象中的復(fù)雜得多，給代碼一個(gè)注釋，好過(guò)千言萬(wàn)語(yǔ)。
最后，還是那句，希望看到你更好的方法！

相關(guān)文章

  • 淺談原生頁(yè)面兼容IE9問(wèn)題的解決方案

    這篇文章主要介紹了淺談原生頁(yè)面兼容IE9問(wèn)題的解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起
    2020-12-16

  • 新版chrome瀏覽器設(shè)置允許跨域的實(shí)現(xiàn)

    這篇文章主要介紹了新版chrome瀏覽器設(shè)置允許跨域的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起
    2020-11-30

  • css hack之\9和\0就可能對(duì)hack IE11\IE9\IE8無(wú)效

    每次設(shè)計(jì)一張網(wǎng)頁(yè)或一個(gè)表單，都被各種瀏覽器的兼容問(wèn)題傷透腦筋，尤其是IE家族。在做兼容性設(shè)計(jì)時(shí)，我們往往會(huì)使用各種瀏覽器能識(shí)別的獨(dú)特語(yǔ)法進(jìn)行hack，從而達(dá)到各種瀏覽
    2020-03-20

  • css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼

    這篇文章主要介紹了css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼,需要的朋友可以參考下
    2020-03-20

  • 解決CSS瀏覽器兼容性問(wèn)題的4種方案

    這篇文章主要介紹了解決CSS瀏覽器兼容性問(wèn)題的4種方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)
    2020-02-28

  • 常見(jiàn)的瀏覽器兼容性問(wèn)題(小結(jié))

    這篇文章主要介紹了常見(jiàn)的瀏覽器兼容性問(wèn)題(小結(jié))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)
    2020-02-20

  • border-radius IE8兼容處理的方法

    這篇文章主要介紹了border-radius IE8兼容處理的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)
    2020-02-12

  • 淺談?dòng)龅降膸讉€(gè)瀏覽器兼容性問(wèn)題

    這篇文章主要介紹了淺談?dòng)龅降膸讉€(gè)瀏覽器兼容性問(wèn)題，詳細(xì)的介紹了幾種我遇到的問(wèn)題和解決方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2018-09-26

  • base64圖片在各種瀏覽器的兼容性處理

    這篇文章主要介紹了base64圖片在各種瀏覽器的兼容性處理的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-14

  • 對(duì)常見(jiàn)的css屬性進(jìn)行瀏覽器兼容性總結(jié)(推薦)

    這篇文章主要介紹了對(duì)常見(jiàn)的css屬性進(jìn)行瀏覽器兼容性總結(jié)(推薦)的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-07-20

最新評(píng)論