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)站查詢屬性兼容性岭佳?