1. 什么是 CSS hack
由于不同廠商的瀏覽器笋婿，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等码倦，或者是同一廠商的瀏覽器的不同版本拍鲤，如IE6和IE7屈留，對CSS的解析認識不完全一樣周循，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果份帐。
這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果楣导。
2. 談一談瀏覽器兼容的思路
- 要不要做
- 產品的角度（產品的受眾废境、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先）
- 成本的角度 (有無必要做某件事)
- 做到什么程度
- 讓哪些瀏覽器支持哪些效果
- 如何做
- 根據(jù)兼容需求選擇技術框架/庫(jquery)
- 根據(jù)兼容需求選擇兼容工具(html5shiv.js筒繁、respond.js噩凹、css reset、normalize.css毡咏、Modernizr)
postCSS - 條件注釋驮宴、CSS Hack、js 能力檢測做一些修
3. 列舉5種以上瀏覽器兼容的寫法
- . 條件注釋法
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句呕缭。條件注釋可被用來向IE提供及隱藏代碼堵泽。
<!--[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]-->
使用了條件注釋的頁面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中無法正常工作恢总。
|項目| 范例| 說明|
|-|||
|迎罗！| [if !IE] |非IE|
|lt| [if lt IE 5.5]| 小于IE 5.5|
|lte| [if lte IE 6]| 小于等于IE6|
|gt| [if gt IE 5] |大于 IE5|
|gte| [if gte IE 7]| 大于等于IE7|
|| |[if (IE 6) | (IE 7)]| IE6或者IE7|
- CSS屬性前綴法
屬性前綴法(即類內部Hack)：例如 IE6能識別下劃線""和星號" * "，IE7能識別星號" * "片仿，但不能識別下劃線""纹安，IE6~IE10都認識"\9"，但firefox前述三個都不能認識
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
- 選擇器前綴法(即選擇器Hack)
如 IE6能識別html .class{}滋戳，IE7能識別+html .class{}或者*:first-child+html .class{}
*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有效
- 條件注釋結合選擇器
在html 中創(chuàng)建條件樣式表钻蔑，并在HTML中body里添加相應的class類名
<!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]-->
接著創(chuàng)建對應的樣式
.iem7 .demo {color: yellow;}/*IE7移動端*/
.ie6 .demo{color: green;}/*IE6瀏覽器*/
.ie7 .demo {color: orange;}/*IE7瀏覽器*/
.ie8 .demo {color: lime;}/*IE8瀏覽器*/
- 利用Modernizr工具
Modernizr
網站提供了一個自定義需求的工具來生成僅僅你需要的探測功能，而不是一個什么都可以探測的大而全的版本奸鸯，就是說你可以讓你的腳本最小化咪笑。下圖是官方網站生成工具的界面，可以看到很多HTML5/CSS3和相關技術的探測功能都可以選擇上娄涩。
image.png
下載完你自定義的腳本以后窗怒，你就可以像引用普通js文件一樣引用它映跟，然后就可以用了。
添加完Modernizr引用以后扬虚，它就立即生效了努隙。運行的時候它會在html元素上添加一批CSS的class名稱，這些class名稱標記當前瀏覽器支持哪些特性和不支持哪些特性辜昵，支持的特性就直接顯示該天特性的名稱作為一個class（例如:canvas,websockets）荸镊，不支持的特性顯示的class是“no-特性名稱”（例如：no-flexbox）。
下面這段代碼是運行在IE9下的效果：
<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation
postmessage no-websqldatabase no-indexeddb hashchange no-history
draganddrop no-websockets rgba hsla multiplebgs backgroundsize
no-borderimage borderradius boxshadow no-textshadow opacity
no-cssanimations no-csscolumns no-cssgradients no-cssreflections
csstransforms no-csstransforms3d no-csstransitions fontface
generatedcontent video audio localstorage sessionstorage
no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">
你可以直接使用Modernizr在<html>元素里生成的class名稱堪置，在你的css文件里定義相應的屬性以便支持當前瀏覽器躬存。例如，下面的代碼可以屬性舀锨，在支持shadow陰影的瀏覽器顯示shadow岭洲，不支持的瀏覽器顯示標準的邊框：
.boxshadow #MyContainer {
border: none;
-webkit-box-shadow: #666 1px 1px 1px;
-moz-box-shadow: #666 1px 1px 1px;
}
.no-boxshadow #MyContainer {
border: 2px solid black;
}
因為如果瀏覽器支持box-shadows的話，Modernizr就會將boxshadow class添加到<html>元素坎匿，然后你可以將它管理到一個相應的div的id上盾剩。如果不支持，Modernizr就會將no-boxshadow class添加到<html>元素替蔬，這樣顯示的就是一個標準的邊框告私。這樣我們就可以很方便地在支持CSS3特性的瀏覽器上使用CSS3新功能，不支持的瀏覽器上繼續(xù)使用以前的方式进栽。
4. 以下工具/名詞是做什么的
條件注釋
條件注釋是一種安全的區(qū)分IE瀏覽器版本的語法德挣，且被認為是取代針對IE css hack的首選辦法，IE中的條件注釋對IE的版本和IE非IE有優(yōu)秀的區(qū)分能力快毛，是WEB設計中常用的hack方法格嗅。IE Hack
針對IE瀏覽器的不同版本，需要分別兼容所做的hackjs 能力檢測
能力檢測（又稱特性檢測）目標是識別瀏覽器的能力而不是識別特定的瀏覽器唠帝。只需根據(jù)瀏覽器支持的功能給出解決方案屯掖。
能力檢測作為確定下一步解決方案的依據(jù)，而不是用它來判斷用戶使用的是什么瀏覽器襟衰。
基本模式：
if( object.propertyInQuestion){
//使用 object.propertyInQuestion
}
兩個重要的概念：
第一個概念是先檢測達成目的的最常用的特性贴铜。先檢測最常用的特性，可以保證代碼最優(yōu)化瀑晒，因為在多數(shù)情況下都可以避免測試多個條件绍坝。
第二個概念是必須測試實際要用到的特性。一個特性存在苔悦，不一定意味著另一個特性也存在轩褐。
html5shiv.js
用于解決IE9以下版本瀏覽器對HTML5新增標簽不識別，并導致CSS不起作用的問題玖详。respond.js
Respond.js 可以讓 IE6 ~ IE8 也支援 Media Query把介，讓 Responsive Web Design 在 IE6 ~ IE8 上也可順利呈現(xiàn)勤讽。其原理為 Respond.js 會自動分析網頁有載入的 CSS ，找出 Media Query 的部分拗踢，分析后重新產生動態(tài)的對應 CSS 加在網頁的 head 中脚牍，并偵測瀏覽器寬度，動態(tài)置換對應的 CSS 內容巢墅，達成響應式的效果诸狭。css reset
早期的瀏覽器支持和理解的CSS規(guī)范不同，導致渲染頁面時效果不一致砂缩，會出現(xiàn)很多兼容性問題作谚。
早期CSS Reset的作用就是清除所有瀏覽器默認樣式，讓它一切歸零庵芭！normalize.css
Normalize.css 只是一個很小的CSS文件，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性雀监。相比于傳統(tǒng)的CSS Reset双吆，Normalize.css是一種現(xiàn)代的、為HTML5準備的優(yōu)質替代方案会前。
優(yōu)于css reset的地方
Normalize.css 保護了有價值的默認值
Reset通過為幾乎所有的元素施加默認樣式好乐，強行使得元素有相同的視覺效果。 相比之下瓦宜，Normalize.css保持了許多默認的瀏覽器樣式蔚万。 這就意味著你不用再為所有公共的排版元素重新設置樣式。 當一個元素在不同的瀏覽器中有不同的默認值時临庇，Normalize.css會力求讓這些樣式保持一致并盡可能與現(xiàn)代標準相符合反璃。
關于CSS Reset 那些事（一）之 歷史演變與Normalize.cssModernizr
Modernizr.js既能給老版本瀏覽器打補丁，又能保證新瀏覽器漸進增強的用戶體驗
作用：
從實際操作來看假夺，Modernizr默認做的事情很少淮蜈，除了（在你選擇的情況下）給不支持html5的標簽的瀏覽器，如IE6已卷，7梧田，8追加一點由Remy Sharp開發(fā)的html5墊片腳本，使其識別<aside>侧蘸、<section>等html5元素之外裁眯，它主要做的就是瀏覽器‘功能檢測’。
因此讳癌，它知道瀏覽器是否支持各種html5和css3特性穿稳。postCSS
PostCSS不是預處理器; 它不改變CSS。它本身并不完成css工作析桥。它的作用是提供一個CSS解析器和創(chuàng)建可以分析司草，測試艰垂，處理資源，優(yōu)化埋虹，創(chuàng)建回調猜憎，和傳輸給其它解析CSS框架的插件的框架。PostCSS把CSS解析成抽象語法樹（AST）搔课，通過一系列的插件胰柑，然后重新編譯成一個字符串。如果你熟悉JavaScript工具爬泥，那么可以把PostCSS類比為CSS的Babel柬讨。
5. 一般在哪個網站查詢屬性兼容性？
http://caniuse.com/ 可以查詢得到css兼容情況
