小編給大家分享一下什么是CSS hack,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),托克遜企業(yè)網(wǎng)站建設(shè),托克遜品牌網(wǎng)站建設(shè),網(wǎng)站定制,托克遜網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,托克遜網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿,時(shí)刻以成就客戶成長(zhǎng)自我,堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
什么是CSS hack
CSS hack由于不同的瀏覽器,比如IE6,IE7,Firefox等,對(duì)CSS的解析認(rèn)識(shí)不一樣,因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣,得不到我們所需要的頁(yè)面效果。 這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫不同的CSS,讓它能夠同時(shí)兼容不同的瀏覽器,能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。
CSS hack分類
hack主要分為CSS選擇器hack、CSS屬性hack、IE條件注釋hack。
CSS選擇器hack:比如 IE6能識(shí)別*html .class{},IE7能識(shí)別*+html .class{}或者*:first-child+html .class{}等。
CSS屬性hack:比如 IE6能識(shí)別下劃線"_"和星號(hào)" * ",IE7能識(shí)別星號(hào)" * ",但不能識(shí)別下劃線"_",而firefox兩個(gè)都不能認(rèn)識(shí)等。
IE條件注釋hack:
針對(duì)所有IE:
針對(duì)IE6及以下版本:
這類Hack不僅對(duì)CSS生效,對(duì)寫在判斷語(yǔ)句里面的所有代碼都會(huì)生效。
書(shū)寫順序,一般是將識(shí)別能力強(qiáng)的瀏覽器的CSS寫在前面。
用法
比如要分辨IE6和firefox兩種瀏覽器,可以這樣寫:
div{ background:green; /* for firefox */ *background:red; /* for IE6 */ (both IE6 && IE7) }
可以看到在IE6中看到是紅色的,在firefox中看到是綠色的。
在firefox中,它是識(shí)別不了后面的那個(gè)帶星號(hào)的東西是什么的,于是將它過(guò)濾掉,解析得到的結(jié)果是:div{background:green},于是理所當(dāng)然這個(gè)div的背景是綠色的。
在IE6中,它兩個(gè)background都能識(shí)別出來(lái),它解析得到的結(jié)果是:div{background:green;background:red;},于是根據(jù)優(yōu)先級(jí)別,處在后面的red的優(yōu)先級(jí)高,于是當(dāng)然這個(gè)div的背景顏色就是紅色的了。
瀏覽器識(shí)別
Css Hack test
上面這段代碼大家可以直接copy出來(lái),保存成html在各瀏覽器試試。分析:
(1)background-color:blue; 各個(gè)瀏覽器都認(rèn)識(shí),這里給firefox用;
(2)background-color:red\9; \9所有的ie瀏覽器可識(shí)別;
(3)background-color:yellow\0; \0 是留給ie8的,但筆者測(cè)試,發(fā)現(xiàn)最新版opera也認(rèn)識(shí),汗。。。不過(guò)且慢,后面自有hack寫了給opera認(rèn)的,所以,\0我們就認(rèn)為是給ie8留的;
(4)+background-color:pink; + ie7定了;
(5)_background-color:orange; _專門留給神奇的ie6;
(6):root #test { background-color:purple\9; } :root是給ie9的,網(wǎng)上流傳了個(gè)版本是 :root #test { background-color:purple\0;},新版opera也認(rèn)識(shí),所以經(jīng)筆者反復(fù)驗(yàn)證最終ie9特有的為:root 選擇符 {屬性\9;}
(7)@media all and (min-width:0px){ #test {background-color:black\0;} } 這個(gè)是老是跟ie搶著認(rèn)\0的神奇的opera,必須加個(gè)\0,不然firefox,chrome,safari也都認(rèn)識(shí)。。。
(8)@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后這個(gè)是瀏覽器新貴chrome和safari的。
看完了這篇文章,相信你對(duì)“什么是CSS hack”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!