PIECE2巨群
網頁設計 ‧ 平面設計 ‧ 虛擬主機 ‧ 網路行銷
最新消息
資訊分享
關於我們 服務項目 客戶案例 製作流程 虛擬主機 聯絡我們
網頁設計跨瀏覽器的CSS Hacks應用技巧二

CSS Hack 主要分成兩種類型,分別描述如下:

1.樣式屬性的密技 ( Attribute Hacks )

2.選取器的密技 ( Selector Hacks )


樣式屬性的密技 ( Attribute Hacks )

顧名思義,這種類型的 Hacks 可以用在樣式屬性上,以下是相關 Hacks 語法的整理:


1)只有 IE6 才能解析的屬性,在屬性名稱之前加上一個底線 ( _ )

#style1 { _color: blue }


2)只有 IE6, IE7 才能解析的屬性,在屬性名稱前面加上星號 ( * ) 或井號 ( # )

#style1 { *color: blue; }

#style1 { #color: blue; }


3)只有 IE7, IE8, IE9 才能解析的屬性,在屬性名稱後面加上一個空白與一個註解 ( /**/ )

#style1 { color /**/: blue }


4)只有 IE6, IE7, IE8, IE9 才能解析的屬性,在屬性值最後加上一個 \9 字串

#style1 { color: blue\9; }


5)只有 IE8, IE9 才能解析的屬性,在屬性值最後加上一個 \0/ 字串

#style1 {color: blue\0/;}


有了這些特殊的 CSS Hacks,網頁設計師便可以利用這些特性來設計針對特定瀏覽器的 CSS 問題來解決不同版本之前的相容性問題。舉個例子來說,如果你想針對不同的 IE 版本給與不同的顏色顯示文字,你就可以將 CSS 寫成以下這樣:

.page {
  color: black;       /* 所有瀏覽器    */
  color /**/: green;  /* IE7, IE8, IE9 */
  *color: blue;       /* IE6, IE7      */
  _color: red;        /* IE6           */
 }


請注意:上述樣式的順序性非常重要,因為比較晚定義的樣式會取代較早定義的樣式,所以你必須把最多瀏覽器版本看的懂的樣式寫在比較上面,這樣才能達到 CSS Hack 的效果。

由於我們有 4 個不同的 color 屬性定義,不同瀏覽器版本套用這些屬性時就會有不同的結果出現:

所有非 IE 瀏覽器 (包括 IE10 瀏覽器)

會先套用正常的 color: black; 屬性,套用值為 black

剩下三行的定義非 IE 瀏覽器看不懂,所以會自動跳過

IE8 , IE9

會先套用正常的 color: black; 屬性,套用值為 black

第 2 行的 color /**/: green; 它也看的懂,所以套用值會變成 green

剩下兩行 IE8, IE9 都看不懂,所以會自動跳過

IE7

會先套用正常的 color: black; 屬性,套用值為 black

第 2 行的 color /**/: green; 它也看的懂,所以套用值會變成 green

第 3 行的 *color: blue; 它也看的懂,所以套用值會變成 blue

最後一行 IE7 看不懂,所以會自動跳過

IE6

會先套用正常的 color: black; 屬性,套用值為 black

第 2 行的 color /**/: green; 它看不懂,所以跳過

第 3 行的 *color: blue; 它也看的懂,所以套用值會變成 blue

第 4 行的 _color: blue; 它也看的懂,所以套用值會變成 red

就是這樣的一個計算邏輯,可以讓樣式表在不同 IE 版本之間進行差異化設計。當然,除了這個範例之外,你還能依據上述各種 CSS Attribute Hacks 的語法與支援的 IE 版本自行變化組合。


※ 注意事項 ※

在網路上你會找到許多 Attribute Hacks 的文章,不過在我逐一驗證下發現,大部分描述 IE8 Hacks 語法都是錯誤的,我所查過所有號稱支援 IE8 and below 的 Attribute Hacks 其實都能被 IE9 正確讀取,也代表著你沒辦法透過 Attribute Hacks 區分 IE8 與 IE9,如果你的目的是要能設計出 IE8 與 IE9 有不同樣式的話,那麼你必須使用接下來討論的 Selector Hacks 或是本文最後會提到的 IE 條件式註解!

 


轉貼來源: Will 保哥的技術交流中心

 

參考文獻:

1.陳良進 (2000), 台灣地區公民營風景遊樂區網站比較之研究, 高雄餐旅學報, 3(), 19-28.

2.張卿卿 (2004), 從性別差異與產品確定性高低來探討廣告框架效果, 管理評論, 23(1), 1-23.

3.Deaux, K.; Dane, F. C.; Wrightsman, L. S.(著)楊語芸(譯) (1997), 九O年代社會心理學(Social psychology in the 90s), 台北市: 五南圖書出版.

 
返回列表
上一頁 下一頁


相關文章

網頁設計跨瀏覽器的CSS Hacks應用技巧一
網頁設計內的原始碼上方的DOCTYPE宣告(網頁標準化宣告)
網頁設計採用UTF-8的編碼格式,要注意Meta標籤和title標籤的順序問題
迎接HTML5網頁設計來臨,10個好用的小工具介紹
為手機開發專用的網頁設計架構


最新文章

HVACKer:入侵隔離網絡的新型攻擊技術
還有什麼不會被入侵?路由器 LED 燈已成為攻擊入口
美 5 家獨角獸同天申請 IPO 掛牌,最狂的是一家估值 124 億美的數據分析新創!
【台灣「智慧產業」開始佈局】緯創集團領投跨國 AI 新創 iKala,下一步拓展東南亞市場
快可以用手機遠端遙控你的所有家電了



 
PIECE2巨群 版權所有 © 2008 總公司:06-2895301 台北:02-82529838 台中:04-25152530 高雄:07-7931226
驗證 CSS 驗證 W3C
專精項目:網頁設計   網站設計   平面設計   包裝設計   關鍵字行銷   關鍵字排名   網路行銷   網站代管   虛擬主機   ERP系統