什么是 CSS hack
- 由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等体谒，或者是同一廠商的瀏覽器的不同版本但校，如IE6和IE7，對CSS的解析認(rèn)識不完全一樣，因此會導(dǎo)致生成的頁面效果不一樣，得不到我們所需要的頁面效果胡野。這時就需要針對不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果痕鳍。
- 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前述三個都不能認(rèn)識
- 選擇器前綴法(即選擇器Hack)
- IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(注：IE10+已經(jīng)不再支持條件注釋)：
铭若，針對IE6及以下版本：。這類Hack不僅對CSS生效递览，對寫在判斷語句里面的所有代碼都會生效
談一談瀏覽器兼容的思路
- 產(chǎn)品的角度（產(chǎn)品的受眾叼屠、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先）
- 成本的角度 (有無必要做某件事)
列舉5種以上瀏覽器兼容的寫法
| 項(xiàng)目 |
范例 |
說明 |
| ！ |
[if !IE] |
非IE |
| lt |
[if lt IE 5.5] |
小于IE 5.5 |
| lte |
[if lte IE 6] |
小于等于IE6 |
| gt |
[if gt IE 5] |
大于 IE5 |
| gte |
[if gte IE 7] |
大于等于IE7 |
| l |
[if (IE 6)l(IE 7)] |
IE6或者IE7 |
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
以下工具/名詞是做什么的
- 條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句颓影。條件注釋可被用來向IE提供及隱藏代碼
- IE Hack
使用特殊的符號或者方式寫出只有IE瀏覽器可以解析的代碼各淀，有CSS屬性前綴法、選擇器前綴法以及IE條件注釋法
- js 能力檢測
使用JS的語法檢測瀏覽器支持的屬性诡挂，以便展示效果
- html5shiv.js
用于解決IE9以下版本瀏覽器對HTML5新增標(biāo)簽不識別碎浇，并導(dǎo)致CSS不起作用的問題
- respond.js
讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢
- css reset
通過重新定義標(biāo)簽樣式，“覆蓋”瀏覽器的CSS默認(rèn)屬性
- normalize.css
Normalize.css 只是一個很小的CSS文件咆畏，但它在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性南捂。相比于傳統(tǒng)的CSS reset，Normalize.css是一種現(xiàn)代的旧找、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案
- Modernizr
Modernizr是一個 JavaScript 庫溺健，用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性
- postCSS
PostCSS是一個JS插件轉(zhuǎn)換樣式表的工具。這些插件能夠檢驗(yàn)我們的CSS钮蛛、支持變量和混合鞭缭，轉(zhuǎn)化css3的新特性語法、行內(nèi)圖片等
一般在哪個網(wǎng)站查詢屬性兼容性魏颓？
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
