Task12瀏覽器兼容

1嗤瞎、什么是 CSS hack

由于不同廠商的瀏覽器佛舱,比如IE, Safari, Mozilla Firefox, Chrome等山憨,或者是同一廠商的瀏覽器的不同版本耐床,如IE6和IE7,對CSS的解析認(rèn)識不完全一樣富拗,因此會導(dǎo)致生成的頁面效果不一樣臼予,得不到我們所需要的頁面效果鸣戴。此時啃沪,針對不同的瀏覽器去寫不同的CSS,使之能在不同的瀏覽器中也能得到想要的頁面效果窄锅,這一過程為CSS hack创千。

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

(1)考慮需求(要不要做)

  • 從產(chǎn)品角度入偷,產(chǎn)品的受眾追驴、受眾瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先疏之。一般是兼容到IE6殿雪、IE8等。
  • 從成本角度锋爪,有無必要做丙曙。
    (2)考慮范圍(做到什么程度)
    讓哪些瀏覽器支持哪些效果。
    (3)具體方法
    • 根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)其骄;
    • 根據(jù)兼容需求選擇兼容工具亏镰;html5shiv.js、respond.js拯爽、css reset索抓、normalize.css、Modernizr、 postCSS逼肯;
    • 條件注釋耸黑、CSS Hack、js 能力檢測做一些修補 汉矿。
      (4)漸進增強:針對低版本瀏覽器進行構(gòu)建頁面崎坊,保證最基本的功能,然后再針對高級瀏覽器進行效果洲拇、交互等改進和追加功能達(dá)到更好的用戶體驗奈揍。
      優(yōu)雅降級:一開始就構(gòu)建完整的功能,然后再針對低版本瀏覽器進行兼容赋续。
3男翰、列舉5種以上瀏覽器兼容的寫法

(1)選擇合適的框架,Bootstrap (>=ie8)纽乱、jQuery 1.~ (>=ie6)蛾绎、jQuery
(2)條件注釋,用來向IE提供及隱藏代碼鸦列。
CSS hack
(3)屬性前綴法租冠,IE6能識別下劃線_和星號,IE7能識別星號薯嗤,但不能識別下劃線顽爹;IE6~IE10都認(rèn)識\9,但firefox前述三個都不能認(rèn)識骆姐。
!important镜粤,表示高優(yōu)先級,ie7及以上玻褪,firefox都支持肉渴,ie6認(rèn)識帶!important的樣式屬性,但不認(rèn)識!important的優(yōu)先級带射;
-webkit- 同规,針對safari,chrome瀏覽器的內(nèi)核CSS寫法窟社;
-moz-券勺,針對firefox瀏覽器的內(nèi)核CSS寫法;
-ms-桥爽,針對ie內(nèi)核的CSS寫法朱灿;
-o-,針對Opera內(nèi)核的CSS寫法钠四。
(4)選擇器前綴法
(5)一些和兼容相關(guān)的開發(fā)工具

  • Html5shiv.js 讓IE9以下的IE瀏覽器支持html5的一些標(biāo)簽盗扒,可以用html5shiv.js來模擬標(biāo)簽跪楞。
  • Respond 媒體查詢(css3新特性),有些瀏覽器不支持媒體查詢侣灶,可以用respond.js來兼容甸祭。
  • CSS reset 清除、覆蓋瀏覽器的CSS默認(rèn)屬性褥影。
  • Normalize.css 是CSS reset的改良版池户,讓不同的瀏覽器在渲染網(wǎng)頁元素的時候形式更統(tǒng)一。
  • Modernizr 可以檢測html5和css3的特性凡怎。
4校焦、以下工具/名詞是做什么的。

條件注釋统倒,是html源碼中被IE有條件解釋的語句寨典,用來向IE提供及隱藏代碼。IE9以下支持條件注釋房匆,IE10不再支持條件注釋耸成。
IE Hack,針對IE瀏覽器編寫不同的CSS讓IE能夠正常渲染的過程浴鸿。包括屬性前綴法井氢、選擇器前綴法以及IE條件注釋法。
js能力檢測岳链,首先檢測瀏覽器是否支持特定的能力花竞,然后可以給出特定的解決方案。
html5shiv.js宠页,讓IE9以下的IE瀏覽器支持html5的一些標(biāo)簽左胞,可以用html5shiv.js來模擬標(biāo)簽寇仓。
respond.js举户,對于媒體查詢(css3新特性),有些瀏覽器不支持遍烦,可以用respond.js來兼容俭嘁。
CSS reset,清除服猪、覆蓋瀏覽器的CSS默認(rèn)屬性供填。
normalize.CSS,是CSS reset的改良版罢猪,讓不同的瀏覽器在渲染網(wǎng)頁元素的時候形式更統(tǒng)一近她。
modernizr,是一個JavaScript庫膳帕,可以檢測html5和css3的特性粘捎。
postCSS薇缅,是一個使用JS插件來轉(zhuǎn)換CSS的工具。

5攒磨、查詢兼容性網(wǎng)站

http://caniuse.com/ 查CSS屬性兼容
http://browserhacks.com/ 查Hack的寫法

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末泳桦,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子娩缰,更是在濱河造成了極大的恐慌灸撰,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,546評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件拼坎,死亡現(xiàn)場離奇詭異浮毯,居然都是意外死亡,警方通過查閱死者的電腦和手機泰鸡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,224評論 3 395
  • 文/潘曉璐 我一進店門亲轨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人鸟顺,你說我怎么就攤上這事惦蚊。” “怎么了讯嫂?”我有些...
    開封第一講書人閱讀 164,911評論 0 354
  • 文/不壞的土叔 我叫張陵蹦锋,是天一觀的道長。 經(jīng)常有香客問我欧芽,道長莉掂,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,737評論 1 294
  • 正文 為了忘掉前任千扔,我火速辦了婚禮憎妙,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘曲楚。我一直安慰自己厘唾,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,753評論 6 392
  • 文/花漫 我一把揭開白布龙誊。 她就那樣靜靜地躺著抚垃,像睡著了一般。 火紅的嫁衣襯著肌膚如雪趟大。 梳的紋絲不亂的頭發(fā)上鹤树,一...
    開封第一講書人閱讀 51,598評論 1 305
  • 那天,我揣著相機與錄音逊朽,去河邊找鬼罕伯。 笑死,一個胖子當(dāng)著我的面吹牛叽讳,可吹牛的內(nèi)容都是我干的追他。 我是一名探鬼主播熊昌,決...
    沈念sama閱讀 40,338評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼湿酸!你這毒婦竟也來了婿屹?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,249評論 0 276
  • 序言:老撾萬榮一對情侶失蹤推溃,失蹤者是張志新(化名)和其女友劉穎昂利,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體铁坎,經(jīng)...
    沈念sama閱讀 45,696評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡蜂奸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,888評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了硬萍。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片扩所。...
    茶點故事閱讀 40,013評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖朴乖,靈堂內(nèi)的尸體忽然破棺而出祖屏,到底是詐尸還是另有隱情,我是刑警寧澤买羞,帶...
    沈念sama閱讀 35,731評論 5 346
  • 正文 年R本政府宣布袁勺,位于F島的核電站,受9級特大地震影響畜普,放射性物質(zhì)發(fā)生泄漏期丰。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,348評論 3 330
  • 文/蒙蒙 一吃挑、第九天 我趴在偏房一處隱蔽的房頂上張望钝荡。 院中可真熱鬧,春花似錦舶衬、人聲如沸埠通。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,929評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽植阴。三九已至蟹瘾,卻和暖如春圾浅,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背憾朴。 一陣腳步聲響...
    開封第一講書人閱讀 33,048評論 1 270
  • 我被黑心中介騙來泰國打工狸捕, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人众雷。 一個月前我還...
    沈念sama閱讀 48,203評論 3 370
  • 正文 我出身青樓灸拍,卻偏偏與公主長得像做祝,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子鸡岗,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,960評論 2 355

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

  • CSS Hack 不同的瀏覽器對某些CSS代碼解析會存在一定的差異混槐,因此就會導(dǎo)致不同瀏覽器下給用戶展示的頁面效果不...
    zx9426閱讀 386評論 0 0
  • 什么是 CSS hack CSS hack是通過在CSS樣式中加入一些特殊的符號,讓不同的瀏覽器識別不同的符號(什...
    怎么昵稱閱讀 387評論 0 1
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案轩性? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,754評論 1 92
  • 什么是 CSS hack声登? CSS hank由于不同廠商的瀏覽器,比如IE,Safari揣苏,Chrome等悯嗓,或者同一...
    饑人谷_tonya閱讀 647評論 0 0
  • 什么是 CSS hack 由于不同廠商的瀏覽器,比如Internet Explorer,Safari,Mozill...
    liushaung閱讀 307評論 0 2