任務(wù)12:瀏覽器兼容問題

問題

  • 什么是 CSS hack
  • 談一談瀏覽器兼容的思路
  • 列舉5種以上瀏覽器兼容的寫法
  • 以下工具/名詞是做什么的
  • 條件注釋
  • IE Hack
  • js 能力檢測
  • html5shiv.js
  • respond.js
  • css reset
  • normalize.css
  • Modernizr
  • postCSS
  • 一般在哪個(gè)網(wǎng)站查詢屬性兼容性惩激?

1铐达、什么是 CSS hack
由于不同廠商的瀏覽器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等摩梧,或者是同一廠商的瀏覽器的不同版本柴灯,如IE6和IE7卖漫,對CSS的解析認(rèn)識(shí)不完全一樣,因此會(huì)導(dǎo)致生成的頁面效果不一樣赠群,得不到我們所需要的頁面效果羊始。CSS hack 就是這種情況下我們針對不同的瀏覽器去寫不同的CSS的一個(gè)過程,讓它能夠同時(shí)兼容不同的瀏覽器查描,能在不同的瀏覽器中也能得到我們想要的頁面效果突委。
2、談一談瀏覽器兼容的思路
第一冬三、產(chǎn)品的受眾匀油,及受眾使用的各瀏覽器的比例,效果優(yōu)先還是基本功能優(yōu)先勾笆。
第二敌蚜、成本的考慮,投入產(chǎn)出比窝爪。
第三弛车、兼容哪些瀏覽器,兼容到什么版本蒲每,讓哪些瀏覽器支持哪些效果帅韧。
第四、漸進(jìn)增強(qiáng)和優(yōu)雅降級的選擇
第五啃勉、根據(jù)兼容需求選擇技術(shù)框架,比如:

   Bootstrap (>=ie8)
  jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
  Vue (>= ie9)

第六双妨、根據(jù)兼容需求選擇兼容工具h(yuǎn)tml5shiv.js淮阐、respond.js叮阅、css reset、Modernizr泣特、postCSS
第七浩姥、條件注釋、CSS Hack状您、js 能力檢測做一些修補(bǔ)勒叠。
3、列舉5種以上瀏覽器兼容的寫法

<!–-[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![endif]–-
項(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
|     [if (IE 6)|(IE 7)] IE6或者IE7

2)眯分、屬性選擇器

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

3)、選擇器前綴法

*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)行的時(shí)候它會(huì)在html元素上添加一批CSS的class名稱魁淳,這些class名稱標(biāo)記當(dāng)前瀏覽器支持哪些特性和不支持哪些特性飘诗,支持的特性就直接顯示該天特性的名稱作為一個(gè)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)的屬性以便支持當(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岛抄、以下工具/名詞是做什么的
條件注釋
條件注釋 是于HTML源碼中被 IE 有條件解釋的語句。條件注釋可被用來向 IE提供及隱藏代碼狈茉。 條件注釋最初于微軟的 Internet Explorer 5瀏覽器中出現(xiàn)夫椭,并且直至 Internet Explorer 9 均支持。微軟已宣布于IE10停止支持氯庆。
IE Hack
針對IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程

js 能力檢測
瀏覽器的能力檢測目標(biāo)不是檢測特定的瀏覽器蹭秋,而是檢測瀏覽器的能力。這樣堤撵,只需要檢測瀏覽器是否支持特定的能力仁讨,就可以給出特定的解決方案。這一部分檢測是解決瀏覽器兼容問題的主要檢測实昨。

html5shiv.js
用于解決IE9以下版本瀏覽器對HTML5新增標(biāo)簽不識(shí)別洞豁,并導(dǎo)致CSS不起作用的問題。所以我們在使用過程中,想要讓低版本的瀏覽器丈挟,即IE9以下的瀏覽器支持刁卜,那么這款html5shiv.js是一個(gè)非常好的選擇!
respond.js
Respond.js 是一個(gè)小腳本曙咽,用于為 IE6-8 以及其它不支持 CSS3 媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性蛔趴,實(shí)現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計(jì)。
css reset
將瀏覽器的默認(rèn)樣式全部去掉例朱,更準(zhǔn)確說就是通過重新定義標(biāo)簽樣式孝情。“覆蓋”瀏覽器的CSS默認(rèn)屬性洒嗤。最最簡單的說法就是把瀏覽器提供的默認(rèn)樣式覆蓋掉箫荡!這就是CSS reset。
normalize.css
Normalize.css 是一個(gè)可以定制的CSS文件烁竭,它讓不同的瀏覽器在渲染網(wǎng)頁元素的時(shí)候形式更統(tǒng)一菲茬。
它可以:
保留有用的默認(rèn)值,不同于許多 CSS reset 的簡單粗暴派撕。
標(biāo)準(zhǔn)化的樣式婉弹,適用范圍廣的元素。
糾正錯(cuò)誤和常見的瀏覽器的不一致性终吼。
一些細(xì)微的改進(jìn)镀赌,提高了易用性。
使用詳細(xì)的注釋來解釋代碼际跪。
Modernizr
Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS商佛,無論瀏覽器是否支持這些特性。這是處理漸進(jìn)增強(qiáng)的完美方案姆打。
Modernizr 會(huì)在頁面加載后立即檢測特性良姆;然后創(chuàng)建一個(gè)包含檢測結(jié)果的 JavaScript 對象,同時(shí)在 html 元素加入方便你調(diào)整 CSS 的 class 名幔戏。

postCSS
它可以被理解為一個(gè)平臺(tái)玛追,可以讓一些插件在上面跑,它提供了一個(gè)解析器闲延,可以將CSS解析成抽象語法樹痊剖,通過PostCSS這個(gè)平臺(tái),我們能夠開發(fā)一些插件垒玲,來處理CSS陆馁。熱門插件如autoprefixer,它可以幫我們處理兼容問題合愈,只需正常寫CSS叮贩,autoprefixer可以幫我的自動(dòng)生成兼容性代碼
5击狮、一般在哪個(gè)網(wǎng)站查詢屬性兼容性?
http://caniuse.com/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末妇汗,一起剝皮案震驚了整個(gè)濱河市帘不,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌杨箭,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,348評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件储狭,死亡現(xiàn)場離奇詭異互婿,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)辽狈,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,122評論 2 385
  • 文/潘曉璐 我一進(jìn)店門慈参,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人刮萌,你說我怎么就攤上這事驮配。” “怎么了着茸?”我有些...
    開封第一講書人閱讀 156,936評論 0 347
  • 文/不壞的土叔 我叫張陵壮锻,是天一觀的道長。 經(jīng)常有香客問我涮阔,道長猜绣,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,427評論 1 283
  • 正文 為了忘掉前任敬特,我火速辦了婚禮掰邢,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘伟阔。我一直安慰自己辣之,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,467評論 6 385
  • 文/花漫 我一把揭開白布皱炉。 她就那樣靜靜地躺著怀估,像睡著了一般。 火紅的嫁衣襯著肌膚如雪娃承。 梳的紋絲不亂的頭發(fā)上奏夫,一...
    開封第一講書人閱讀 49,785評論 1 290
  • 那天,我揣著相機(jī)與錄音历筝,去河邊找鬼酗昼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛梳猪,可吹牛的內(nèi)容都是我干的麻削。 我是一名探鬼主播蒸痹,決...
    沈念sama閱讀 38,931評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼呛哟!你這毒婦竟也來了叠荠?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,696評論 0 266
  • 序言:老撾萬榮一對情侶失蹤扫责,失蹤者是張志新(化名)和其女友劉穎榛鼎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體鳖孤,經(jīng)...
    沈念sama閱讀 44,141評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡者娱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,483評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了苏揣。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片黄鳍。...
    茶點(diǎn)故事閱讀 38,625評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖平匈,靈堂內(nèi)的尸體忽然破棺而出框沟,到底是詐尸還是另有隱情,我是刑警寧澤增炭,帶...
    沈念sama閱讀 34,291評論 4 329
  • 正文 年R本政府宣布忍燥,位于F島的核電站,受9級特大地震影響弟跑,放射性物質(zhì)發(fā)生泄漏灾前。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,892評論 3 312
  • 文/蒙蒙 一孟辑、第九天 我趴在偏房一處隱蔽的房頂上張望哎甲。 院中可真熱鬧,春花似錦饲嗽、人聲如沸炭玫。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽吞加。三九已至,卻和暖如春尽狠,著一層夾襖步出監(jiān)牢的瞬間衔憨,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工袄膏, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留践图,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,324評論 2 360
  • 正文 我出身青樓沉馆,卻偏偏與公主長得像码党,于是被迫代替她去往敵國和親德崭。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,492評論 2 348

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