任務(wù)十二

1.什么是 CSS hack

由于不同廠商的瀏覽器郎笆,比如IE,Chrome等所袁,或者是同一瀏覽器的不同版本止潮,如IE6和IE7,對CSS的解析認(rèn)識不完全一樣吴汪,會導(dǎo)致生成的頁面效果不一樣惠窄。這個(gè)時(shí)候就需要針對不同的瀏覽器去寫不同的CSS,讓它能夠同時(shí)兼容不同的瀏覽器漾橙。也可以反過來利用CSShack為不同版本的瀏覽器定制編寫不同的CSS效果杆融。

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

由于不同瀏覽器對html以及css的解析方式不同,因此會導(dǎo)致同樣的代碼在不同的瀏覽器產(chǎn)生的效果不一致霜运,甚至對于低版本的瀏覽器脾歇,有些樣式它會不識別從而忽略,因此為了向下兼容淘捡,我們不得不使用hack,使用hack雖然對頁面表現(xiàn)的一致性有好處藕各,但過多的濫用會造成html文檔混亂不堪,增加管理和維護(hù)的負(fù)擔(dān)案淋。因此我們還是應(yīng)該少用座韵、慎用hack,促使瀏覽器廠商的標(biāo)準(zhǔn)越來越趨于統(tǒng)一踢京,順利過渡到標(biāo)準(zhǔn)瀏覽器的主流時(shí)代誉碴。

逐漸增強(qiáng):針對低版本瀏覽器進(jìn)行構(gòu)建頁面,保證最基本的功能瓣距,然后再針對高級瀏覽器進(jìn)行效果黔帕、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。

優(yōu)雅降級:一開始就構(gòu)建完整的功能蹈丸,然后再針對低版本瀏覽器進(jìn)行兼容成黄。

區(qū)別:優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始,并試圖減少用戶體驗(yàn)的供給逻杖,而漸進(jìn)增強(qiáng)則是從一個(gè)非撤芩辏基礎(chǔ)的,能夠起作用的版本開始荸百,并不斷擴(kuò)充闻伶,以適應(yīng)未來環(huán)境的需要。降級(功能衰減)意味著往回看够话;而漸進(jìn)增強(qiáng)則意味著朝前看蓝翰,同時(shí)保證其根基處于安全地帶光绕。

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

*畜份,ie6,ie7可以識別诞帐;

_和- , ie6可以識別爆雹;

!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 以下工具/名詞是做什么的

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










-->用于非 IE

IE Hack

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

屬性前綴法(即類內(nèi)部Hack):例如 IE6能識別下劃線""和星號" * ",IE7能識別星號" * "芒粹,但不能識別下劃線""兄纺,IE6~IE10都認(rèn)識"\9",但firefox前述三個(gè)都不能認(rèn)識

選擇器前綴法(即選擇器Hack)

IE條件注釋法(即HTML條件注釋Hack):針對所有IE(注:IE10+已經(jīng)不再支持條件注釋): 化漆,針對IE6及以下版本:估脆。這類Hack不僅對CSS生效,對寫在判斷語句里面的所有代碼都會生效.

html5shiv.js:用于解決IE9以下版本瀏覽器對HTML5新增標(biāo)簽不識別座云,并導(dǎo)致CSS不起作用的問題疙赠。

由于IE6/IE7/IE8還有很大一部分用戶,為了讓網(wǎng)站瀏覽者都能正常的訪問HTML5網(wǎng)站朦拖,解決方案就有下面使用Javascript來使不支持HTML5的瀏覽器支持HTML標(biāo)簽圃阳。目前大多網(wǎng)站采用的這種方式(Bootcss官方例子也是如此)。

原理:利用腳本document.createElement(“”)創(chuàng)建對應(yīng)的腳本璧帝,CSS選擇器便可正確應(yīng)用到該標(biāo)簽捍岳。使用:考慮到IE9是支持html5的,所以直接在HTML頁面的head標(biāo)簽中添加腳本引用即可:

respond.js Respond.js讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。

css reset 因?yàn)樵缙诘臑g覽器支持和理解的CSS規(guī)范不同祟同,導(dǎo)致渲染頁面時(shí)效果不一致,會出現(xiàn)很多兼容性問題理疙。所以才會產(chǎn)生css reset 的問題晕城。

normalize.css ormalize.css 只是一個(gè)很小的CSS文件,但它在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性窖贤。相比于傳統(tǒng)的CSS Reset砖顷,Normalize.css是一種現(xiàn)代的、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案赃梧。Normalize.css現(xiàn)在已經(jīng)被用于Twitter Bootstrap滤蝠、HTML5 Boilerplate、GOV.UK授嘀、Rdio物咳、CSS Tricks 以及許許多多其他框架、工具和網(wǎng)站上蹄皱。

ModernizrModernizr 是一個(gè)很小的用來檢測下一代 Web 技術(shù)原生實(shí)現(xiàn)可用性的 JavaScript 庫览闰。

HTML5 和 CSS3 都引入了各自的新特性,但是同時(shí)也有很多瀏覽器不支持這些新特性巷折。

Modernizr 提供了一種簡單的方式檢測任意新特性压鉴,從而讓我們可以采取相應(yīng)的操作。比如锻拘,瀏覽器還不支持視頻特性油吭,那么我們可以顯示一個(gè)簡單的頁面。

我們還可以基于某個(gè)特性的可用性來創(chuàng)建 CSS 規(guī)則署拟,如果瀏覽器不支持某個(gè)新特性婉宰,那么這些規(guī)則將會自動(dòng)應(yīng)用到網(wǎng)頁上。- postCSS 是一個(gè)使用JS 插件來轉(zhuǎn)換CSS 的工具芯丧。 這些插件可以支持使用變量芍阎,混入(mixin),轉(zhuǎn)換未來的CSS 語法缨恒,內(nèi)聯(lián)圖片等操作谴咸。 簡而言之,PostCSS 可以將CSS 轉(zhuǎn)變成JavaScript 可以操作的數(shù)據(jù)格式骗露。

5 一般在哪個(gè)網(wǎng)站查詢屬性兼容性岭佳?

can i use2

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市萧锉,隨后出現(xiàn)的幾起案子珊随,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,183評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件叶洞,死亡現(xiàn)場離奇詭異鲫凶,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)衩辟,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評論 3 399
  • 文/潘曉璐 我一進(jìn)店門螟炫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人艺晴,你說我怎么就攤上這事昼钻。” “怎么了封寞?”我有些...
    開封第一講書人閱讀 168,766評論 0 361
  • 文/不壞的土叔 我叫張陵然评,是天一觀的道長。 經(jīng)常有香客問我狈究,道長碗淌,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,854評論 1 299
  • 正文 為了忘掉前任抖锥,我火速辦了婚禮贯莺,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘宁改。我一直安慰自己缕探,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,871評論 6 398
  • 文/花漫 我一把揭開白布还蹲。 她就那樣靜靜地躺著爹耗,像睡著了一般。 火紅的嫁衣襯著肌膚如雪谜喊。 梳的紋絲不亂的頭發(fā)上潭兽,一...
    開封第一講書人閱讀 52,457評論 1 311
  • 那天,我揣著相機(jī)與錄音斗遏,去河邊找鬼山卦。 笑死,一個(gè)胖子當(dāng)著我的面吹牛诵次,可吹牛的內(nèi)容都是我干的账蓉。 我是一名探鬼主播,決...
    沈念sama閱讀 40,999評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼逾一,長吁一口氣:“原來是場噩夢啊……” “哼铸本!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起遵堵,我...
    開封第一講書人閱讀 39,914評論 0 277
  • 序言:老撾萬榮一對情侶失蹤箱玷,失蹤者是張志新(化名)和其女友劉穎怨规,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體锡足,經(jīng)...
    沈念sama閱讀 46,465評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡波丰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,543評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了舶得。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片呀舔。...
    茶點(diǎn)故事閱讀 40,675評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖扩灯,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情霜瘪,我是刑警寧澤珠插,帶...
    沈念sama閱讀 36,354評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站颖对,受9級特大地震影響捻撑,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜缤底,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,029評論 3 335
  • 文/蒙蒙 一顾患、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧个唧,春花似錦江解、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至魄梯,卻和暖如春桨螺,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背酿秸。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評論 1 274
  • 我被黑心中介騙來泰國打工灭翔, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人辣苏。 一個(gè)月前我還...
    沈念sama閱讀 49,091評論 3 378
  • 正文 我出身青樓肝箱,卻偏偏與公主長得像,于是被迫代替她去往敵國和親稀蟋。 傳聞我的和親對象是個(gè)殘疾皇子狭园,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,685評論 2 360

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,760評論 1 92
  • 什么是 CSS hack 由于不同廠商的瀏覽器糊治,比如Internet Explorer,Safari,Mozill...
    無目的閱讀 265評論 0 0
  • 什么是 CSS hack css hack 由于不同廠商的瀏覽器或者同一廠商的瀏覽器的不同版本,IE6 IE7,對...
    饑人谷_hfz閱讀 294評論 0 0
  • 一 什么是 CSS hack 由于不同廠商的瀏覽器绎谦,比如Internet Explorer,Safari,Mozi...
    饑人谷_迪閱讀 302評論 0 0
  • 1.什么是 CSS hack管闷? 因?yàn)闉g覽器廠家的不同,例如常見的IE瀏覽器窃肠,Safari包个,谷歌瀏覽器,火狐瀏覽器等...
    小羊熊閱讀 86評論 0 0