您好,登錄后才能下訂單哦!
這篇文章主要介紹“CSS hack使用方式有哪些”,在日常操作中,相信很多人在CSS hack使用方式有哪些問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”CSS hack使用方式有哪些”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
由于不同廠商的流覽器或某瀏覽器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),對(duì)CSS的支持、解析不一樣,導(dǎo)致在不同瀏覽器的環(huán)境中呈現(xiàn)出不一致的頁(yè)面展現(xiàn)效果。這時(shí),我們?yōu)榱双@得統(tǒng)一的頁(yè)面效果,就需要針對(duì)不同的瀏覽器或不同版本寫(xiě)特定的CSS樣式,我們把這個(gè)針對(duì)不同的瀏覽器/不同版本寫(xiě)相應(yīng)的CSS code的過(guò)程,叫做CSS hack!
由于不同的瀏覽器和瀏覽器各版本對(duì)CSS的支持及解析結(jié)果不一樣,以及CSS優(yōu)先級(jí)對(duì)瀏覽器展現(xiàn)效果的影響,我們可以據(jù)此針對(duì)不同的瀏覽器情景來(lái)應(yīng)用不同的CSS。
CSS Hack大致有3種表現(xiàn)形式,CSS屬性前綴法、選擇器前綴法以及IE條件注釋法(即HTML頭部引用if IE)Hack,實(shí)際項(xiàng)目中CSS Hack大部分是針對(duì)IE瀏覽器不同版本之間的表現(xiàn)差異而引入的。
屬性前綴法(即類(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í)。
選擇器前綴法(即選擇器Hack):例如 IE6能識(shí)別html .class{},IE7能識(shí)別+html .class{}或者*:first-child+html .class{}。
IE條件注釋法(即HTML條件注釋Hack):針對(duì)所有IE(注:IE10+已經(jīng)不再支持條件注釋): ,針對(duì)IE6及以下版本: 。這類(lèi)Hack不僅對(duì)CSS生效,對(duì)寫(xiě)在判斷語(yǔ)句里面的所有代碼都會(huì)生效。
CSS hack書(shū)寫(xiě)順序,一般是將適用范圍廣、被識(shí)別能力強(qiáng)的CSS定義在前面。
CSS hack方式一:條件注釋法
這種方式是IE瀏覽器專(zhuān)有的Hack方式,微軟官方推薦使用的hack方式。舉例如下
只在IE下生效 <!--[if IE]> 這段文字只在IE瀏覽器顯示 <![endif]--> 只在IE6下生效 <!--[if IE 6]> 這段文字只在IE6瀏覽器顯示 <![endif]--> 只在IE6以上版本生效 <!--[if gte IE 6]> 這段文字只在IE6以上(包括)版本IE瀏覽器顯示 <![endif]--> 只在IE8上不生效 <!--[if ! IE 8]> 這段文字在非IE8瀏覽器顯示 <![endif]--> 非IE瀏覽器生效 <!--[if !IE]> 這段文字只在非IE瀏覽器顯示 <![endif]-->
CSS hack方式二:類(lèi)內(nèi)屬性前綴法
屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識(shí)別的hack前綴,以達(dá)到預(yù)期的頁(yè)面展現(xiàn)效果。
IE瀏覽器各版本 CSS hack 對(duì)照表
<script type="text/javascript"> //alert(document.compatMode); </script> <style type="text/css"> body:nth-of-type(1) .iehack{ color: #F00;/* 對(duì)Windows IE9/Firefox 7+/Opera 10+/所有Chrome/Safari的CSS hack ,選擇器也適用幾乎全部Mobile/Linux/Mac browser*/ } .demo1,.demo2,.demo3,.demo4{ width:100px; height:100px; } .hack{ /*demo1 */ /*demo1 注意順序,否則IE6/7下可能無(wú)法正確顯示,導(dǎo)致結(jié)果顯示為白色背景*/ background-color:red; /* All browsers */ background-color:blue !important;/* All browsers but IE6 */ *background-color:black; /* IE6, IE7 */ +background-color:yellow;/* IE6, IE7*/ background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */ background-color:purple\0; /* IE8, IE9, IE10 */ background-color:orange\9\0;/*IE9, IE10*/ _background-color:green; /* Only works in IE6 */ *+background-color:pink; /* WARNING: Only works in IE7 ? Is it right? */ } /*可以通過(guò)javascript檢測(cè)IE10,然后給IE10的<html>標(biāo)簽加上class=”ie10″ 這個(gè)類(lèi) */ .ie10 #hack{ color:red; /* Only works in IE10 */ } /*demo2*/ .iehack{ /*該demo實(shí)例是用于區(qū)分標(biāo)準(zhǔn)模式下ie6~ie9和Firefox/Chrome的hack,注意順序 IE6顯示為:綠色, IE7顯示為:黑色, IE8顯示為:紅色, IE9顯示為:藍(lán)色, Firefox/Chrome顯示為:橘色, (本例IE10效果同IE9,Opera最新版效果同IE8) */ background-color:orange; /* all - for Firefox/Chrome */ background-color:red\0; /* ie 8/9/10/Opera - for ie8/ie10/Opera */ background-color:blue\9\0; /* ie 9/10 - for ie9/10 */ *background-color:black; /* ie 6/7 - for ie7 */ _background-color:green; /* ie 6 - for ie6 */ } /*demo3 實(shí)例是用于區(qū)分標(biāo)準(zhǔn)模式下ie6~ie9和Firefox/Chrome的hack,注意順序 IE6顯示為:紅色, IE7顯示為:藍(lán)色, IE8顯示為:綠色, IE9顯示為:粉色, Firefox/Chrome顯示為:橘色, (本例IE10效果同IE9,Opera最新版效果也同IE9為粉色) */ .element { background-color:orange; /* all IE/FF/CH/OP*/ } .element { *background-color: blue; /* IE6+7, doesn't work in IE8/9 as IE7 */ } .element { _background-color: red; /* IE6 */ } .element { background-color: green\0; /* IE8+9+10 */ } :root .element { background-color:pink\0; } /* IE9+10 */ /*demo4*/ /* 該實(shí)例是用于區(qū)分標(biāo)準(zhǔn)模式下ie6~ie10和Opera/Firefox/Chrome的hack,本例特別要注意順序 IE6顯示為:橘色, IE7顯示為:粉色, IE8顯示為:黃色, IE9顯示為:紫色, IE10顯示為:綠色, Firefox顯示為:藍(lán)色, Opera顯示為:黑色, Safari/Chrome顯示為:灰色, */ .hacktest{ background-color:blue; /* 都識(shí)別,此處針對(duì)firefox */ background-color:red\9; /*all ie*/ background-color:yellow\0; /*for IE8/IE9/10 最新版opera也認(rèn)識(shí)*/ +background-color:pink; /*for ie6/7*/ _background-color:orange; /*for ie6*/ } @media screen and (min-width:0){ .hacktest {background-color:black\0;} /*opera*/ } @media screen and (min-width:0) { .hacktest { background-color:purple\9; }/* for IE9/IE10 PS:國(guó)外有些習(xí)慣常寫(xiě)作\0,根本沒(méi)考慮Opera也認(rèn)識(shí)\0的實(shí)際 */ } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .hacktest { background-color:green; } /* for IE10+ 此寫(xiě)法可以適配到高對(duì)比度和默認(rèn)模式,故可覆蓋所有ie10的模式 */ } @media screen and (-webkit-min-device-pixel-ratio:0){ .hacktest {background-color:gray;} } /*for Chrome/Safari*/ /* #963棕色 :root is for IE9/IE10, 優(yōu)先級(jí)高于@media, 慎用!如果二者合用,必要時(shí)在@media樣式加入 !important 才能區(qū)分IE9和IE10 */ /* :root .hacktest { background-color:#963\9; } */ </style>
demo1是測(cè)試不同IE瀏覽器下hack 的顯示效果
IE6顯示為:粉色,
IE7顯示為:粉色,
IE8顯示為:藍(lán)色,
IE9顯示為:藍(lán)色,
Firefox/Chrome/Opera顯示為:藍(lán)色,
若去掉其中的!important屬性定義,則IE6/7仍然是粉色,IE8是紫色,IE9/10為橙色,F(xiàn)irefox/Chrome變?yōu)榧t色,Opera是紫色。是不是有些奇怪:除了IE6以外,其他所有的表現(xiàn)都符合我們的期待。那為何IE6表現(xiàn)的顏色不是_的綠色而是+ margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: border-box;">+html #ie7test { /* IE7 only*/ color:green; }
經(jīng)過(guò)測(cè)試,我發(fā)現(xiàn)屬性前綴+只有IE6和IE7認(rèn)識(shí)。而+html selector只有IE7認(rèn)識(shí)。所以我們?cè)谑褂脮r(shí)候一定要特別注意。
demo2實(shí)例是用于區(qū)分標(biāo)準(zhǔn)模式下ie6~ie9和Firefox/Chrome的hack,注意順序
IE6顯示為:綠色,
IE7顯示為:黑色,
IE8顯示為:紅色,
IE9顯示為:藍(lán)色,
Firefox/Chrome顯示為:橘色,
(本例IE10效果同IE9,Opera最新版效果同IE8)
demo3實(shí)例也是用于區(qū)分標(biāo)準(zhǔn)模式下ie6~ie9和Firefox/Chrome的hack,注意順序
IE6顯示為:紅色,
IE7顯示為:藍(lán)色,
IE8顯示為:綠色,
IE9顯示為:粉色,
Firefox/Chrome顯示為:橘色,
(本例IE10效果同IE9,Opera最新版效果也同IE9為粉色)
demo4實(shí)例是用于區(qū)分標(biāo)準(zhǔn)模式下ie6~ie10和Opera/Firefox/Chrome的hack,本例特別要注意順序
IE6顯示為:橘色,
IE7顯示為:粉色,
IE8顯示為:黃色,
IE9顯示為:紫色,
IE10顯示為:綠色,
Firefox顯示為:藍(lán)色,
Opera顯示為:黑色,
Safari/Chrome顯示為:灰色,
CSS hack方式三:選擇器前綴法
選擇器前綴法是針對(duì)一些頁(yè)面表現(xiàn)不一致或者需要特殊對(duì)待的瀏覽器,在CSS選擇器前加上一些只有某些特定瀏覽器才能識(shí)別的前綴進(jìn)行hack。
目前最常見(jiàn)的是
*html *前綴只對(duì)IE6生效 *+html *+前綴只對(duì)IE7生效 @media screen\9{...}只對(duì)IE6/7生效 @media \0screen {body { background: red; }}只對(duì)IE8有效 @media \0screen\,screen\9{body { background: blue; }}只對(duì)IE6/7/8有效 @media screen\0 {body { background: green; }} 只對(duì)IE8/9/10有效 @media screen and (min-width:0\0) {body { background: gray; }} 只對(duì)IE9/10有效 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對(duì)IE10有效
結(jié)合CSS3的一些選擇器,如html:first-child,body:nth-of-type(1),衍生出更多的hack方式
CSS3選擇器結(jié)合JavaScript的Hack
我們用IE10進(jìn)行舉例:
由于IE10用戶代理字符串(UserAgent)為:Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0),所以我們可以使用javascript將此屬性添加到文檔標(biāo)簽中,再運(yùn)用CSS3基本選擇器匹配。
JavaScript代碼:
var htmlObj = document.documentElement; htmlObj.setAttribute(‘data-useragent‘,navigator.userAgent); htmlObj.setAttribute(‘data-platform‘, navigator.platform );
CSS3匹配代碼:
html[data-useragent*=‘MSIE 10.0‘] #id { color: #F00; }
CSS hack利弊
一般情況下,我們盡量避免使用CSS hack,但是有些情況為了顧及用戶體驗(yàn)實(shí)現(xiàn)向下兼容,不得已才使用hack。比如由于IE8及以下版本不支持CSS3,而我們的項(xiàng)目頁(yè)面使用了大量CSS3新屬性在IE9/Firefox/Chrome下正常渲染,這種情況下如果不使用css3pie或htc或條件注釋等方法時(shí),可能就得讓IE8-的專(zhuān)屬hack出馬了。使用hack雖然對(duì)頁(yè)面表現(xiàn)的一致性有好處,但過(guò)多的濫用會(huì)造成html文檔混亂不堪,增加管理和維護(hù)的負(fù)擔(dān)。相信只要大家一起努力,少用、慎用hack,未來(lái)一定會(huì)促使瀏覽器廠商的標(biāo)準(zhǔn)越來(lái)越趨于統(tǒng)一,順利過(guò)渡到標(biāo)準(zhǔn)瀏覽器的主流時(shí)代。拋棄那些陳舊的IE hack,必將減輕我們編碼的復(fù)雜度,少做無(wú)用功。
說(shuō)明:本文測(cè)試環(huán)境為IE6~IE10,Chrome 29.0.1547.66 m,F(xiàn)irefox 20.0.1 ,Opera 12.02等
到此,關(guān)于“CSS hack使用方式有哪些”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。