CSS Hack

184 月

CSS Hack

為了符合W3C的規範,我們會儘量避免使用hack,如果有瀏覽器無法統一的情況發生,要先試著找找是不是因為bug產生的原因,如果不是再來做hack。編寫樣式時應以Firefox為主要優先的瀏覽器,再對IE做hack,並選擇可以通過W3C驗證的hack,原本IE6用的_和IE7用的*都應該盡量不要使用了,而改以可以通過W3C驗證的為主。底下列出我們所使用的hack。

  • 所有IE (property\9;)、IE8(property\0;)
    範例:
    p { width: 100px\9; } (無法通過w3c驗證,盡量不要使用)
    p { width: 100px\0; } (無法通過w3c驗證,盡量不要使用)
     
  • IE6 (* html {})
    IE6使用的hack有_property、* html {},但是我們使用的hack是:* html {},因為_property不能通過W3C驗證,而* html {}可以。
    範例:
    * html p { width: 100px; }
    p { _width: 100px; } (無法通過w3c驗證,盡量不要使用)
     
  • IE7 (*:first-child+html {})
    IE7使用的hack有*property、*:first-child+html {},但是我們使用的hack是:*:first-child+html {},因為*property不能通過W3C驗證,而*:first-child+html {}可以。
    範例:
    *:first-child+html p { width: 100px; }
    p { *width: 100px; }(無法通過w3c驗證,盡量不要使用)
     
  • IE6 (!important)
    如果只是IE6和其他瀏覽器不同的話,可以用!important來做hack,這樣可以避免又寫了一堆css出來 (這是利用IE6在同一個樣式裡面,出現兩個以上相同的屬性時,只會認得最後一個的特性,並非IE6不認得!important)。
    範例:
    在這個範例裡面,寬100px是給IE6以外的瀏覽器看的,而寬120px則是給IE6看的。
    p {
        width: 100px !important;
        width: 120px;
    }
     
  • 除錯工具
    W3C css驗證的網址:http://jigsaw.w3.org/css-validator/

    Firefox有幾個附加元件可以加速我們除錯,或是審察我們的檔案有沒有符合W3C的規範。
    1. Firebug:可以觀察頁面元素的css、js等。
    2. HTML Validator:可以看結構是否正確,有沒有漏掉什麼必要屬性。
    3. Web Developer:安裝後會在Firefox出現一條tool bar,css、cookie、表單、圖片的功能都有,可以很快速的由這些元件檢查CSS、HTML是否符合W3C規範。操作方法:工具→驗證本機CSS、工具→驗證本機HTML。

參考資源:
Definitive Guide to Taming the IE6 Beast
centricle : css filters (css hacks)

 

 

Posted by admin  Posted on 18 4 月 
  • CSS, hack, IE, W3C
  • Post Comments 0