1. CSS hack
1. 什么是css hack？
針對 不同瀏覽器/不同版本寫相應的CSS code的過程，叫做css hack
出現問題： 由于不同廠商的瀏覽器 或 某瀏覽器的不同版本，對CSS的支持， 解析不一樣，導致在不同瀏覽器的環境中呈現出不一致的頁面展現效果。
解決方案： 為了獲得統一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式 我們針對不同瀏覽器、不同版本寫相應的CSS code
2. CSS hack分類
CSS Hack 大致有三種表現形式
- css屬性前綴法（即內部Hack）
- 選擇器前綴法
- IE條件注釋法
1.屬性前綴法（即類內部Hack）
例如 IE6 能識別下劃線_和星號，IE7 能識別星號，但不能識別下劃線_, IE6~IE10都認識\9,但firefox前面描述的都不認識
選擇器前綴法（即選擇器HACK）
例如IE6能識別html .class{},IE7能識別 +html .class{} 獲取* ：first-child+html .class{}.
IE條件注釋法（即HTML條件注釋Hack）
針對所有IE（注： ie10+已經不再支持條建注釋）：， 針對ie6 及以下版本。 這類Hack不僅對css生效， 對寫在判斷語句里面的所有代碼都會生效
CSS hack 常用的方式有三種，CSS 內部hack、選擇器hack、HTML 頭部引用，其中 CSS 內部hack 最常用。而CSS hack書寫順序，一般是將適用范圍廣、被識別能力強的CSS定義在前面比如，firefox寫在IE7前面，而IE7寫在IE6前面以此類推
2.談一談 瀏覽器兼容的思路
- 首先考慮要不要做瀏覽器兼容。
- 從產品角度出發，產品面向的客戶、客戶使用瀏覽器的比例(參照瀏覽器市場份額統計——百度統計)，產品需要著重效果還是保障基本功能優先。
- 比如客戶群體主要是年輕人，則主要考慮手機端以及chrome等，頁面是不是需要更人性化一些，
- 如果是面向政府、銀行等傳統企業，則考慮他們使用的大多是xp系統，則應該兼容IE低版本，并且頁面應該以基本功能、穩定性、安全性優先等。
- 從產品成本出發考慮，如果客戶使用IE低版本的比例不大，那還需要費時費力的去做低版本兼容嗎？
- 需要做到什么程度
- 如果需要兼容瀏覽器，那么需要兼容的瀏覽器作出什么樣的效果。
- 比如在chrome文本有陰影效果，那我的文本在IE6/7上的效果還需要陰影嗎，
- 比如采用下劃線的顯示效果。
- 如果實現這種效果特別復雜，在不影響基本功能的情況下，是不是可以省略這些效果。
- 如何去兼容
- 根據兼容的需求選擇框架或者庫
(1)Bootstrap (>=ie8)
(2)jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
(3)Vue (>= ie9)
- 根據兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr、postCSS)
- 條件注釋、CSS hack、js能力檢測做一些修補
- 漸進增強(progressive enhancement): 針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
- 優雅降級 (graceful degradation): 一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
3. 列舉5種以上瀏覽器兼容的寫法
- 條件注釋
條件注釋（condition comment）是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。使用了條件注釋的頁面在 windows Internet Explorer9 中可以正常工作，IE10 中無法運行
<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
- 選擇器前綴
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 僅對ie67有效 */
}
兼容IE67的清除浮動
- 條件注釋設置樣式
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
- 條件注釋引用JS
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>——支持HTML5的標簽
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>——支持媒體查詢
<![endif]-->
- 條件注釋增加css樣式處理兼容
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
4. 以下工具/名詞是做什么的
條件注釋條件注釋 (conditional comment) 是HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。只有IE6，7，8，9才識別，其他瀏覽器就認為是個注釋。
IE Hack使用CSS Hack解決IE瀏覽器不同版本之間CSS樣式的兼容問題，CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。
js 能力檢測看瀏覽器是否支持當前對象的屬性或是方法，先通過獲得頁面文本內容的方式來了解兼容性，并封裝函數或對象以解決此類問題。
html5shiv.js通過引用js，來模擬HTML5標簽，使瀏覽器支持HTML5的標簽
respond.js通過引用js，來使不支持的CSS3的媒體查詢的瀏覽器也能使用該功能；
css reset用于將瀏覽器默認樣式重置的css代碼
normalize.css解決不同瀏覽器默認樣式兼容性的css代碼，相比粗暴的css reset，有以下幾點：
- 保護有用的瀏覽器默認樣式而不是完全去掉它們
- 為大部分元素提供一般化的樣式
- 修復瀏覽器自身的bug并保證各瀏覽器的一致性
- 優化CSS可用性：用一些小技巧
- 解釋代碼：用注釋和詳細的文檔
Modernizr檢測瀏覽器HTML5和CSS的特性可用性的JS庫，根據支持或者不支持，在htmL標簽上增加相應的class，然后在css中對各class進行樣式設置
postCSS移植CSS樣式的工具，通過使用該工具，可以將標準的CSS樣式寫法，通過自動添加前綴等，轉換成瀏覽器支持的寫法
5.一般在哪個網站查詢屬性兼容性
caniuse.com可以用來查詢不同廠家、不同版本的瀏覽器對css樣式的支持情況
browserhacks.com因為Hugo Giraudel和Tim Pietrusky將各瀏覽器下的hack寫整理放在了Browserhacks.com之上
