雖然如此,但是,很少有人知道,它到底是什么東西,使用CSS hack好不好,以及它是怎樣實(shí)現(xiàn)的?
下面,就談一下我對CSS hack的認(rèn)識。希望能幫助大家正確的認(rèn)識CSS hack。
介紹之前,請先記住一句話:你今天用CSS hack解決兼容性問題,明天瀏覽器就可能讓你那解決問題的CSS hack變成另一個(gè)兼容性問題。
CSS hack簡介
這,還要從W3C CSS2.1的標(biāo)準(zhǔn)說起。
W3C CSS2.1的標(biāo)準(zhǔn)的第四章,講了CSS的基本語法,數(shù)據(jù),以及值,還講到了如何去處理不合理的值及聲明等。可以參考我分享的另外兩個(gè)帖子:【分享】說說標(biāo)準(zhǔn) –CSS標(biāo)準(zhǔn)中的值,【分享】說說標(biāo)準(zhǔn)–我 的眼里只有你–CSS的錯(cuò)誤解析規(guī)則。
W3C CSS2.1 標(biāo)準(zhǔn)也規(guī)定了瀏覽器應(yīng)當(dāng)支持的特性屬性或值。
雖然如此,W3C也不可能強(qiáng)制瀏覽器廠商必須遵循標(biāo)準(zhǔn)。因此就出現(xiàn)了各大廠商對標(biāo)準(zhǔn)的實(shí)現(xiàn)不盡相同的現(xiàn)象。由于不同的瀏覽器,比如IE6、 IE7、 IE8、 Firefox等,對CSS解析的標(biāo)準(zhǔn)不同,因此對于相同的 CSS代碼,可能會生成不同的頁面效果,從而無法在所有瀏覽器中得到我們想要的效果。這時(shí),我們就需要針對不同的瀏覽器去寫不同的CSS代碼,讓它能夠在所有瀏覽器中獲得相同的效果。這個(gè)過程,就是CSS hack。也就是寫出只有個(gè)別瀏覽器或某些瀏覽器識別的CSS代碼。
CSS hack是因?yàn)楝F(xiàn)有瀏覽器對標(biāo)準(zhǔn)的解析不同,為了兼容各瀏覽器,所采用的一種補(bǔ)救方法。
CSS hack是一種類似作弊的手段,以欺騙瀏覽器的方式達(dá)到兼容的目的,是用瀏覽器的兼容性差異來解決瀏覽器的兼容性問題。
因此,在設(shè)計(jì)之初,寫CSS hack需要遵循以下三條原則:
⃟有效: 能夠通過 Web 標(biāo)準(zhǔn)的驗(yàn)證
⃟只針對太古老的/不再開發(fā)的/已被拋棄的瀏覽器, 而不是目前的主流瀏覽器
⃟代碼要丑陋。讓人記住這是一個(gè)不得已而為之的 Hack, 時(shí)刻記住要想辦法去掉它。
現(xiàn)在很多hacks已經(jīng)拋棄了最初的原則,而濫用hack會導(dǎo)致瀏覽器更新之后產(chǎn)生更多的兼容性問題。
因此,并不推薦使用CSS hack來解決兼容性問題。
CSS hack的實(shí)現(xiàn)方式
我總結(jié)了一下,實(shí)現(xiàn)CSS hack大概有以下幾種方式:
1. 利用瀏覽器對相同代碼的解析和支持的不同實(shí)現(xiàn)的hack
不同瀏覽器對相同的CSS代碼的支持情況可能不同。尤其是對錯(cuò)誤的寫法。
例如,
CSS code
#test{
_width:80px;
}
在IE7及以上版本的瀏覽器中會被當(dāng)作錯(cuò)誤特性而舍棄,但是在IE6中可以被正常的解析。這時(shí)候,可以把_width當(dāng)作hack,專門針對 IE6來設(shè)置元素的寬度。
2. 以Firefox或Webkit特有的擴(kuò)展樣式實(shí)現(xiàn)的hack
以-moz或-webkit開頭的擴(kuò)展樣式,是瀏覽器對CSS標(biāo)準(zhǔn)的擴(kuò)展。這些特性只在相應(yīng)的瀏覽器里才可以被正常的解析。 因此可以被當(dāng)作CSS hack來使用。
新聞熱點(diǎn)
疑難解答
圖片精選