入門(mén)任務(wù)12-- 瀏覽器兼容

  1. 什么是css hack
    由于不同廠(chǎng)商的流覽器或某瀏覽器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),對(duì)CSS的支持硫麻、解析不一樣默穴,導(dǎo)致在不同瀏覽器的環(huán)境中呈現(xiàn)出不一致的頁(yè)面展現(xiàn)效果三热。這時(shí)念祭,我們?yōu)榱双@得統(tǒng)一的頁(yè)面效果,就需要針對(duì)不同的瀏覽器或不同版本寫(xiě)特定的CSS樣式启上,我們把這個(gè)針對(duì)不同的瀏覽器/不同版本寫(xiě)相應(yīng)的CSS code的過(guò)程邢隧,叫做CSS hack!

條件注釋是于HTML源碼中被IE有條件解釋的語(yǔ)句。條件注釋可用來(lái)被向IE提供或隱藏代碼碧绞。

  1. 談一談瀏覽器兼容的思路
    要不要做

    • 產(chǎn)品的角度(產(chǎn)品的受眾巫员、受眾的瀏覽器比例桐腌、效果優(yōu)先還是基本功能優(yōu)先,成本的角度 (有無(wú)必要做某件事)
      做到什么程度
    • 讓哪些瀏覽器支持哪些效果
      如何做
      根據(jù)兼容需求選擇技術(shù)框架/庫(kù)(jquery)
      根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset熊镣、normalize.css嚎莉、Modernizr)
      postCSS
    • 條件注釋悯搔、CSS Hack灾常、js 能力檢測(cè)做一些修補(bǔ)
  2. 列舉5種以上瀏覽器兼容的寫(xiě)法

  • 加載ie7的css

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

  • 使用ie6或ie7才識(shí)別的前綴

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

  • clearfix對(duì)ie7的兼容.:after和:before只在ie8及以上有效

.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
zoom: 1; / 僅對(duì)ie67有效 */
}

  • 針對(duì)ie67來(lái)兼容inline-block。ie67識(shí)別 "*"前綴

.target{
display: inline-block;
*display: inline;
*zoom: 1;
}

  • 使用IE注釋的方法來(lái)處理IE10以下的IE兼容发魄。加載一些兼容的庫(kù)盹牧。
  • 使用IE注釋的方法來(lái)處理IE10以下的IE兼容俩垃。加載一些兼容的庫(kù)。
  1. 以下工具/名詞是做什么的
  • 條件注釋
    條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語(yǔ)句汰寓。條件注釋可被用來(lái)向IE提供及隱藏代碼口柳。
    使用了條件注釋的頁(yè)面在 Windows Internet Explorer 9 中可正常工作,但在 Internet Explorer 10 中無(wú)法正常工作有滑。IE10不再支持條件注釋

  • IE Hack
    利用條件注釋來(lái)達(dá)到只有ie才能識(shí)別的代碼跃闹,來(lái)達(dá)到實(shí)現(xiàn)兼容的目的。

  • js 能力檢測(cè)
    js的兼容性的檢測(cè)毛好,查看是否有這個(gè)api望艺,來(lái)判斷是否能用。

  • html5shiv.js
    為ie6-9肌访、Safari 4.x (and iPhone 3.x), 和 Firefox 3.x.支持html5的標(biāo)簽

  • respond.js
    為IE6-8和一些不支持CSS3媒體查詢(xún)的瀏覽器提供支持找默,達(dá)到響應(yīng)的目的。

  • css reset
    對(duì)標(biāo)簽的默認(rèn)樣式進(jìn)行重置

  • normalize.css
    在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性吼驶,是一種現(xiàn)代的惩激、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案

  • Modernizr
    瀏覽器兼容。幫助探測(cè)瀏覽器是否支持HTML5/CSS3特性蟹演,從而判斷是否使用咧欣。甚至可以加載額外的script腳本。
    前端的瑞士軍刀Modernizr.js

  • postCSS
    使用js插件來(lái)轉(zhuǎn)換樣式的工具轨帜。可以自動(dòng)為樣式加上兼容的屬性衩椒。

  1. 一般在哪個(gè)網(wǎng)站查詢(xún)屬性兼容性蚌父?

www.caniuse.com

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市毛萌,隨后出現(xiàn)的幾起案子苟弛,更是在濱河造成了極大的恐慌,老刑警劉巖阁将,帶你破解...
    沈念sama閱讀 211,042評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件膏秫,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡做盅,警方通過(guò)查閱死者的電腦和手機(jī)缤削,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)吹榴,“玉大人亭敢,你說(shuō)我怎么就攤上這事⊥汲铮” “怎么了帅刀?”我有些...
    開(kāi)封第一講書(shū)人閱讀 156,674評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵让腹,是天一觀(guān)的道長(zhǎng)。 經(jīng)常有香客問(wèn)我扣溺,道長(zhǎng)骇窍,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,340評(píng)論 1 283
  • 正文 為了忘掉前任锥余,我火速辦了婚禮腹纳,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘哈恰。我一直安慰自己只估,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,404評(píng)論 5 384
  • 文/花漫 我一把揭開(kāi)白布着绷。 她就那樣靜靜地躺著蛔钙,像睡著了一般。 火紅的嫁衣襯著肌膚如雪荠医。 梳的紋絲不亂的頭發(fā)上吁脱,一...
    開(kāi)封第一講書(shū)人閱讀 49,749評(píng)論 1 289
  • 那天,我揣著相機(jī)與錄音彬向,去河邊找鬼兼贡。 笑死,一個(gè)胖子當(dāng)著我的面吹牛娃胆,可吹牛的內(nèi)容都是我干的遍希。 我是一名探鬼主播,決...
    沈念sama閱讀 38,902評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼里烦,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼凿蒜!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起胁黑,我...
    開(kāi)封第一講書(shū)人閱讀 37,662評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤废封,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后丧蘸,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體漂洋,經(jīng)...
    沈念sama閱讀 44,110評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評(píng)論 2 325
  • 正文 我和宋清朗相戀三年力喷,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了刽漂。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,577評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡冗懦,死狀恐怖爽冕,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情披蕉,我是刑警寧澤颈畸,帶...
    沈念sama閱讀 34,258評(píng)論 4 328
  • 正文 年R本政府宣布乌奇,位于F島的核電站,受9級(jí)特大地震影響眯娱,放射性物質(zhì)發(fā)生泄漏礁苗。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,848評(píng)論 3 312
  • 文/蒙蒙 一徙缴、第九天 我趴在偏房一處隱蔽的房頂上張望试伙。 院中可真熱鬧,春花似錦于样、人聲如沸疏叨。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,726評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)蚤蔓。三九已至,卻和暖如春糊余,著一層夾襖步出監(jiān)牢的瞬間秀又,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,952評(píng)論 1 264
  • 我被黑心中介騙來(lái)泰國(guó)打工贬芥, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留吐辙,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,271評(píng)論 2 360
  • 正文 我出身青樓蘸劈,卻偏偏與公主長(zhǎng)得像昏苏,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子威沫,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,452評(píng)論 2 348

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