什么是 CSS hack
- 由于不同廠商的瀏覽器巷波，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等私沮，或者是同一廠商的瀏覽器的不同版本蟆盐，如IE6和IE7法梯，對CSS的解析認識不完全一樣厦瓢，因此會導致生成的頁面效果不一樣揍障，得不到我們所需要的頁面效果脉课。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS救军，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果倘零，我們把這個針對不同的瀏覽器/不同版本寫相應的CSS code的過程唱遭，叫做CSS hack!
- 原理：
- 由于不同的瀏覽器對CSS的支持及解析結(jié)果不一樣，還由于CSS中的優(yōu)先級的關(guān)系呈驶。我們就可以根據(jù)這個來針對不同的瀏覽器來寫不同的CSS拷泽。
- 分類：
CSS Hack大致有3種表現(xiàn)形式，CSS類內(nèi)部Hack袖瞻、選擇器Hack以及HTML頭部引用(if IE)Hack司致。
屬性前綴法(即類內(nèi)部Hack)：例如 IE6能識別下劃線""和星號" * "，IE7能識別星號" * "聋迎，但不能識別下劃線""脂矫，IE6~IE10都認識"\9"，但firefox前述三個都不能認識霉晕。
如： .class { *color: blue; } /* ie6/7 */選擇器前綴法(即選擇器Hack)：例如 IE6能識別*html .class{}庭再，IE7能識別*+html .class{}或者*:first-child+html .class{}。
-
IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(注：IE10+已經(jīng)不再支持條件注釋)： 牺堰，針對IE6及以下版本： 佩微。這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效萌焰。
如：以下代碼只在IE下生效
瀏覽器兼容的思路
- 1.要不要做
- 從產(chǎn)品的角度：產(chǎn)品受眾哺眯、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先
- 從成本的角度：有無必要付出過高的成本
-
- 做到什么程度
- 讓哪些瀏覽器做到哪些效果
- 3.如何做
- 根據(jù)兼容需求選擇框架/庫（jQeury）
- 根據(jù)兼容需求選擇兼容工具扒俯，如：html5shiv奶卓、respond一疯、css reset、normalize夺姑、modernizr墩邀，等等（可自行搜索了解）
- css hack、條件注釋盏浙、使用js做一些瀏覽器檢測眉睹，等等
一些瀏覽器兼容的寫法
-
IE 6的CSS Hack：
.css-hack { background-color: red; /* 其他瀏覽器上顯示為紅色 */ _background-color: blue; /* 只有IE 6瀏覽器上顯示為藍色 */ } -
IE 7的CSS Hack：
.css-hack { color: red; /* 其他瀏覽器上顯示為紅色 */ +color: blue; /* 只有 IE 6、IE 7 瀏覽器上顯示為藍色 */ _color: red; /* 讓 IE 6 復原為之前設置的顏色 */ } -
IE 8的CSS Hack
有IE8支持嵌套如下@media類型查詢語句：@media \0screen废膘。 .css-hack { color: red; /* 其他瀏覽器顯示紅色 */ } @media \0screen { .css-hack { color: blue; } /* 只有IE 8顯示藍色 */ } -
HTML頭部引用hack
在小于IE9的版本下去調(diào)用html5shiv.js和respond.js他們的作用是使瀏覽器支持h5的新標簽和媒體功能竹海。 <!--[if lt IE 9]> <script src="js/html5shiv.min.js"></script> <script src="js/respond.min.js"></script> <![endif]--> -
選擇器hack
/* IE 6 */ * html .selector { 樣式代碼放這里} /* IE 7 */ *+html .selector { 樣式代碼放這里} -
JS Hack
/* 檢測瀏覽器是否為IE 8 */ (checkIE = document.createElement("b")).innerHTML = "<!--[if IE 8]><i></i><![endif]-->"; var isIE = checkIE.getElementsByTagName("i").length == 1;
一些工具/名詞的解釋
- 條件注釋：條件注釋是一種安全的區(qū)分IE瀏覽器版本的語法，且被認為是取代針對IE css hack的首選辦法丐黄。
- IE Hack：IE hack就是針對IE瀏覽器不同版本去寫不同的CSS代碼斋配，從而讓我們的頁面在IE瀏覽器上能正常顯示。
- js 能力檢測：指利用JS去檢測瀏覽器能否實現(xiàn)某些功能灌闺，目標是識別瀏覽器的能力而不是識別特定的瀏覽器艰争。只需根據(jù)瀏覽器支持的功能給出解決方案。
- html5shiv.js：一種使低版本IE瀏覽器能夠識別H5新標簽的解決方案桂对，只需引入一個js腳本即可生效甩卓。
- respond.js：一種使低版本IE瀏覽器能夠識別CSS3媒體查詢解決方案，只需引入一個js腳本即可生效蕉斜。
- css reset：css reset就是重置樣式猛频，因為早期的瀏覽器支持和理解的CSS規(guī)范不同，導致渲染頁面時效果不一致蛛勉，會出現(xiàn)很多兼容性問題鹿寻。為了解決這個問題出現(xiàn)了css reset。
- normalize.css：CSS Reset的泛濫使它逐漸淡出前端的視野诽凌，取而代之就是Normalize.css毡熏，Normalize.css是@necolas和@jon_neal 兩位大牛花了幾百個小時來研究不同瀏覽器的默認樣式的差異而得出的結(jié)晶侣诵，Normalize.css 只是一個很小的CSS文件痢法，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。
- Modernizr：Modernizr 是一套JavaScript 函式庫杜顺，用來偵測瀏覽器是否支持次世代的網(wǎng)站技術(shù)财搁，這些新的網(wǎng)站技術(shù)是來自仍在持續(xù)發(fā)展的HTML5 與 CSS3 規(guī)格。
- PostCSS: PostCSS 是一個使用 JS 插件來轉(zhuǎn)換 CSS 的工具躬络。這些插件可以支持使用變量尖奔，混入(mixin)，轉(zhuǎn)換未來的 CSS 語法，內(nèi)聯(lián)圖片等操作提茁。
- 查詢屬性兼容性：https://caniuse.com/#home
