1.什么是 CSS hack盐杂?
因為不同瀏覽器或者不同版本的瀏覽器所支持的CSS是有區(qū)別的,我們利用CSS Hack來使我們的頁面更好的在瀏覽器上展示豪诲。
CSS Hack大致有3種表現(xiàn)形式霉囚,CSS屬性前綴法柄粹、選擇器前綴法以及IE條件注釋法(即HTML頭部引用if IE)Hack粥惧,實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現(xiàn)差異而引入的键畴。
1.屬性前綴法(即類內(nèi)部Hack):例如 IE6能識別下劃線_
和星號*
,IE7能識別星號*
突雪,但不能識別下劃線_
起惕,IE6~IE10都認識\9
,但firefox前述三個都不能認識咏删。
2.選擇器前綴法(即選擇器Hack)
3.IE條件注釋法(即HTML條件注釋Hack):針對所有IE(注:IE10+已經(jīng)不再支持條件注釋):惹想,針對IE6及以下版本:``。這類Hack不僅對CSS生效督函,對寫在判斷語句里面的所有代碼都會生效嘀粱。
2.談一談瀏覽器兼容的思路
- 首先,要確定是否需要做瀏覽器兼容辰狡。
產(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 能力檢測做一些修補
3.列舉5種以上瀏覽器兼容的寫法
1.屬性前綴法
.box{ color: red; _color: blue; /* ie6 */ *color: pink; /* ie6 ie7*/ color: yellow\9; /*ie/edge 6-8 */ }
2.條件注釋法(ie10以上不再支持條件注釋)
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->`
3.清除浮動
.clearfix:after{ content: ''; display: block; clear: both; } .clearfix{ *zoom: 1; /* 僅對ie67有效 */ }
4.設(shè)置元素寬高
.target{ display: inline-block; *display: inline; *zoom: 1; }
5.利用html5shiv、respond
6.利用Modernizr
<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">
4.以下工具/名詞是做什么的
- 條件注釋
條件注釋是于HTML源碼中被IE有條件解釋的語句赛糟。條件注釋可被用來向IE提供及隱藏代碼派任。 - IE Hack
針對IE瀏覽器編寫不同的CSS讓IE能夠正常渲染。 - js 能力檢測
瀏覽器的能力檢測目標不是檢測特定的瀏覽器璧南,而是檢測瀏覽器的能力掌逛。這樣,只需要檢測瀏覽器是否支持特定的能力司倚,就可以給出特定的解決方案。這一部分檢測是解決瀏覽器兼容問題的主要檢測动知。 - html5shiv.js
解決ie9以下版本的瀏覽器對html5標簽無法識別的問題皿伺。 - respond.js
提供一個小腳本盒粮,以便在不支持CSS3媒體查詢的瀏覽器中啟用響應(yīng)式網(wǎng)頁設(shè)計,特別是ie8及更低版本丹皱。 - css reset
重置瀏覽器默認樣式。 - normalize.css
Normalize.css 是一個可以定制的CSS文件种呐,它讓不同的瀏覽器在渲染網(wǎng)頁元素的時候形式更統(tǒng)一。 - Modernizr
Modernizr是一套JavaScript 庫爽室,用來偵測瀏覽器是否支持HTML5與CSS3等規(guī)格汁讼。如果瀏覽器不支持阔墩,Modernizr會使用其他的解決方法來進行模擬。 - postCSS
PostCSS是一個JS插件轉(zhuǎn)換樣式表的工具啸箫。這些插件能夠檢驗?zāi)愕腃SS、支持變量和混合忘苛,轉(zhuǎn)化css3的新特性語法蝉娜、行內(nèi)圖片等唱较。
5.一般在哪個網(wǎng)站查詢屬性兼容性?
- 查CSS屬性兼容http://caniuse.com/
- 查 Hack 的寫法http://browserhacks.com/