當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS Hack 和向后兼容

發(fā)布時間：2025/4/16 CSS 63 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS Hack 和向后兼容小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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

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

權衡成本：在瀏覽器被淘汰后，如何快速清理掉無用代碼

可維護：在資源成本和完美間平衡的向后兼容

可讀：省力、易記

一、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:9px9;?/*?all?ie?*/padding:8px0;?/*?ie8-9?*/*padding:5px;?/*?ie6-7?*/+padding:7px;?/*?ie7?*/_padding:6px;?/*?ie6?*/ }

這種寫法的優(yōu)缺點是：

優(yōu)點：易記；代碼少
缺點：不全面

注：IE都能識別*標準瀏覽器(如FF)不能識別*?
IE6能識別*，但不能識別?!important?
IE7能識別*，也能識別!important?
FF不能識別*，但能識別!important?

另外再補充一個，下劃線"_",?
IE6支持下劃線，IE7和firefox均不支持下劃線。(推薦.我這只有這個有效！)?

三、IE注釋

這種寫法的優(yōu)缺點是：

優(yōu)點：安全；向后兼容好；易維護
缺點：用不好會增加HTTP請求；用得好代碼又多

四、瀏覽器探測：JS/后端程序判斷

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

這種寫法的優(yōu)缺點是：

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

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

盡量使用單獨HACK

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

向后兼容的目標：1年

你想現(xiàn)在的網(wǎng)站兼容IE10么，誰不想，但這可預見性太低了，也可以說，成本太高了。暫時沒必要。不過，IE9可能要發(fā)布了，所以，選擇像padding:8px;這樣的IE8+的hack，在刪掉其他代碼不影響向后兼容上，會更好；并且，如果IE10出來，一旦支持這個hack，而又沒有這個bug，可能刪掉只影響2個瀏覽器，也會更方便；

盡可能省資源

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

五、個人推薦寫法

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

.sofish{padding:10px;padding:9px9;?/*?all?ie?*/padding:8px0;?/*?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;}?} /*?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 <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?*/

然后，從第二種方式我們也可以發(fā)現(xiàn)。把IE注釋用在body class上，而不是添加單獨的<link />或者@import會是更好的選擇。雖然分文件也是一種不錯的選擇，但了為頁面加載速度，HTTP請求一個都不能浪費。

至于利用JS或者后端程序來判斷，除非你有足夠的資源，除非你解決不了（90%不會發(fā)生），不然，并不推薦用。附上一個表（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?*/

CSS Hack 雖好且方便兼容各瀏覽器，但是通不過 W3C 驗證，所以還得自己權衡是否有必要去使用。能不用盡量不用吧！

轉(zhuǎn)載于:https://blog.51cto.com/xhtml/1411151

《新程序員》：云原生和全面數(shù)字化實踐50位技術專家共同創(chuàng)作，文字、視頻、音頻交互閱讀