什么是 CSS hack
CSS hack由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。簡單的說，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當然，我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果。(摘自百度百科)
談一談瀏覽器兼容的思路
- 兼容性的必要性：
- 產品角度(產品的用戶群體，用戶群體比例，效果優先還是基本功能優先)
- 成本角度(開發是需要時間和人力成本的，看是否有必要去做)
- 兼容性要做到什么程度：
- 讓哪些瀏覽器去支持哪些效果
- 兼容性怎么去做：
- 根據兼容需求選擇技術框架/庫(jquery)
- 根據兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
- 漸進增強和優雅降級
漸進增強(progressive enhancement):針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級(graceful degradation):一開始就構建完整功能，然后再針對低版本瀏覽器進行兼容。
*postCSS
- 條件注釋、CSS Hack、js能力檢測做一些修補。
列舉5種以上瀏覽器兼容的寫法
1.屬性前綴法(即類內部Hack)是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴，以達到預期的頁面展現效果。 例如 IE6能識別下劃線"_"和星號" "，IE7能識別星號" "，但不能識別下劃線""，IE6~IE10都認識"\9"，但firefox前述三個都不能認識;例如：
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
2.選擇器前綴法(即選擇器Hack)是針對一些頁面表現不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack;前最常見的是：
*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有效 ；
3.IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(注：IE10+已經不再支持條件注釋)： ，針對IE6及以下版本：。這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效;例如：
<!–-[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![endif]–->
4.條件注釋結合類選擇器整體優化。
5.-webkit- ，針對safari，chrome瀏覽器的內核CSS寫法；
-moz-，針對firefox瀏覽器的內核CSS寫法；
-ms-，針對ie內核的CSS寫法；
-o-，針對Opera內核的CSS寫法；
6.利用Modernizr工具。可以直接使用Modernizr在元素里生成的class名稱，在你的css文件里定義相應的屬性以便支持當前瀏覽器。
以下工具/名詞是做什么的
- 條件注釋
- 條件注釋(conditional comment)是用于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。(注：使用了條件注釋的頁面在IE9中可以正常工作,但在IE10中無法正常工作,IE10不再支持條件注釋)
寫法： <!--[if IE 6] <div class="layout">內容</div> <![endif]-->
注意非IE下的寫法
<!--[if !IE]><!--> <div class="layout"></div> <!--<![endif]
- IE Hack
由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。
IEhack是針對Microsoft Internet Explorer瀏覽器的各個版本對CSS解析不同所進行的兼容寫法。
- js 能力檢測
- html5shiv.js
- https://github.com/aFarkas/html5shiv
- 針對IE瀏覽器比較好的解決方案是html5shiv。html5shiv主要解決HTML5提出的新的元素不被IE6-8識別，這些新元素不能作為父節點包裹子元素，并且不能應用CSS樣式。讓CSS 樣式應用在未知元素上只需執行document.createElement(elementName) 即可實現。html5shiv就是根據這個原理創建的。
- respond.js
- Respond.js 是一個快速、輕量的 polyfill，用于為 IE6-8 以及其它不支持 [CSS3] Media Queries 的瀏覽器提供媒體查詢的 min-width 和 [max-width] 特性，實現[響應式網頁設計]（Responsive Web Design）。
- css reset
- 背景：早起的瀏覽器支持和解析CSS的規范不同，導致渲染頁面時效果不一樣，引起很多兼容性問題。
- 按照需求，合理的對css樣式進行重置。reset 的目的，是將所有的瀏覽器的自帶樣式重置掉，這樣更易于保持各瀏覽器渲染的一致性。
- 注意：
*{margin:0,padding:0}暴力清零css reset方式。
- normalize.css
- https://github.com/necolas/normalize.css/
- Normalize.css 是一個可定制的 CSS 文件，使瀏覽器呈現的所有元素，更一致和符合現代標準;是在現代瀏覽器環境下對于CSS reset的替代。 它正是針對只需要統一的元素樣式。該項目依賴于研究瀏覽器默認元素風格之間的差異，精確定位需要重置的樣式。
- normalize 的理念則是盡量保留瀏覽器的默認樣式，不進行太多的重置。
- Modernizr
- https://segmentfault.com/a/1190000003820989s深入理解
- Modernizr.js既能給老版本瀏覽器打補丁，又能保證新瀏覽器漸進增強的用戶體驗。
作用：
從實際操作來看，Modernizr默認做的事情很少，除了（在你選擇的情況下）給不支持html5的標簽的瀏覽器，如IE6，7，8追加一點由Remy Sharp開發的html5墊片腳本，使其識別<aside>、<section>等html5元素之外，它主要做的就是瀏覽器‘功能檢測’。
因此，它知道瀏覽器是否支持各種html5和css3特性。
HTML5, CSS3以及相關技術（例如canvas和web sockets）帶來了非常有用的特性，可以讓我們的web程序提升一個新的level。這些新技術允許我們只用HTML,CSS和JavaScript就可以構建包括在平板和移動設備上能夠運行的多樣化表單頁面。HTML5雖然提供了很多新特性，但是如果我們不考慮舊版本的瀏覽器就是用這些新技術也不太現實，老版本瀏覽器已經使用了很多年，我們依然需要考慮這些版本的兼容性問題。本文要解決的問題就是：在我們使用HTML5/CSS3技術的時候，如何更好地處理不支持HTML5/CSS3特性的舊版本瀏覽器問題。
- postCSS
- https://github.com/postcss/postcss
- PostCSS 可以直觀的理解為：它就是一個平臺
-
PostCSS 提供了一個解析器，它能夠將 CSS 解析成抽象語法樹（AST）。可以理解為下面這個模型：
239162490-562dd5c1849a6_articlex.png - 它能夠為 CSS 提供額外的功能；
- 通過在 PostCSS 這個平臺上，我們能夠開發一些插件，來處理我們的CSS，比如熱門的：autoprefixer；
- 我們能夠使用JavaScript來開發插件（這點對前端來說很重要）
一般在哪個網站查詢屬性兼容性？
caniuse.com
