什么是 CSS hack

引自百度百科的定義:

CSS hack由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等置侍，或者是同一廠商的瀏覽器的不同版本映之，如IE6和IE7拦焚，對CSS的解析認(rèn)識不完全一樣，因此會導(dǎo)致生成的頁面效果不一樣惕医，得不到我們所需要的頁面效果耕漱。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS算色，讓它能夠同時兼容不同的瀏覽器抬伺，能在不同的瀏覽器中也能得到我們想要的頁面效果。
簡單的說灾梦，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器峡钓。當(dāng)然，我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果若河。
CSS Hack常見的有三種形式：
CSS屬性Hack能岩、CSS選擇符Hack以及IE條件注釋Hack， Hack主要針對IE瀏覽器萧福。
1拉鹃、屬性級Hack：比如IE6能識別下劃線“_”和星號“*”，IE7能識別星號“*”鲫忍，但不能識別下劃線”_ ”膏燕，而firefox兩個都不能認(rèn)識。
2悟民、選擇符級Hack：比如IE6能識別*html .class{}坝辫，IE7能識別*+html .class{}或者*:first-child+html .class{}。

談一談瀏覽器兼容的思路

1.要不要做
產(chǎn)品的角度（產(chǎn)品的受眾射亏，受眾的瀏覽器比例近忙，效果優(yōu)先還是基本功能優(yōu)先）
成本的角度（有無必要做某件事情）
2.做到什么程度
讓哪些瀏覽器去支持哪些效果
3.如何做
- 根據(jù)兼容需求選擇技術(shù)框架/庫（Bootstrap (>=ie8),jQuery 1 (>=ie6), jQuery 2 (>=ie9),Vue (>= ie9)
- 根據(jù)兼容需求選擇兼容工具(html5shiv.js/respond.js/css reset/normalize.css/modernizr/postCSS）
- 條件注釋/css Hack/js　能力檢測做一些修補(bǔ)

4.關(guān)于瀏覽器兼容的應(yīng)對策略(漸進(jìn)增強(qiáng)和優(yōu)雅降級)
漸進(jìn)增強(qiáng) progressive enhancement：
概念：針對低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能智润，然后再針對高級瀏覽器進(jìn)行效果及舍、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗。
觀點(diǎn)：“漸進(jìn)增強(qiáng)”觀點(diǎn)認(rèn)為應(yīng)關(guān)注于內(nèi)容本身窟绷。
內(nèi)容是我們建立網(wǎng)站的誘因锯玛。有的網(wǎng)站展示它，有的則收集它钾麸，有的尋求更振，有的操作，還有的網(wǎng)站甚至?xí)陨系姆N種饭尝，但相同點(diǎn)是它們?nèi)忌婕暗絻?nèi)容肯腕。這使得“漸進(jìn)增強(qiáng)”成為一種更為合理的設(shè)計范例。這也是它立即被 Yahoo! 所采納并用以構(gòu)建其“分級式瀏覽器支持 (Graded Browser Support)”策略的原因所在钥平。
優(yōu)雅降級 graceful degradation：
概念：一開始就構(gòu)建完整的功能实撒，然后再針對低版本瀏覽器進(jìn)行兼容姊途。
觀點(diǎn)：“優(yōu)雅降級”觀點(diǎn)認(rèn)為應(yīng)該針對那些最高級、最完善的瀏覽器來設(shè)計網(wǎng)站知态。而將那些被認(rèn)為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發(fā)周期的最后階段捷兰，并把測試對象限定為主流瀏覽器（如 IE、Mozilla 等）的前一個版本负敏。
在這種設(shè)計范例下贡茅，舊版的瀏覽器被認(rèn)為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。你可以做一些小的調(diào)整來適應(yīng)某個特定的瀏覽器其做。但由于它們并非我們所關(guān)注的焦點(diǎn)顶考，因此除了修復(fù)較大的錯誤之外，其它的差異將被直接忽略妖泄。
區(qū)別：優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始驹沿，并試圖減少用戶體驗的供給，而漸進(jìn)增強(qiáng)則是從一個非车负基礎(chǔ)的渊季，能夠起作用的版本開始，并不斷擴(kuò)充罚渐，以適應(yīng)未來環(huán)境的需要却汉。降級（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看搅轿，同時保證其根基處于安全地帶病涨。

列舉5種以上瀏覽器兼容的寫法

屬性前綴法(即類內(nèi)部Hack)
例如 IE6能識別-, 下劃線, 星號，IE7能識別星號*璧坟，但不能識別-, 下劃線,IE6~IE10都認(rèn)識\9既穆，但firefox前述三個都不能認(rèn)識

 box{
 color: red;
 _color: blue; /*ie6*/
 *color: pink; /*ie67*/ 
 color: yellow\9; /*ie/edge 6-8*/
}

選擇器前綴法

  *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有效

條件注釋法
這種方式是IE瀏覽器專有的Hack方式，微軟官方推薦使用的hack方式
針對所有IE：
<! -- [if IE]>IE瀏覽器顯示的內(nèi)容 <![endif]-->雀鹃；
針對IE6及以下版本：
<! -- [if lt IE 6]>只在IE6-顯示的內(nèi)容 <![endif]-->幻工；
這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效

以下工具/名詞是做什么的

• 條件注釋
  條件注釋 是于HTML源碼中被 IE 有條件解釋的語句黎茎。條件注釋可被用來向 IE提供及隱藏代碼囊颅。 條件注釋最初于微軟的 Internet Explorer 5瀏覽器中出現(xiàn)，并且直至 Internet Explorer 9 均支持傅瞻。微軟已宣布于IE10停止支持踢代。具體代碼如上已給出。
• IE Hack
  針對IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程
• js 能力檢測
  能力檢測又稱特性檢測嗅骄。能力檢測的目的不是識別具體的瀏覽器胳挎，而是識別瀏覽器的能力。
  能力檢測的目的應(yīng)該是根據(jù)你需要的特性來選擇問題的解決方案溺森，而不是檢測用戶在用什么瀏覽器慕爬。而且在檢測時要保證你要用到的能力確實(shí)存在窑眯，自己不要做過多的推測，代碼也不要做過多的判斷医窿。
  兩個重要的概念：
  第一個概念是先檢測達(dá)成目的的最常用的特性磅甩。先檢測最常用的特性，可以保證代碼最優(yōu)化姥卢，因為在多數(shù)情況下都可以避免測試多個條件卷要。
  第二個概念是必須測試實(shí)際要用到的特性。一個特性存在隔显，不一定意味著另一個特性也存在却妨。
• html5shiv.js
  IE 9之前的版本幾乎不支持HTML5元素和其它HTML5特性饵逐。
  HTML5 Shiv支持在舊版Internet Explorer（IE9之前）中使用HTML5細(xì)分元素括眠，并為Internet Explorer 6-9，Safari 4.x（和iPhone 3.x）和Firefox 3.x提供基本的HTML5樣式倍权。
• respond.js
  響應(yīng)式布局掷豺，理想狀態(tài)是，對PC/移動各種終端進(jìn)行響應(yīng)薄声。媒體查詢的支持程度是IE9+以及其他現(xiàn)代的瀏覽器当船，但是IE8在市場當(dāng)中仍然占據(jù)了比較大量的市場份額，使我們不得不進(jìn)行IE低端瀏覽器的考慮默辨。那么如何在IE6~8瀏覽器中兼容響應(yīng)式布局呢德频？這里我們需要借助這樣一個文件：respond.js
  Respond.js 是一個快速、輕量的 polyfill缩幸，用于為 IE6-8 以及其它不支持 CSS3 Media Queries 的瀏覽器提供媒體查詢的 min-width 和 max-width 特性壹置，實(shí)現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計。
• css reset
  css reset是通過重新定義標(biāo)簽樣式表谊，把瀏覽器的默認(rèn)樣式覆蓋掉钞护，以便保持個瀏覽器渲染的一致性。
• normalize.css
  normalize.css是reset.css的替代方案爆办，保留有用的瀏覽器默認(rèn)樣式难咕，同時進(jìn)行一些bug的修復(fù)。
• Modernizr
  Modernizr是一套JavaScript 庫距辆，用來偵測瀏覽器是否支持 CSS3 或 HTML5 功能支持情況等余佃。如果瀏覽器不支持，Modernizr會使用其他的解決方法來進(jìn)行模擬跨算。
  Modernizr 會在頁面加載后立即檢測特性爆土；然后創(chuàng)建一個包含檢測結(jié)果的 JavaScript 對象，同時在 html 元素加入方便你調(diào)整 CSS 的 class 名漂彤。
• postCSS
  PostCSS是一個使用JS插件轉(zhuǎn)換樣式的工具雾消。這些插件可以刪除您的CSS灾搏，支持變量和混合，透明未來的CSS語法立润，內(nèi)聯(lián)圖像等狂窑。
  PostCSS不是預(yù)處理器本身; 它不會轉(zhuǎn)換CSS。事實(shí)上桑腮，它本身根本不做任何事泉哈。它所做的是提供一個CSS解析器和一個框架，用于創(chuàng)建可以分析破讨，lint丛晦，處理資產(chǎn)，優(yōu)化提陶，創(chuàng)建回退烫沙，否則轉(zhuǎn)換解析的CSS的插件。PostCSS將CSS解析為抽象語法樹（AST）隙笆，通過一系列插件將其傳遞凭豪，然后PostCSS核心為插件更改的樹生成一個新的CSS字符串天揖。外构。如果你熟悉JavaScript工具展运，那么你可以認(rèn)為PostCSS 為CSS的Babel。
  PostCSS目前有200多個插件铅忿，其中很多在PostCSS GitHub頁面上列出剪决，而其他的可以在有用的PostCSS目錄postcss.parts中找到。PostCSS可以集成在大多數(shù)構(gòu)建工具中檀训，包括Gulp柑潦，Grunt，webpack或npm肢扯。
  PostCSS被行業(yè)領(lǐng)導(dǎo)者使用妒茬，包括維基百科，Twitter蔚晨，阿里巴巴和JetBrains乍钻。該 Autoprefixer PostCSS插件是最流行的CSS處理器之一。

一般在哪個網(wǎng)站查詢屬性兼容性铭腕？

CanIUse查CSS屬性兼容
BROWSER hacks查 Hack 的寫法