瀏覽器的兼容

什么是 CSS hack?

CSS hank由于不同廠商的瀏覽器,比如IE,Safari跳昼,Chrome等,或者同一廠商的瀏覽器的不同版本肋乍,如IE6和IE7鹅颊,對CSS的解析不完全一樣,因此就會使得生成的頁面效果不一樣墓造。這個時候就需要針對不同的瀏覽器去寫不同的CSS堪伍,讓他能夠同時兼容不同的瀏覽器,在瀏覽器中的效果一致滔岳;簡單的說杠娱,

CSS hank的母的就是使你的CSS代碼兼容不同的瀏覽器。也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果谱煤。

CSS hank大致有3種表現(xiàn)形式

  • CSS類內(nèi)部hank 比如 IE6能識別下劃線""和星號""摊求,IE7能識別星號"",但不能識別下劃線""刘离,而firefox兩個都不能認識室叉。等等
  • 選擇器hank 比如 IE6能識別html .class{},IE7能識別+html .class{}或者*:first-child+html .class{}硫惕。等等
  • HTML頭部引用(if IE)hank 針對所有IE:<![endif]-->茧痕,針對IE6及以下版本:<![endif]-->,這類Hack不僅對CSS生效恼除,對寫在判斷語句里面的所有代碼都會生效踪旷。

常用的CSS hack方式

(1)方式一 條件注釋法
只在IE下生效

只在IE6下生效

只在IE6以上版本生效

只在IE8上不生效

非IE瀏覽器生效

(2)方式二 類內(nèi)屬性前綴法
屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴,以達到預(yù)期的頁面展現(xiàn)效果豁辉。
IE瀏覽器各版本 CSS hack 對照表

hack 寫法 實例 IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q) IE9(S) IE9(Q) IE10(S) IE10(Q)
* *color 青色 Y Y Y Y N Y N Y N Y
+ +color 綠色 Y Y Y Y N Y N Y N Y
- -color 黃色 Y Y N N N N N N N N
_ _color 藍色 Y Y N Y N Y N Y N N
# #color 紫色 Y Y Y Y N Y N Y N Y
\0 color:red\0 紅色 N N N N Y N Y N Y N
\9\0 color:red\9\0 粉色 N N N N N N Y N Y N
!important color:blue !important;color:green; 棕色 N N Y N Y N Y N Y Y

說明:在標準模式中
“-″減號是IE6專有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效令野,是IE8/9/10的hack
“\9\0″ 只對IE9/IE10生效,是IE9/10的hack
(3)CSS hack方式三:選擇器前綴法
選擇器前綴法是針對一些頁面表現(xiàn)不一致或者需要特殊對待的瀏覽器徽级,在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack气破。
目前最常見的是

*html 前綴只對IE6生效+html *+前綴只對IE7生效

@media screen\9{...}只對IE6/7生效

@media \0screen {body { background: red; }}只對IE8有效

@media \0screen,screen\9{body { background: blue; }}只對IE6/7/8有效

@media screen\0 {body { background: green; }} 只對IE8/9/10有效

@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效等等

談一談瀏覽器兼容的思路

  • 要不要做
    • 產(chǎn)品的角度(產(chǎn)品的受眾、受眾的瀏覽器比例餐抢、效果優(yōu)先還是基本功能優(yōu)先)
    • 成本的角度 (有無必要做某件事)
  • 做到什么程度
    • 讓哪些瀏覽器支持哪些效果
  • 如何做
    • 根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)
    • 根據(jù)兼容需求選擇兼容工具(html5shiv.js现使、respond.js、css reset旷痕、normalize.css碳锈、Modernizr)
    • postCSS
    • 條件注釋、CSS Hack欺抗、js 能力檢測做一些修補

    列舉5種以上瀏覽器兼容的寫法

  • *殴胧, ie6,ie7可以識別;
    _和- , ie6可以識別团滥;
  • !important ,表示高優(yōu)先級竿屹,ie7及以上,firefox都支持灸姊,ie6認識帶!important的樣式屬性拱燃,但不認識!important的優(yōu)先級;
  • -webkit- 力惯,針對safari碗誉,chrome瀏覽器的內(nèi)核CSS寫法
  • -moz-,針對firefox瀏覽器的內(nèi)核CSS寫法
  • -ms-父晶,針對ie內(nèi)核的CSS寫法
  • -o-哮缺,針對Opera內(nèi)核的CSS寫法
  • CSS里可以給屬性或者選擇器寫hack。屬性例如:background:blue;_background:red;選擇器例如: html #demo {width:120px;} *+html #demo {width:130px;}
  • HTML 針對所有IE
<!–-[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![endif]–->


項目      范例               說明
甲喝!     [if !IE]           非IE
lt    [if lt IE 5.5]     小于IE 5.5
lte   [if lte IE 6]      小于等于IE6
gt    [if gt IE 5]       大于 IE5
gte   [if gte IE 7]      大于等于IE7
|     [if (IE 6)|(IE 7)] IE6或者IE7

屬性選擇器

box{
 color: red; 
_color: blue; /*ie6*/
 *color: pink; /*ie67*/ 
color: yellow\9; /*ie/edge 6-8*/
}

選擇器前綴法

*html *前綴只對IE6生效
*+html *+前綴只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active), 
  (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效等等

條件注釋結(jié)合類選擇器整體優(yōu)化尝苇。

<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->

利用Modernizr工具

運行的時候它會在html元素上添加一批CSS的class名稱,這些class名稱標記當前瀏覽器支持哪些特性和不支持哪些特性埠胖,支持的特性就直接顯示該天特性的名稱作為一個class(例:canvas,websockets)糠溜,不支持的特性顯示的class是“no-特性名稱”。以下是IE9下生成的特征類型直撤。

<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation 
              postmessage no-websqldatabase no-indexeddb hashchange no-history 
        draganddrop no-websockets rgba hsla multiplebgs backgroundsize 
        no-borderimage borderradius boxshadow no-textshadow opacity 
        no-cssanimations no-csscolumns no-cssgradients no-cssreflections
        csstransforms no-csstransforms3d no-csstransitions fontface 
        generatedcontent video audio localstorage sessionstorage 
        no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">
        ```
可以直接使用Modernizr在元素里生成的class名稱非竿,在你的css文件里定義相應(yīng)的屬性以便支持當前瀏覽器。例如谋竖,下面的代碼可以屬性红柱,在支持shadow陰影的瀏覽器顯示shadow,不支持的瀏覽器顯示標準的邊框:
```sh
.boxshadow #MyContainer { 
border: none;
 -webkit-box-shadow: #666 1px 1px 1px;
 -moz-box-shadow: #666 1px 1px 1px;
} 
.no-boxshadow #MyContainer {
 border: 2px solid black;
}

以下工具/名詞是做什么的

  • 條件注釋:條件注釋 是于HTML源碼中被 IE 有條件解釋的語句蓖乘。條件注釋可被用來向 IE提供及隱藏代碼豹芯。 條件注釋最初于微軟的 Internet Explorer 5瀏覽器中出現(xiàn),并且直至 Internet Explorer 9 均支持驱敲。微軟已宣布于IE10停止支持。
  • IE Hack:針對IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程
  • js 能力檢測:瀏覽器的能力檢測目標不是檢測特定的瀏覽器宽闲,而是檢測瀏覽器的能力众眨。這樣,只需要檢測瀏覽器是否支持特定的能力容诬,就可以給出特定的解決方案娩梨。這一部分檢測是解決瀏覽器兼容問題的主要檢測。
  • html5shiv.js:用于解決IE9以下版本瀏覽器對HTML5新增標簽不識別览徒,并導(dǎo)致CSS不起作用的問題狈定。所以我們在使用過程中,想要讓低版本的瀏覽器,即IE9以下的瀏覽器支持纽什,那么這款html5shiv.js是一個非常好的選擇措嵌!
  • respond.js:Respond.js 是一個小腳本,用于為 IE6-8 以及其它不支持 CSS3 媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性芦缰,實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計企巢。
  • css reset:將瀏覽器的默認樣式全部去掉,更準確說就是通過重新定義標簽樣式让蕾±斯妫“覆蓋”瀏覽器的CSS默認屬性。最最簡單的說法就是把瀏覽器提供的默認樣式覆蓋掉探孝!這就是CSS reset笋婿。
  • normalize.css:Normalize.css 是一個可以定制的CSS文件,它讓不同的瀏覽器在渲染網(wǎng)頁元素的時候形式更統(tǒng)一顿颅。
    它可以:保留有用的默認值缸濒,不同于許多 CSS reset的簡單粗暴。標準化的樣式元镀,適用范圍廣的元素绍填。
    糾正錯誤和常見的瀏覽器的不一致性。
    一些細微的改進栖疑,提高了易用性讨永。
    使用詳細的注釋來解釋代碼。
  • Modernizr:Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS遇革,無論瀏覽器是否支持這些特性卿闹。這是處理漸進增強的完美方案。
    Modernizr 會在頁面加載后立即檢測特性萝快;然后創(chuàng)建一個包含檢測結(jié)果的 JavaScript 對象锻霎,同時在 html 元素加入方便你調(diào)整 CSS 的 class 名。
  • postCSS:它可以被理解為一個平臺揪漩,可以讓一些插件在上面跑旋恼,它提供了一個解析器,可以將CSS解析成抽象語法樹奄容,通過PostCSS這個平臺冰更,我們能夠開發(fā)一些插件,來處理CSS昂勒。熱門插件如autoprefixer蜀细,它可以幫我們處理兼容問題,只需正常寫CSS戈盈,autoprefixer可以幫我的自動生成兼容性代碼

    一般在哪個網(wǎng)站查詢屬性兼容性奠衔?

caniuse.com

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末谆刨,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子归斤,更是在濱河造成了極大的恐慌痊夭,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件官册,死亡現(xiàn)場離奇詭異生兆,居然都是意外死亡,警方通過查閱死者的電腦和手機膝宁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進店門鸦难,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人员淫,你說我怎么就攤上這事合蔽。” “怎么了介返?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵拴事,是天一觀的道長。 經(jīng)常有香客問我圣蝎,道長刃宵,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任徘公,我火速辦了婚禮牲证,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘关面。我一直安慰自己坦袍,他們只是感情好,可當我...
    茶點故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布等太。 她就那樣靜靜地躺著捂齐,像睡著了一般。 火紅的嫁衣襯著肌膚如雪缩抡。 梳的紋絲不亂的頭發(fā)上奠宜,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天,我揣著相機與錄音瞻想,去河邊找鬼压真。 笑死,一個胖子當著我的面吹牛内边,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播待锈,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼漠其,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起和屎,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤拴驮,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后柴信,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體套啤,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年随常,在試婚紗的時候發(fā)現(xiàn)自己被綠了潜沦。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡绪氛,死狀恐怖唆鸡,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情枣察,我是刑警寧澤争占,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站序目,受9級特大地震影響臂痕,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜猿涨,卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一握童、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧嘿辟,春花似錦舆瘪、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至昙读,卻和暖如春召调,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蛮浑。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工唠叛, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人沮稚。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓艺沼,卻偏偏與公主長得像,于是被迫代替她去往敵國和親蕴掏。 傳聞我的和親對象是個殘疾皇子障般,可洞房花燭夜當晚...
    茶點故事閱讀 42,786評論 2 345

推薦閱讀更多精彩內(nèi)容

  • 1. 什么是 CSS hack 由于不同廠商的流覽器或某瀏覽器的不同版本(如IE6-IE11,Firefox/Sa...
    66dong66閱讀 391評論 0 0
  • 關(guān)于瀏覽器的兼容問題 1. 什么是 CSS hack 根據(jù)百度的簡述:CSS hack由于不同廠商的瀏覽器调鲸,比如I...
    熊蛋子17閱讀 686評論 0 2
  • 前言 瀏覽器的兼容性問題是個很龐大復(fù)雜的問題,很難找到四海皆準的辦法挽荡,這里我們只是簡單介紹下幾種經(jīng)典的處理兼容性問...
    浪里行舟閱讀 1,378評論 1 14
  • 一藐石、如何調(diào)試 IE 瀏覽器1、IE7以上版本的瀏覽器自帶開發(fā)者工具定拟,可以直接設(shè)置進行調(diào)試于微。 五、reset.css...
    崔敏嫣閱讀 468評論 0 1
  • 1. 什么是 CSS hack Hack是針對不同瀏覽器去寫不同的CSS樣式青自,從而讓各瀏覽器能達到一致的渲染效果株依,...
    Schrodinger的貓閱讀 394評論 0 0