1.css hack
由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等粟关，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7环戈，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣院塞，得不到我們所需要的頁(yè)面效果遮晚。這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫(xiě)不同的CSS迫悠，讓它能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。
css hack的三種寫(xiě)法
- 屬性前綴法(即類(lèi)內(nèi)部Hack)：例如 IE6能識(shí)別下劃線和星號(hào)，IE7能識(shí)別星號(hào)艺玲，但不能識(shí)別下劃線，IE6~IE10都認(rèn)識(shí)"\9"饭聚，但firefox前述三個(gè)都不能認(rèn)識(shí)
.box{
color:red;
_color: red; /*ie6*/
*color:red; /*ie6,7*/
color:red\9; /*ie/edge 6-8*/
}
- 選擇器前綴法(即選擇器Hack)
- E條件注釋法(即HTML條件注釋Hack)：針對(duì)所有IE(注：IE10+已經(jīng)不再支持條件注釋)： ，針對(duì)IE6及以下版本：秒梳。這類(lèi)Hack不僅對(duì)CSS生效法绵，對(duì)寫(xiě)在判斷語(yǔ)句里面的所有代碼都會(huì)生效
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" >
<![endif]-->
2.瀏覽器的兼容思路
-
首先考慮這個(gè)問(wèn)題要不要處理
- 產(chǎn)品的角度酪碘。要考慮產(chǎn)品的受眾是哪些人和市場(chǎng)，這些受眾多使用的瀏覽器是哪種兴垦，比例如何徙赢，是效果優(yōu)先還是功能優(yōu)先探越。
- 成本的角度。要從成本的角度考慮是都必要做兼容钦幔。
-
其次考慮要做到什么程度的兼容
就是考慮讓那些瀏覽器做到支持哪些效果枕屉。
-
最后考慮該怎么去做
- 根據(jù)兼容需求選擇技術(shù)框架/庫(kù)（jquery等）
- 根據(jù)兼容需求選擇兼容工具(html5shiv.js鲤氢、respond.js、css reset卷玉、normalize.css哥倔、Modernizr)
- postCSS:目標(biāo)是通過(guò)自定義插件和工具這樣的生態(tài)系統(tǒng)來(lái)改造CSS揍庄。與Sass和Less這些預(yù)編譯器相同的原則，PostCSS把擴(kuò)展的語(yǔ)法和特性轉(zhuǎn)換成現(xiàn)代的瀏覽器友好的CSS
- 條件注釋蚂子、CSS Hack沃测、js 能力檢測(cè)做一些修補(bǔ)
3. 常見(jiàn)瀏覽器兼容寫(xiě)法
- 條件注釋
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" >
<![endif]-->
記住單詞名字就懂什么意思了
<!--[if lt IE 7]> lt：less than 小于
<!--[if gt IE 7]> gt：greater than 大于
<!--[if gte IE 7]> <!--[if lte IE 7]> e：equal 等于 就是大于等于 小于等于
- css前綴
.box{
color:red;
_color: red; /*ie6*/
*color:red; /*ie6,7*/
color:red\9; /*ie/edge 6-8*/
}
div{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */
}
- 選擇器前綴
@media screen and (-webkit-min-device-pixel-ratio:0){ /*為chrome單獨(dú)設(shè)置樣式的類(lèi)實(shí)現(xiàn)案例*/
.closeImg{
right:300px;height:100px;
width:200px;
background-color:Olive;
}
}
- Modernizr工具
<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é)合選擇器
<!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. 常見(jiàn)兼容相關(guān)術(shù)語(yǔ)名詞
- 條件注釋蒂破。條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語(yǔ)句。條件注釋可被用來(lái)向IE提供及隱藏代碼附迷。
- ie hack惧互。針對(duì)IE瀏覽器編寫(xiě)不同的CSS的讓IE能夠正常渲染的過(guò)程。
- js 能力檢測(cè)喊儡。能力檢測(cè)的目標(biāo)不是識(shí)別特定的瀏覽器，而是識(shí)別瀏覽器的能力稻据。采用這種方式不必顧及特定的瀏覽器如何如何，只要確定瀏覽器支持特定的能力捻悯，就可以給出解決方案匆赃。
- html5shiv.js今缚。 用于解決IE9以下版本瀏覽器對(duì)HTML5新增標(biāo)簽不識(shí)別，并導(dǎo)致CSS不起作用的問(wèn)題姓言。
- respond.js埠居。讓IE6-8支持CSS3 Media Query事期。
- css reset纸颜。 是將所有的瀏覽器的自帶樣式重置掉，這樣更易于保持各瀏覽器渲染的一致性胁孙。
- normalize.css唠倦。保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們涮较。為大部分HTML元素提供標(biāo)準(zhǔn)化樣式。修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性狂票。用一些小技巧優(yōu)化CSS可用性候齿。用注釋和詳細(xì)的文檔來(lái)來(lái)解釋代碼闺属。
- Modernizr。幫助探測(cè)瀏覽器是否支持某種新特性掂器，甚至可以加載額外的script腳本亚皂。使你可以方便地為各種情況編寫(xiě) JavaScript 和 CSS国瓮，無(wú)論瀏覽器是否支持這些特性灭必。這是處理漸進(jìn)增強(qiáng)的完美方案。Modernizr 會(huì)在頁(yè)面加載后立即檢測(cè)特性禁漓；然后創(chuàng)建一個(gè)包含檢測(cè)結(jié)果的 JavaScript 對(duì)象，同時(shí)在 html 元素加入方便你調(diào)整 CSS 的 class 名璃饱。
- postCSS与斤。它可以被理解為一個(gè)平臺(tái)荚恶，可以讓一些插件在上面跑撩穿，它提供了一個(gè)解析器谒撼，可以將CSS解析成抽象語(yǔ)法樹(shù)，通過(guò)PostCSS這個(gè)平臺(tái)廓潜，我們能夠開(kāi)發(fā)一些插件抵皱，來(lái)處理CSS辩蛋。熱門(mén)插件如autoprefixer，它可以幫我們處理兼容問(wèn)題悼院，只需正常寫(xiě)CSS伤为，autoprefixer可以幫我的自動(dòng)生成兼容性代碼.
5.查詢屬性兼容性的網(wǎng)站
caniuse網(wǎng)站 https://caniuse.com/
