[ CSS網頁裝潢學 ] 跨瀏覽器CSS Hack設定之一 / 最簡易的hack方式

[ css網頁裝潢學 ] 跨瀏覽器CSS Hack設定之一 / 最簡易的hack方式

Technorati 的標籤:,,


撰寫CSS的過程中,最痛苦的往往在於最後階段的瀏覽器測試,為了在各家不同瀏覽器都能維持一定水準相同的視覺效果,常讓網頁設計們傷透腦筋,今天就介紹我最常使用也是最簡易的hack方式,利用瀏覽器判讀符號不同的支援度,來達成簡單的CSS Hack!!

目前瀏覽器的市占率主要還是以IE為大宗,大約有逼近八成左右的使用者使用IE瀏覽器(#110301/更新關於瀏覽器市佔率的數據),不過IE6等較早期的瀏覽器對CSS判讀的支援度與其他瀏覽器差距比較大,所以目前主要還是以FF為第一階段的測試瀏覽器,等CSS全部撰寫完成後再針對IE等瀏覽器做CSS設定微調。

利用以下幾個符號做區隔:
\9:IE8以下的版本皆可判讀,FF則不行
>:IE7以下的版本可判讀
_ :IE6以下的版本可以判讀 
\9>_:FireFox三者皆忽略

建立一個div,針對他在不同瀏覽器中設定不一樣的背景圖片,CSS設定如下,

CSS以讀取的順序,後讀取的設定會覆蓋疊加上先前的設定,
故切記設定順序要如下列順序,先是FF → IE8 → IE7 → IE6

.css_hack {
    /* 透過符號設定各瀏覽器不同的背景圖 */
    background-image:url(img/bg_ff.gif); /* For FireFox & Mozilla & Other Broswer */
    background-image:url(img/bg_IE8.gif)\9; /* For IE8 */
    >background-image:url(img/bg_IE7.gif); /* For IE7 */
    _background-image:url(img/bg_IE6.gif); /* For IE6 */
}

在不同瀏覽器中開啟頁面,可以看到效果如下圖,會針對各瀏覽器有不同的背景圖,
這種hack方式在一個class中就可以簡單針對不同瀏覽器做出設定,簡單又快速,是我最常用的方式。

browser

#110301/補上瀏覽器今日市佔率數據
我是參考StatCounter Global Stats 這個網站的調查數據,今日的瀏覽器市佔率分布如下圖,可以看到Chrom出現後瓜分了一小部分的市場,目前IE市佔約莫接近五成,FF火狐三成,Chrom一成。
2011-03-01_144109

範例網頁 / cross_browser_hack.htm

btn_downloadcross_browser_hack.zip