1笼踩、什么是 CSS hack?
由于不同廠商的流覽器或某瀏覽器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等)飒硅,對CSS的支持柄驻、解析不一樣狐树,導(dǎo)致在不同瀏覽器的環(huán)境中呈現(xiàn)出不一致的頁面展現(xiàn)效果。這時鸿脓,我們?yōu)榱双@得統(tǒng)一的頁面效果抑钟,就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式,我們把這個針對不同的瀏覽器/不同版本寫相應(yīng)的CSS code的過程野哭,叫做CSS hack!
- hack的原理
由于不同的瀏覽器和瀏覽器各版本對CSS的支持及解析結(jié)果不一樣在塔,以及CSS優(yōu)先級對瀏覽器展現(xiàn)效果的影響,我們可以據(jù)此針對不同的瀏覽器情景來應(yīng)用不同的CSS拨黔。
2蛔溃、談一談瀏覽器兼容的思路?
- 1.從產(chǎn)品的角度(產(chǎn)品的受眾、受眾的瀏覽器比例贺待、效果優(yōu)先還是基本功能優(yōu)先)
- 2.成本的角度 (有無必要做某件事)
- 3.做到什么程度讓哪些瀏覽器支持哪些效果
- 4.根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)
- 5.根據(jù)兼容需求選擇兼容工具(html5shiv.js徽曲、respond.js、css reset麸塞、normalize.css秃臣、Modernizr)
postCSS
-6.條件注釋、CSS Hack哪工、js 能力檢測做一些修補
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、以下工具/名詞是做什么的
條件注釋
條件注釋 是于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)簽不識別,并導(dǎo)致CSS不起作用的問題愚臀。所以我們在使用過程中忆蚀,想要讓低版本的瀏覽器,即IE9以下的瀏覽器支持,那么這款html5shiv.js是一個非常好的選擇蜓谋!respond.js
Respond.js 是一個小腳本梦皮,用于為 IE6-8 以及其它不支持 CSS3 媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性,實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計桃焕。css reset
將瀏覽器的默認(rèn)樣式全部去掉剑肯,更準(zhǔn)確說就是通過重新定義標(biāo)簽樣式」厶茫“覆蓋”瀏覽器的CSS默認(rèn)屬性让网。最最簡單的說法就是把瀏覽器提供的默認(rèn)樣式覆蓋掉!這就是CSS reset师痕。-
normalize.css
Normalize.css 是一個可以定制的CSS文件溃睹,它讓不同的瀏覽器在渲染網(wǎng)頁元素的時候形式更統(tǒng)一。
它可以:- 保留有用的默認(rèn)值胰坟,不同于許多 CSS reset 的簡單粗暴因篇。
- 標(biāo)準(zhǔn)化的樣式,適用范圍廣的元素笔横。
- 糾正錯誤和常見的瀏覽器的不一致性竞滓。
- 一些細(xì)微的改進,提高了易用性吹缔。
-使用詳細(xì)的注釋來解釋代碼商佑。
Modernizr
Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS,無論瀏覽器是否支持這些特性厢塘。這是處理漸進增強的完美方案茶没。
Modernizr 會在頁面加載后立即檢測特性;然后創(chuàng)建一個包含檢測結(jié)果的 JavaScript 對象晚碾,同時在 html 元素加入方便你調(diào)整 CSS 的 class 名抓半。postCSS
它可以被理解為一個平臺,可以讓一些插件在其中運行迄薄,它提供了一個解析器琅关,可以將CSS解析成抽象語法樹,通過PostCSS這個平臺讥蔽,我們能夠開發(fā)一些插件涣易,來處理CSS。熱門插件如autoprefixer冶伞,它可以幫我們處理兼容問題新症,只需正常寫CSS,autoprefixer可以幫我的自動生成兼容性代碼响禽。