CSS hack
不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支持检号、解析不一樣腌歉，導(dǎo)致在不同瀏覽器的環(huán)境中呈現(xiàn)出不一致的頁面展現(xiàn)效果。為了獲得統(tǒng)一的頁面效果齐苛，需要針對不同的瀏覽器或不同版本寫特定的CSS樣式翘盖，我們把這個(gè)針對不同的瀏覽器/不同版本寫相應(yīng)的CSS code的過程，叫做CSS hack
瀏覽器兼容的思路
- 要不要做
- 產(chǎn)品的角度（產(chǎn)品的受眾凹蜂、受眾的瀏覽器比例馍驯、效果優(yōu)先還是基本功能優(yōu)先）
- 成本的角度 (有無必要做某件事)
- 做到什么程度
- 讓哪些瀏覽器支持哪些效果
- 如何做
- 根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)
- 根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js玛痊、css reset汰瘫、normalize.css、Modernizr)
- postCSS
- 條件注釋擂煞、CSS Hack混弥、js 能力檢測做一些修補(bǔ)
瀏覽器兼容的寫法（5種以上）
- 條件注釋
| 項(xiàng)目 | 說明 | 范例 |
|---|---|---|
| ! | 非 |
[if !IE]，非IE |
｜ |
或 |
[if (IE 6)｜(IE 7)]对省，IE6或者IE7 |
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 |
- 屬性前綴法
IE6能識別 * _
IE7能識別 *
“-″減號是IE6專有的hack
“\9”IE6~IE10都生效
“\0” IE8/IE9/IE10都生效惦辛，是IE8/9/10的hack
“\9\0” 只對IE9/IE10生效，是IE9/10的hack
示例：
.box {
color: red;
_color: blue; /*ie6*/
*color: green; /*ie6 7*/
color: yellow/9; /*ie6-10*/
}
- 選擇器前綴法
選擇器前綴法是針對一些頁面表現(xiàn)不一致或者需要特殊對待的瀏覽器仓手，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進(jìn)行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有效
- 條件注釋結(jié)合類選擇器整體優(yōu)化
<!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]-->
優(yōu)點(diǎn)：不用在CSS代碼的屬性前加入令人費(fèi)解的前綴（*或_）
- Modernizr工具
首先下載自定義的腳本,像引用普通js文件一樣引用它
<script src="Scripts/Modernizr.js" type="text/javascript"></script>
添加完Modernizr引用以后，它就立即生效了俗或。運(yùn)行的時(shí)候它會在html元素上添加一批CSS的class名稱市怎，這些class名稱標(biāo)記當(dāng)前瀏覽器支持哪些特性和不支持哪些特性，支持的特性就直接顯示該天特性的名稱作為一個(gè)class（例如:canvas,websockets）辛慰，不支持的特性顯示的class是“no-特性名稱”（例如：no-flexbox）。下面這段代碼是運(yùn)行在Chrome下的效果：
<html class=" js flexbox canvas canvastext webgl no-touch geolocation
postmessage websqldatabase indexeddb hashchange history draganddrop websockets
rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow
textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms
csstransforms3d csstransitions fontface generatedcontent video audio localstorage
sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
下面這段代碼是運(yùn)行在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">
也可結(jié)合HTML5/CSS3特性一起使用
可以直接使用Modernizr在<html>元素里生成的class名稱干像，在你的css文件里定義相應(yīng)的屬性以便支持當(dāng)前瀏覽器帅腌。例如，下面的代碼可以屬性麻汰，在支持shadow陰影的瀏覽器顯示shadow速客，不支持的瀏覽器顯示標(biāo)準(zhǔn)的邊框：
.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;
}
因?yàn)槿绻麨g覽器支持box-shadows的話，Modernizr就會將boxshadow class添加到<html>元素五鲫，然后你可以將它管理到一個(gè)相應(yīng)的div的id上溺职。如果不支持，Modernizr就會將no-boxshadow class添加到<html>元素位喂，這樣顯示的就是一個(gè)標(biāo)準(zhǔn)的邊框浪耘。這樣我們就可以很方便地在支持CSS3特性的瀏覽器上使用CSS3新功能，不支持的瀏覽器上繼續(xù)使用以前的方式塑崖。
各種工具/名詞
條件注釋
是于HTML源碼中被 IE 有條件解釋的語句七冲。條件注釋可被用來向 IE提供及隱藏代碼。 條件注釋最初于微軟的 Internet Explorer 5瀏覽器中出現(xiàn)规婆，并且直至 Internet Explorer 9 均支持澜躺。IE10+不再支持條件注釋。IE Hack
針對不同版本的IE瀏覽器寫的css抒蚜，從而使各個(gè)版本IE能夠順利渲染頁面掘鄙。js 能力檢測
瀏覽器的能力檢測目標(biāo)不是檢測特定的瀏覽器，而是檢測瀏覽器的能力嗡髓。這樣操漠，只需要檢測瀏覽器是否支持特定的能力，就可以給出特定的解決方案器贩。這一部分檢測是解決瀏覽器兼容問題的主要檢測颅夺。html5shiv.js
通過模擬標(biāo)簽解決不支持HTML5新標(biāo)簽朋截，新特性的瀏覽器的兼容問題。IE9以下的IE版本不支持HTML5respond.js
用于為 IE6-8 以及其它不支持 CSS3 媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性吧黄，實(shí)現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計(jì)css reset
將所有的瀏覽器的自帶樣式重置掉部服，這樣更易于保持各瀏覽器渲染的一致性參考文章-
normalize.css
Normalize.css 是一個(gè)可以定制的CSS文件，它讓不同的瀏覽器在渲染網(wǎng)頁元素的時(shí)候形式更統(tǒng)一拗慨，在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性- Preserves useful defaults, unlike many CSS resets.
保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們 - Normalizes styles for a wide range of elements
一般化的樣式：為大部分HTML元素提供 - Corrects bugs and common browser inconsistencies
修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性 - Improves usability with subtle improvements
優(yōu)化CSS可用性：用一些小技巧 - Explains what code does using detailed comments
解釋代碼：用注釋和詳細(xì)的文檔來
- Preserves useful defaults, unlike many CSS resets.
Modernizr
odernizr 是一個(gè) JavaScript 庫廓八，用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性。Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS赵抢，無論瀏覽器是否支持這些特性剧蹂。這是處理漸進(jìn)增強(qiáng)的完美方案。
工作原理：
Modernizr 會在頁面加載后立即檢測特性烦却；然后創(chuàng)建一個(gè)包含檢測結(jié)果的 JavaScript 對象宠叼，同時(shí)在 html 元素加入方便你調(diào)整 CSS 的 class 名。postCSS
是一個(gè)JS插件轉(zhuǎn)換樣式表的工具其爵。這些插件能夠檢驗(yàn)?zāi)愕腃SS冒冬、支持變量和混合，轉(zhuǎn)化css3的新特性語法摩渺、行內(nèi)圖片等灵临。
查詢屬性兼容性的網(wǎng)站胡桨？
常用網(wǎng)站
