瀏覽器兼容

1.什么是 CSS hack?

由于不同廠商的瀏覽器篮条,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等吩抓,或者是同一廠商的瀏覽器的不同版本涉茧,如IE6和IE7琴拧,對CSS的解析認(rèn)識不完全一樣,因此會導(dǎo)致生成的頁面效果不一樣蚓胸,得不到我們所需要的頁面效果。CSS hack在這種情況下針對不同的瀏覽器去寫不同的CSS沛膳,讓它能夠同時兼容不同的瀏覽器,能在不同的瀏覽器中也能得到我們想要的頁面效果锹安。

CSS hack

CSS Hack大致有3種表現(xiàn)形式,CSS屬性前綴法叹哭、選擇器前綴法以及IE條件注釋法(即HTML頭部引用if IE)Hack忍宋,實(shí)際項(xiàng)目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現(xiàn)差異而引入的风罩。

  1. 屬性前綴法(即類內(nèi)部Hack)
    例如 IE6能識別下劃線"—"和星號" * "糠排,IE7能識別星號" * "超升,但不能識別下劃線"—",IE6~IE10都認(rèn)識"\9"室琢,但firefox前述三個都不能認(rèn)識
    2.選擇器前綴法(即選擇器Hack)
    3.IE條件注釋法(即HTML條件注釋Hack)
    針對所有IE(注:IE10+已經(jīng)不再支持條件注釋): ,針對IE6及以下版本:盈滴。這類Hack不僅對CSS生效,對寫在判斷語句里面的所有代碼都會生效

2.談一談瀏覽器兼容的思路

  • 要不要做
    • 產(chǎn)品的角度(產(chǎn)品的受眾雹熬、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先)
    • 成本的角度 (有無必要做某件事)
  • 做到什么程度
    • 讓哪些瀏覽器支持哪些效果
  • 如何做
  • 方法思路
    • 漸進(jìn)增強(qiáng)(progressive enhancement): 針對低版本瀏覽器進(jìn)行構(gòu)建頁面济瓢,保證最基本的功能,然后再針對高級瀏覽器進(jìn)行效果旺矾、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)
    • 優(yōu)雅降級
      (graceful degradation): 一開始就構(gòu)建完整的功能蔑鹦,然后再針對低版本瀏覽器進(jìn)行兼容箕宙。
      stackoverflow-漸進(jìn)增強(qiáng)和優(yōu)雅降級的區(qū)別

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

  1. 屬性前綴法(即類內(nèi)部Hack):如
box{
 color: red; 
_color: blue; /*ie6*/
 *color: pink; /*ie67*/ 
color: yellow\9; /*ie/edge 6-8*/
}

2.IE條件注釋法(即HTML條件注釋Hack):如

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

3.選擇器前綴法(即選擇器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有效等等

4.條件注釋結(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]-->

5.利用Modernizr工具
參考文章
運(yùn)行的時候它會在html元素上添加一批CSS的class名稱,這些class名稱標(biāo)記當(dāng)前瀏覽器支持哪些特性和不支持哪些特性柬帕,支持的特性就直接顯示該特性的名稱作為一個class(例:canvas,websockets)狡门,不支持的特性顯示的class是“no-特性名稱”锅很。以下是Chrome下生成的特征類型其馏。

<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage 
              websqldatabase indexeddb hashchange history draganddrop websockets 
        rgba hsla multiplebgs backgroundsize borderimage borderradius 
        boxshadow textshadow opacity cssanimations csscolumns cssgradients
        cssreflections csstransforms csstransforms3d csstransitions fontface 
         generatedcontent video audio localstorage sessionstorage webworkers 
              applicationcache svg inlinesvg smil svgclippaths">

下面這段代碼是運(yùn)行在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在<html>元素里生成的class名稱粗蔚,在你的css文件里定義相應(yīng)的屬性以便支持當(dāng)前瀏覽器。例如鹏控,下面的代碼在支持shadow陰影的瀏覽器顯示shadow,不支持的瀏覽器顯示標(biāo)準(zhǔn)的邊框:

.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;
}

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

1.條件注釋

條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句当辐。條件注釋可被用來向IE提供及隱藏代碼。例:

<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->

使用了條件注釋的頁面在 Windows Internet Explorer 9 中可正常工作缘揪,但在 Internet Explorer 10 中無法正常工作。
IE10不再支持條件注釋

項(xiàng)目 范例 說明
找筝! [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
l [if (IE 6)l(IE 7)] IE6或者IE7

2.IE Hack

針對IE瀏覽器編寫不同的CSS來兼容不同版本的IE,讓IE能夠正常渲染

3.js 能力檢測

瀏覽器的能力檢測目標(biāo)不是檢測特定的瀏覽器,而是檢測瀏覽器的能力袖裕。這樣,只需要檢測瀏覽器是否支持特定的能力急鳄,就可以給出特定的解決方案。這一部分檢測是解決瀏覽器兼容問題的主要檢測疾宏。

4.html5shiv.js

用于解決IE9以下版本瀏覽器對HTML5新增標(biāo)簽不識別,并導(dǎo)致CSS不起作用的問題坎藐。所以我們在使用過程中,想要讓低版本的瀏覽器岩馍,即IE9以下的瀏覽器支持碉咆,可以使用html5shiv.js兼雄。
原理:html5shiv主要解決HTML5提出的新的元素不被IE6-8識別帽蝶,這些新元素不能作為父節(jié)點(diǎn)包裹子元素赦肋,并且不能應(yīng)用CSS樣式。讓CSS 樣式應(yīng)用在未知元素上只需執(zhí)行 document.createElement(elementName) 即可實(shí)現(xiàn)佃乘。html5shiv就是根據(jù)這個原理創(chuàng)建的。
使用方法
tml5shiv的使用非常的簡單趣避,考慮到IE9是支持html5的,所以只需要在頁面head中添加如下代碼即可:

<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->
5.respond.js

Respond.js 是一個快速程帕、輕量的 polyfill,用于為 IE6-8 以及其它不支持 CSS3媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性愁拭,實(shí)現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計(jì)(Responsive Web Design)。

6.css reset

將瀏覽器的默認(rèn)樣式全部去掉岭埠,更準(zhǔn)確說就是通過重新定義標(biāo)簽樣式∠郏“覆蓋”瀏覽器的CSS默認(rèn)屬性许赃。最簡單的說法就是把瀏覽器提供的默認(rèn)樣式覆蓋掉馆类。核心作用是清零,而且過于暴力蹦掐。

7.normalize.css

Normalize.css 是一個可以定制的CSS文件,它讓不同的瀏覽器在渲染網(wǎng)頁元素的時候形式更統(tǒng)一卧抗。其優(yōu)勢可以完全取代css reset.
它可以:

1.保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們藤滥。
2.標(biāo)準(zhǔn)化的樣式社裆,適用范圍廣的元素。
3.修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性泳秀。
4.優(yōu)化CSS可用性:用一些小技巧。
5.使用詳細(xì)的注釋來解釋代碼

8.Modernizr

Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS嗜傅,無論瀏覽器是否支持這些特性金句。這是處理漸進(jìn)增強(qiáng)的完美方案吕嘀。
Modernizr 會在頁面加載后立即檢測特性贞瞒;然后創(chuàng)建一個包含檢測結(jié)果的 JavaScript 對象,同時在 html 元素加入方便你調(diào)整 CSS 的 class 名军浆。
具體用法見文章上面案例。

9.postCSS

它可以被理解為一個平臺乒融,可以讓一些插件在上面跑,它提供了一個解析器摄悯,可以將CSS解析成抽象語法樹,通過PostCSS這個平臺奢驯,我們能夠開發(fā)一些插件,來處理CSS叨橱。熱門插件如autoprefixer,它可以幫我們處理兼容問題罗洗,只需正常寫CSS伙菜,autoprefixer可以幫我的自動生成兼容性代碼
參考文章

5.一般在哪個網(wǎng)站查詢屬性兼容性轩缤?

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市娇哆,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌治力,老刑警劉巖勃黍,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異马澈,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進(jìn)店門辩块,熙熙樓的掌柜王于貴愁眉苦臉地迎上來荆永,“玉大人,你說我怎么就攤上這事豆村÷钌荆” “怎么了宁玫?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵欧瘪,是天一觀的道長眷射。 經(jīng)常有香客問我佛掖,道長妖碉,這世上最難降的妖魔是什么芥被? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮拴魄,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘羹铅。我一直安慰自己蚀狰,他們只是感情好职员,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著焊切,像睡著了一般芳室。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上刹勃,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天,我揣著相機(jī)與錄音荔仁,去河邊找鬼。 笑死乏梁,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的遇骑。 我是一名探鬼主播,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼落萎,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了练链?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤兑宇,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后隶糕,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡枚驻,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了再登。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,654評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡锉矢,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出沽损,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布炎疆,位于F島的核電站,受9級特大地震影響形入,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜亿遂,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望崩掘。 院中可真熱鬧少办,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽敷燎。三九已至,卻和暖如春焕襟,著一層夾襖步出監(jiān)牢的瞬間鸵赖,已是汗流浹背它褪。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人包吝。 一個月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓诗越,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子床未,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評論 2 349

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

  • 什么是 CSS hack CSS hack是通過在CSS樣式中加入一些特殊的符號斋扰,讓不同的瀏覽器識別不同的符號(什...
    怎么昵稱閱讀 384評論 0 1
  • 1、什么是 CSS hack 不同廠商的瀏覽器(比如Internet Explorer,Safari,Mozill...
    zh_yang閱讀 362評論 0 0
  • 什么是 CSS hack问裕? 基礎(chǔ)概念 由于不同廠商的瀏覽器粮宛,比如Internet Explorer,Safari,...
    Sketch閱讀 288評論 0 0
  • 什么是CSS hack CSS hack由于不同廠商的瀏覽器卖宠,比如Internet Explorer,Safari...
    尾巴尾巴尾巴閱讀 779評論 0 0
  • 一逗堵、前言 做前端開發(fā),必然少不了瀏覽器汁咏,然而不同的廠商有著各自版本的瀏覽器作媚,不同的瀏覽器對css的理解和解析不一樣...
    青鳴閱讀 498評論 0 2