什么是css hack

css hack 由于不同廠商的瀏覽器，比如Internet Explorer、 Safar、 Mozilla Firefox、
Chorme等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果。 這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫不同的CSS，讓它能夠同時(shí)兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。

簡(jiǎn)單的說(shuō)，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當(dāng)然，我們也可以反過(guò)來(lái)利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果。

談一談瀏覽器兼容的思路

• 要不要做
  • 產(chǎn)品的角度（產(chǎn)品的受眾，及受眾使用的各瀏覽器的比例，效果優(yōu)先還是基本功能優(yōu)先。）
  • 產(chǎn)品成本角度(成本的考慮，投入產(chǎn)出比。)
• 做到什么程度
  • 兼容哪些瀏覽器，兼容到什么版本，讓哪些瀏覽器支持哪些效果。
• 如何去做

  • 漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)的選擇

    逐漸增強(qiáng)：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。

    優(yōu)雅降級(jí)：一開(kāi)始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。

    區(qū)別：優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開(kāi)始，并試圖減少用戶體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非?；A(chǔ)的，能夠起作用的版本開(kāi)始，并不斷擴(kuò)充，以適應(yīng)未來(lái)環(huán)境的需要。降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶。

  • 根據(jù)兼容需求選擇技術(shù)框架/庫(kù)(jquery)

  • 根據(jù)兼容需求選擇兼容工具（html5shiv.js，respond.js CSS復(fù)位normalize.css，Modernizr的）

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

• 條件注釋法

  
  
  注釋條件

         例子：
        <!--[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"></link>
        <![endif]-->
  

  • css屬性前綴法(即類內(nèi)部Hack) ：屬性前綴法(即類內(nèi)部Hack)：例如 IE6能識(shí)別下劃線""和星號(hào)" * "，IE7能識(shí)別星號(hào)" * "，但不能識(shí)別下劃線""，IE6~IE10都認(rèn)識(shí)"\9"，但firefox前述三個(gè)都不能認(rèn)識(shí)
    例子：
    .div{
    color: red;
    *color: blue; IE6,IE7
    _color: green; IE7
    color: pink\9; IE6~IE10
    }

• 選擇器前綴法(即選擇器Hack)

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

• 條件注釋
• IE Hack
• js 能力檢測(cè)
• html5shiv.js
• respond.js
• css reset
• normalize.css
• Modernizr
• postCSS

條件注釋：條件注釋是一種安全的區(qū)分IE瀏覽器版本的語(yǔ)法，且被認(rèn)為是取代針對(duì)IE css hack的首選辦法。
1.條件注釋只能用于IE5以上,和IE10以下。
2.如果你安裝了多個(gè)IE，條件注釋將會(huì)以最高版本的IE為標(biāo)準(zhǔn)。
3.條件注釋的基本結(jié)構(gòu)和HTML的注釋(<!– –>)是一樣的。因此IE以外的瀏覽器將會(huì)把它們看作是普通的注釋而完全忽略它們。
4.IE將會(huì)根據(jù)if條件來(lái)判斷是否如解析普通的頁(yè)面內(nèi)容一樣解析條件注釋里的內(nèi)容。

注釋條件

例子：

        <!--[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"></link>
        <![endif]-->

條件注釋參考文本

IE hack: 使用特殊的符號(hào)或者方式寫出只有IE瀏覽器可以解析的代碼，有CSS屬性前綴法、選擇器前綴法以及IE條件注釋法
1.CSS屬性前綴法：比如 IE6能識(shí)別下劃線"_"和星號(hào)" * "，IE7能識(shí)別星號(hào)" * "，但不能識(shí)別下劃線"_"，而firefox兩個(gè)都不能認(rèn)識(shí)。等等
2.比如 IE6能識(shí)別*html .class{}，IE7能識(shí)別*+html .class{}或者*:first-child+html .class{}。等等
3.HTML頭部引用(if IE)Hack：針對(duì)所有IE：<![endif]-->，針對(duì)IE6及以下版本：<![endif]-->，這類Hack不僅對(duì)CSS生效，對(duì)寫在判斷語(yǔ)句里面的所有代碼都會(huì)生效。
4.書寫順序，一般是將識(shí)別能力強(qiáng)的瀏覽器的CSS寫在前面。瀏覽器優(yōu)先級(jí)別:FF < IE7 < IE6 , CSS hack書寫順序一般為FF IE7 IE6

參考js 能力檢測(cè):瀏覽器的能力檢測(cè)目標(biāo)不是檢測(cè)特定的瀏覽器，而是檢測(cè)瀏覽器的能力。這樣，只需要檢測(cè)瀏覽器是否支持特定的能力，就可以給出特定的解決方案。這一部分檢測(cè)是解決瀏覽器兼容問(wèn)題的主要檢測(cè)。

html5shiv.js:用于解決IE9以下版本瀏覽器對(duì)HTML5新增標(biāo)簽不識(shí)別,并導(dǎo)致CSS不起作用的問(wèn)題
參考文本
html5shiv.js

respond.js:用于為 IE6-8 以及其它不支持 CSS3 Media Queries 的瀏覽器提供媒體查詢的 min-width 和 max-width 特性，實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)
參考文本
respond.js

css reset:將瀏覽器的默認(rèn)樣式全部去掉，更準(zhǔn)確說(shuō)就是通過(guò)重新定義標(biāo)簽樣式。
(CSS Reset 是革命黨，CSS Reset 里最激進(jìn)那一派提倡不管你小子有用沒(méi)用，通通給我脫了那身衣服，憑什么你 body 出生就穿一圈 margin，憑什么你姓 h 的比別人吃得胖，憑什么你 ul 戴一胳膊珠子。于是 *{margin:0;} 等等運(yùn)動(dòng)，把人家全拍扁了?？此剖潜娚降攘耍瑢?shí)則是浪費(fèi)了資源又占不到便宜，有求于人家的時(shí)候還得賤賤地給加回去，實(shí)在需要人家的默認(rèn)樣式了怎么辦？人家鍋都扔爐子里燒了，自己看著辦吧。)

參考

normalize.css:是一個(gè)可以定制的CSS文件，它讓不同的瀏覽器在渲染網(wǎng)頁(yè)元素的時(shí)候形式更統(tǒng)一.
(Normalize.css 是改良派。他們提倡，各個(gè)元素都有其存在的道理，簡(jiǎn)單粗暴地一視同仁是不好的。body 那一圈確實(shí)擠壓了頁(yè)面的生存空間，那就改掉。士農(nóng)工商，誰(shuí)有誰(shuí)的作用，給他們制定個(gè)規(guī)范，確保他們?cè)谌魏螢g覽器里都干好自己的活兒。)

1. 保留有用的默認(rèn)值，不同于許多 CSS reset 的簡(jiǎn)單粗暴。
2. 標(biāo)準(zhǔn)化的樣式，適用范圍廣的元素。
3. 糾正錯(cuò)誤和常見(jiàn)的瀏覽器的不一致性。
4. 一些細(xì)微的改進(jìn)，提高了易用性。
5. 使用詳細(xì)的注釋來(lái)解釋代碼。
   參考

** Modernizr**:當(dāng)你在網(wǎng)頁(yè)中嵌入Modernizr的腳本時(shí)，它會(huì)檢測(cè)當(dāng)前瀏覽器是否支持CSS3的特性，同時(shí)也會(huì)檢測(cè)是否支持HTML5的特性。在獲取到這些信息的基礎(chǔ)上，你可以在那些支持這些功能的瀏覽器上使用它們，來(lái)決定是否創(chuàng)建一個(gè)基于JS的fallback，或者對(duì)那些不支持的瀏覽器進(jìn)行簡(jiǎn)單的優(yōu)雅降級(jí)。另外，Modernizr還可以令I(lǐng)E支持對(duì)HTML5的元素應(yīng)用CSS樣式，這樣開(kāi)發(fā)者就可以立即使用這些更富有語(yǔ)義化的標(biāo)簽了。
參考
Modernizr.js

postCSS:PostCSS 是一套利用JS插件實(shí)現(xiàn)的用來(lái)改變CSS的工具.這些插件能夠支持變量和混合語(yǔ)法，轉(zhuǎn)換未來(lái)CSS語(yǔ)法，內(nèi)聯(lián)圖片，還有更多
參考

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

can i ues