什么是 CSS hack
CSS hack就是使你的CSS代碼兼容不同的瀏覽器。
CSS hack大致有3種表現(xiàn)形式，CSS類內(nèi)部Hack、選擇器Hack以及HTML頭部引用(if IE)Hack。
CSS hack主要針對類內(nèi)部Hack
談一談瀏覽器兼容的思路
- 針對目標(biāo)客戶群體考慮，要不要實現(xiàn)瀏覽器兼容。比如是面向年輕群體，還是面向政府或單位部門。
- 實現(xiàn)難度和成本考慮，比較一下投入產(chǎn)出比。
- 綜合考量需要做到什么瀏覽器什么版本的兼容，比如兼容到IE7 還是IE6
- 根據(jù)兼容需求選用框架
例如
Bootstrap (>=ie8)
jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
Vue (>= ie9) - 根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
postCSS。 - 利用條件注釋、CSS Hack、js 能力檢測做一些修補(bǔ)。
列舉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">
<![endif]-->
屬性前綴法
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
條件注釋結(jié)合html5shiv.js和respond.js工具
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
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">
瀏覽器兼容寫法
transition: transform 1s;
-moz-transition: transform 1s; /* Firefox 4 */
-webkit-transition: transform 1s; /* Safari 和 Chrome */
-o-transition: transform 1s; /* Opera */
以下工具/名詞是做什么的
條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。
IE Hack
為了兼容IE系列瀏覽器的CSS hack。
js 能力檢測
使用JS檢測瀏覽器是否支持特定的功能來確定解決方案
html5shiv.js
使用html5的時候，有些瀏覽器不支持h5的一些新特性和標(biāo)簽，需要用這個html5shiv.js來模擬這些標(biāo)簽
respond.js
Respond.js 是一個小腳本，用于為 IE6-8 以及其它不支持 CSS3 媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性，實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計。
css reset
將瀏覽器的默認(rèn)樣式全部去掉，更準(zhǔn)確說就是通過重新定義標(biāo)簽樣式?！案采w”瀏覽器的CSS默認(rèn)屬性。
normalize.css
Normalize.css 是一個可以定制的CSS文件，它讓不同的瀏覽器在渲染網(wǎng)頁元素的時候形式更統(tǒng)一。是溫柔版的css reset。它的特性：
- 保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們
- 一般化的樣式：為大部分HTML元素提供
- 修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
- 優(yōu)化CSS可用性：用一些小技巧
- 解釋代碼：用注釋和詳細(xì)的文檔來
Modernizr
Modernizr是一個JavaScript庫，用來檢測瀏覽器是否支持HTML5和CSS3特性，在根元素添加相應(yīng)類名來實現(xiàn)瀏覽器兼容。
postCSS
是一個使用 JS 插件來轉(zhuǎn)換 CSS 的工具。這些插件可以支持使用變量，混入(mixin)，轉(zhuǎn)換未來的 CSS 語法，內(nèi)聯(lián)圖片等操作。ostCSS 的插件可以實現(xiàn)預(yù)處理器的功能；它們還可以優(yōu)化并且自動給代碼添加各種前綴；它們可以添加未來語法的支持，還可以提示代碼檢查的功能，它們可以處理變量和代碼邏輯，可以提供完整的網(wǎng)格系統(tǒng)；還可以提供代碼縮寫... ... 等各種各樣的操作。
