什么是 CSS hack##
CSS hack由于不同廠商的瀏覽器褥琐,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等刨肃,或者是同一廠商的瀏覽器的不同版本,如IE6和IE7配乓,對CSS的解析認識不完全一樣考赛,因此會導(dǎo)致生成的頁面效果不一樣月趟,得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS撇簿,讓它能夠同時兼容不同的瀏覽器聂渊,能在不同的瀏覽器中也能得到我們想要的頁面效果差购。
談一談瀏覽器兼容的思路##
- 從產(chǎn)品的角度和成本的角度來判斷要不要做瀏覽器兼容
產(chǎn)品的受眾?受眾使用的瀏覽器的比例汉嗽。產(chǎn)品的效果優(yōu)先還是基本功能優(yōu)先欲逃?以及你做這件事情的成本,時間成本等來判斷是否要做這件事情饼暑。 - 如果做的話要做到什么程度稳析?
你要考慮讓那些瀏覽器支持哪些效果。 - 如何做弓叛?
根據(jù)兼容需求選擇技術(shù)框架彰居、庫(jQuery……)根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js撰筷、css reset陈惰、normalize.css、Modernizr)postCSS條件注釋毕籽、CSS Hack奴潘、js 能力檢測做一些修補
列舉5種以上瀏覽器兼容的寫法##
常見屬性的兼容情況#####
- inline-block >=ie8
- min-width || max-height >=ie8
- :before || :after >=ie8
- :hover >=ie7
- background-size >=ie9
- border-radius >=ie9
- box-shadow >=ie9
- transform >=ie10
1、條件注釋法#####
<!--[if IE 6]>
<p>You are using Internet Explore 6.</p>
<![endif]-->
<!--[if ! IE]><!-->
<script>alert(1)</script>
<!--<!--[endif ]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
2影钉、CSS屬性前綴法#####
.box{
color: red;
_color: red; /*兼容ie6,ie6能識別下劃線"_"和星號"*" */
*color: red; /*兼容ie67,ie7只能識別星號 */
color: red\9; /* ie/edge 6-8 */
}
3画髓、選擇器前綴法#####
*html{}只對IE6生效/
+html{}/只對IE7生效
4、html5shiv.js平委、respond.js奈虾、css reset、normalize.css#####
5廉赔、Modernizr#####
6肉微、postCSS#####
以下工具/名詞是做什么的##
條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被 Microsoft Internet Explorer 有條件解釋的語句。條件注釋可被用來向 Internet Explorer 提供及隱藏代碼
IE Hack
使用特殊的符號或者方式寫出只有IE瀏覽器可以解析的代碼蜡塌,有CSS屬性前綴法碉纳、選擇器前綴法以及IE條件注釋法
js 能力檢測
使用JS的語法檢測瀏覽器支持的屬性,以便展示效果
html5shiv.js
用于解決IE9以下版本瀏覽器對HTML5新增標簽不識別馏艾,并導(dǎo)致CSS不起作用的問題劳曹。
respond.js
讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。
css reset
因為早期的瀏覽器支持和理解的CSS規(guī)范不同琅摩,導(dǎo)致渲染頁面時效果不一致铁孵,會出現(xiàn)很多兼容性問題,所以重置近乎全部的樣式來達到清除默認樣式
normalize.css
normalize相比較css reset的改進
1.保護了瀏覽器的默認樣式房资,沒有全部清除樣式
2.一般化的樣式:為大部分HTML元素提供
3.修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
4.優(yōu)化CSS可用性
Modernizr
Modernizr 是一個用來檢測瀏覽器功能支持情況的 JavaScript 庫蜕劝。通過這個庫我們可以檢測不同的瀏覽器對于HTML5特性的支持情況。Modernizr在頁面加載時快速運行來檢測功能;之后它會創(chuàng)建一個保存檢測結(jié)果的JavaScript對象岖沛,然后為你頁面中的html標簽上添加一系列class屬性來接通你的CSS暑始。
postCSS
PostCSS 是使用 JS 插件來轉(zhuǎn)換 CSS 的工具,支持變量婴削,混入蒋荚,未來 CSS 語法,內(nèi)聯(lián)圖像等等馆蠕。PostCSS 可以作為[預(yù)處理器]使用期升,類似:Sass, Less 和 Stylus。簡而言之互躬,PostCSS是CSS變成JavaScript的數(shù)據(jù)播赁,使它變成可操作。PostCSS是基于JavaScript插件吼渡,然后執(zhí)行代碼操作容为。PostCSS自身并不會改變CSS,它只是一種插件寺酪,為執(zhí)行任何的轉(zhuǎn)變鋪平道路坎背。
一般在哪個網(wǎng)站查詢屬性兼容性?##
CSS屬性兼容查詢網(wǎng)站:http://caniuse.com/