CSS HACK 解決兼容的寫法二

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS HACK 解決兼容的寫法二

CSS HACK 解決兼容的寫法二

編輯：CSS進階教程

破洛洛文章簡介：說說CSS Hack 和向後兼容.

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

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

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

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

先把這三個原則存起來，來看看我們平時解決兼容的寫法（後面會附詳細的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;}}

這種寫法的優缺點是：

優點：全面，各種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 */
}

這種寫法的優缺點是：

優點：易記，代碼少
缺點：不全面

破洛洛文章簡介：說說CSS Hack 和向後兼容.

三、IE 注釋

這種寫法的優缺點是：

優點：安全；向後兼容好；易維護
缺點：用不好會增加HTTP請求；用得好代碼又多

四、浏覽器探測：JS/後端程序判斷

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

這種寫法的優缺點是：

優點：全面；易維護；可讀性高
缺點：占資源；代碼量大（要重寫選擇器）

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

1、盡量使用單獨HACK

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

_padding:6px;；

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

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

padding:8px\0;

這樣的IE8+的hack，在刪掉其他代碼不影響向後兼容上，會更好；並且，如果IE10出來，一旦支持這個hack，而又沒有這個bug，可能刪掉只影響2個浏覽器，也會更方便；

3、盡可能省資源

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

破洛洛文章簡介：說說CSS Hack 和向後兼容.

五、個人推薦寫法

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

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

.sofish{
    padding:10px;
    padding:9px\9; /* all ie */
    padding:8px\0; /* 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 all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }

HTML: 添加body class:

<body class="ie6"><![endif]-->
<body class="ie7"><![endif]-->
<body class="ie8"><![endif]-->
<body class="ie9"><![endif]-->
<body class="non-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 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 */
[/css]
<p>然後，從第二種方式我們也可以發現。把IE注釋用在body class上，而不是添加單獨的<code><link /></code>或者<code>@import</code>會是更好的選擇。雖然分文件也是一種不錯的選擇，但了為頁面加載速度，HTTP請求一個都不能浪費。</p>
<p>至於利用JS或者後端程序來判斷，除非你有足夠的資源，除非你解決不了（90%不會發生），不然，並不推薦用。附上一個表（<a rel="nofollow" href="viahttp://paulirish.com/2009/browser-specific-css-hacks/">via</a>），可以參考參考：</p>
<h3>六：全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表：</h3>
[cc lang="css"]
/***** 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: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
其他的就不多說了。不過，還是要提醒一下: 注釋也是很重要的。雖然是HACK了，但現實中情況有時候比想象中的復雜得多，給代碼一個注釋，好過千言萬語。

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

原文：
http://ued.alipay.com/2010/05/talk-about-css-hack-and-backward-compatibility/

上一頁:CSS實例教程:CSS制作好看的網頁表格
下一頁:CSS box-align: center實現子框架居中

CSS進階教程

樣式表概述：CSS實用代碼介紹: 　　CSS（Cascading Stylesheets，層疊樣式表）是一種制作網頁的新技術，現在已
CSS+JS實現的選項卡效果: <!doctype html public -//w3c//dtd xhtm
CSS3教程:使css3的屬性在ie中正常顯示: pie使css3的屬性在ie中正常顯示（純css3圓角兼容ie6）今天在群裡看到gucong說的，寫

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

DIV CSS 佈局教程網

相關文章