什么是 CSS hack栓辜？
什么是CSS hack
由于不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等）堂淡，對CSS的支持、解析不一樣刁绒，導致在不同瀏覽器的環(huán)境中呈現(xiàn)出不一致的頁面展現(xiàn)效果粘驰。這時氛赐，我們?yōu)榱双@得統(tǒng)一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式剃根，我們把這個針對不同的瀏覽器/不同版本寫相應的CSS code的過程哩盲，叫做CSS hack!
CSS hack的原理
由于不同的瀏覽器和瀏覽器各版本對CSS的支持及解析結果不一樣，以及CSS優(yōu)先級對瀏覽器展現(xiàn)效果的影響狈醉，我們可以據(jù)此針對不同的瀏覽器情景來應用不同的CSS廉油。
談一談瀏覽器兼容的思路
要不要做：產品的角度（產品的受眾人群，受眾的瀏覽器比例苗傅，效果有限還是功能優(yōu)先）抒线，是否有必要為小部分人群兼容；
做到什么程度：瀏覽器的角度渣慕，要讓哪些瀏覽器支持哪些效果嘶炭；
如何做：根據(jù)兼容需求選擇兼容技術框架\庫和工具（JQuery,css reset,normalize,respond,html5shiv);使用條件注釋，css hack逊桦，js能力檢測做一些修補眨猎，
列舉5種以上瀏覽器兼容的寫法
- html5shiv.js 讓IE等瀏覽器支持HTML5。
- 條件注釋法
| 項目 | 范例 | 說明 |
|---|---|---|
| ! | [if !IE] | 非IE |
| lt(less than) | [if lt IE 5.5] | 小于IE 5.5 |
| lte(equal) | [if lte IE 6] | 小于等于IE6 |
| gt(great than) | [if gt IE 5] | 大于 IE5 |
| gte | [if gte IE 7] | 大于等于IE7 |
- 選擇器前綴法
*html *前綴只對IE6生效
*+html *+前綴只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效
- 屬性前綴法
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
- 使用Modernizr强经。Modernizr運行時會在html元素上添加一批CSS的class名稱睡陪，這些class名稱標記當前瀏覽器支持哪些特性和不支持哪些特性，支持的特性就直接使用該特性的名稱作為一個class，不支持的特性顯示的class是“no-特性名稱”兰迫。
可以直接使用Modernizr在<html>元素里生成的class名稱信殊，在你的css文件里定義相應的屬性以便支持當前瀏覽器
以下工具/名詞是做什么的：
- 條件注釋：HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼逮矛。
- IE Hack：使用特殊的符號或者方式寫出只有IE瀏覽器可以解析的代碼鸡号，如CSS屬性前綴法、選擇器前綴法以及IE條件注釋法
- js 能力檢測：能力檢測的目標是識別瀏覽器的能力须鼎。使用這種方式無需顧及瀏覽器如何如何鲸伴，只需確定瀏覽器是否支持特定的能力，就可以給出相關的方案晋控。
- html5shiv.js：解決一些瀏覽器不支持html5的一些新特性和標簽的問題汞窗。
- respond.js：解決在做響應式網頁的時候一些瀏覽器不支持媒體查詢的問題。
- css reset：重新定義樣式屬性赡译，將瀏覽器默認樣式覆蓋掉仲吏。
- normalize.css：保護有用的瀏覽器默認樣式而不是完全去掉它們，修復瀏覽器自身的bug并保證各瀏覽器的一致性蝌焚，用一些小技巧優(yōu)化CSS可用性裹唆。相比于傳統(tǒng)的CSS reset，Normalize.css是一種現(xiàn)代的只洒、為HTML5準備的優(yōu)質替代方案许帐。
- Modernizr：Modernizr會在頁面加載時自動檢測瀏覽器的特性，并html元素上添加一批CSS的class名稱毕谴，這些class名稱標記當前瀏覽器支持哪些特性和不支持哪些特性成畦。
- postCSS：postCSS是一款通過JS插件來轉換CSS的工具。這些插件能幫你校驗你的CSS代碼涝开、轉換未來的CSS語法循帐、支持變量和混寫、以及內聯(lián)圖片等等舀武。
一般在哪個網站查詢屬性兼容性拄养？
caniuse.com
