CSS Hack

IE7推出了,所以我覺得有必要要把現有的CSS相關問題放在這裡。

昨天跟老弟聊到瀏覽器,忍不住就要好好的抱怨一下微軟。IE大概是我們兩個公認不可多得的爛軟體,之所以它的市佔率會這麼高,純粹就是因為它的強迫性;微軟一直以來就是利用人類的懶來造就今日的市佔率,在買電腦就內建Windows系統的情況之下,誰還會想要花時間去安裝別的系統?哼,要不是魔獸世界不能夠在Linux上面玩,我早就棄Windows到垃圾桶去了…

IE也是一個相當不求進步的瀏覽器,最讓人家詬病的就是,它根本不把網頁標準化當成一件重要的事,直到現在,還是選擇性的遵循自己腦子裡想的標準化,因此造就了網頁開發者的麻煩以及更多跨瀏覽器的問題。

我絕對不認為FireFox是完美的瀏覽器,但是它起碼不會像IE一樣,改得那麼被動,更不用驗證是否正版,隨便下載隨便安裝,壞了就輕輕鬆鬆移除重安裝即可。更鳥的是,改版後的IE居然還沒有溯及既往的能力,好像推出新版就可以當作自己過去拉的屎都不算數一樣,才會造就現在瀏覽器問題一大把的亂象,馬的IE你可不可以改進一下啊!

先講CSS Hack存在的理由,最主要的就是為了要解決各個瀏覽器(尤其是IE)對於標準化支援程度不同所產生的CSS問題,有時候必須要針對特定瀏覽器來撰寫適合的樣式表,這就是為什麼我們必須要深入研究CSS Hack的原因。

I. Conditional comments

這是一個非常實用的語法,可以幫助你根據不同的瀏覽器來選擇所需要的CSS,主要有兩種方法:Positive 與 Negative。Positive會將裡面的語法,顯示給「符合條件的瀏覽器」;Negative 則是會將裡面的語法,顯示給「不符合條件的瀏覽器」。

Positive: <!--[if condition]> HTML <![endif]-->
Negative: <!--[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->

condition的部份則可以使用下列的設定:

  1. IE**************任何版本的IE
  2. lt **************IE version 比version還要少的IE版本
  3. lte *************IE version 比version少或是相同的IE版本
  4. IE version ******只針對與指定version相同的IE版本
  5. gte IE version ***大於或是等於指定version的IE版本
  6. gt IE version ****大於指定version的IE版本

version就是IE的版本,通常為5、5.5、6 或是 7;至於HTML的部份當然就是放入你的HTML語法了。

在Negative的部份,如果你的condition是IE,那麼「<![IGNORE[--><![IGNORE[]]>」可以被取代為「-->」;還有,<![IGNORE[ ... ]]>這玩意ㄦ,在XML裡面是不被允許的語法,也就是說,在XHTML當中它是不合乎規範的語法,解決方式是把它分成兩個conditional comments ,就像這樣:<!--[if !condition]> XHTML <![endif]--> <!--[if !IE]>--> XHTML <!--<![endif]-->

參考範例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
  <head> 
  <title>Test</title> 
  <link href="all_browsers.css" mce_href="all_browsers.css" rel="stylesheet" type="text/css"> 
  <!--[if IE]> <link href="ie_only.css" mce_href="ie_only.css" rel="stylesheet" type="text/css"><![endif]--> 
  <!--[if lt IE 7]> <link href="ie_6_and_below.css" mce_href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]--> 
  <!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" mce_href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]--> 
  <!--[if !IE]>--> <link href="not_ie.css" mce_href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]--> 
  </head> 
<body> 
  <p>Test</p> 
</body> 
</html> 

II. in-CSS Hack

大部份IE在CSS的bug通常是關於選取器的部份,以下的部分條列出IE各個版本瀏覽器對於選取器的支援項目:

  • IE 6 and below
    * html {}
  • IE 7 and below
    *:first-child+html {} * html {}
  • IE 7 only
    *:first-child+html {}
  • IE 7 and modern browsers only
    html>body {}
  • Modern browsers only (not IE 7)
    html>/**/body {}
  • Recent Opera versions 9 and below
    html:first-child {}

III. Minimized attribute selectors

這個項目,在各大瀏覽器裡面可以說是沒有一個統一的準則,假設你有一個<input disabled>的標籤,那麼input[disabled="disabled"] {}就可以將所有<input disabled>的標籤給選出來,但是就像我講的,目前瀏覽器好像或多或少都有點差異在。以<input type=”hidden” disabled id=”attrhack”><p>Test</p>為例子,產生了下列的結果:

#attrhack[disabled=""]+p {}
Firefox 1.5 以及更早的版本,未來的版本也許也支援
Safari 2.0 以及更早的版本,未來的版本也許也支援
Konqueror 3.5 以及更早的版本,未來的版本也許也支援
#attrhack[disabled="true"]+p {}
Opera 9 以及更早的版本,未來的版本也許也支援

不過minimized attribute selectors只能在HTML當中運作,不適用在XHTML的檔案當中。

IV. !important

在CSS樣式檔中,遇到相同的屬性時,只要在新的屬性值中加入!important,即使優先權較低,有加入!important的屬性質仍會被優先使用。例如:color:red !important; 這時即使優先權較低,文字也會變成紅色。

但是IE6版本以下的瀏覽器,遇到!important的時候會產生無法辨識的錯誤,因此不會優先採用,故有的開發人員會使用這種方法讓IE6呈現屬於自己的樣式檔案,不過這個問題在IE7當中已經被修正了,以下是針對IE6的樣式表隱藏方式:

<style type="text/css"> 
p{ 
  background: green !important; /* 除了IE6以及更早版本外的IE瀏覽器,現行瀏覽器都會優先使用本項設定*/ 
  background: red; /* IE6以及更早版本外的IE瀏覽器因為忽略上面的!important設定,因此會用這個覆蓋先前的設定*/ 
} 
</style>

V. @import “non-ie.css” all;

這是另外一個我們常用的IE樣式隱藏方式,也是我之前所使用的方式。IE7以及更早的版本不支援@import裡面媒體選擇的語法,所以我們可以使用:@import “stylesheet.css” all; 來對IE隱藏樣式表,不過這項bug未來可能會被修正。

下面列出各個瀏覽器對於@import的支援

支援, 作用Applied By 不支援,作用
Not Applied By
當機 Hang , Crash
@import url(cooldog.css);
@import url("cooldog.css");
註: 有沒有 ” quoes作用的瀏覽器差不多,多了蘋果 Mac IE 4.01 , Mac IE 4.5 不作用。
  • all Mozilla 0.6 – 1.6
  • Win IE 5.0 – 6.x
  • Mac IE 4.0 – 5.x
  • Win Opera 3.5 – 7.x
  • Netscape 4.x
  • Win IE 3 -4
  • Mac IE 4.01
  • Mac IE 4.5
Win NS 4.0 – 4.04
This causes Netscape to hang. Browser must be closed
@import url(cooldog.css) all;
@import url(cooldog.css) screen;
  • all Mozilla 0.6 – 1.6
  • Mac IE 4.5 – 5.x
  • Win Opera 3.5 – 7.x
  • Win IE 4.0 – 6.x
  • Mac IE 4.0
  • All NS 4.x

VI. body[class|="page-body"]

CSS2.1關於連字號的使用定義並沒有很清楚,基本上,針對<body class=”page-body”>的標籤,使用body[class|="page-body"]選取器,在IE7以及其他現行瀏覽器上面都是可以被辨識的,除了Opera以外。雖然未來Opera有可能會修正自己的規則以符合其他的瀏覽器,但是起碼目前Opera 8以及9是存在著這樣的問題的。


p{ 
  background: red; /* 所有的瀏覽器都可以接受*/ 
}body[class|="page-body"] p{ 
  background: green; /* IE7以及其他的現行瀏覽器可接受,除了Opera以外 */ 
}
About these ads

9 thoughts on “CSS Hack

  1. 非常有用的資訊啊…
    正被IE7折磨中…
    以前寫一份css分別針對火狐和ie6.0,
    現在連ie7.0都要顧慮…
    真是要我命…

  2. 魔獸世界可以在Linux下玩喔.

    所以,請把 win 丟到垃圾桶去吧 XD.

    $os = ‘windows';
    str_replace(‘win’,$os)

  3. 想詢問一下您歐~

    我覺得您對網頁的概念相當了解,

    我想詢問專家您ㄉ意見

    您覺ㄉ目前網頁最容易發生的問題

    例如 版面 速度 等等

    而可以用CSS大力解決ㄉ

    而且是一般使用者最注重的會是哪些問題ㄋ

  4. TO SONIA:

    我不是專家喔~我只能提供一些我自己個人的想法給您而已…:D

    以台灣網頁來講,我認為最容易存在的問題就是版面內容不懂得取捨,造成大量的資料同時出現在網頁上,這歸咎於網站規劃時,不了解過多的資訊對使用者而言等於沒有資訊。

    過多的資料最直接所引發的問題就是網頁速度變慢,如果又加上Javascript的特效,可以說是慢上加慢。

    網頁標準化以及CSS固然能夠對網頁效能做一定程度的提升,但是他所能做的也就是降低不必要的Loading,卻不能減少大量資料的載入。

    CSS與標準化技術能夠對網頁SEO以及後續維護產生最顯著的加分與提升,如果配合樣板引擎將HTML與程式完全分離,後續的維護和改版可以說是易如反掌,程式碼精簡,當然就會順便提升一點效能,但是要做到好,第一次的撰寫時間會較長,因為標準化作業需要縝密的規劃與前置作業。

    另外一個台灣目前網頁很容易發生的問題就是特效用很多,IE上面看起來很美,卻完全沒有考慮到跨瀏覽器的問題,蔑視IE以外的網路用戶,是台灣普遍的心態;更糟糕的是,無論技術還是設計都遷就IE6這個不管是在CSS解讀或是各方面呈現都屬於不及格的瀏覽器,被IE綁著而無法使用對使用者和搜尋引擎而言更友善的設計,這是很多網站相當大的失敗。

    對一個使用者而言,他對一個網頁最注重的是什麼?很簡單,給他們要的東西,其他不要多給,更不要給一大堆然後造成網頁變慢。

    PChome的購物中心露天拍賣的新網站PayEasy、甚至Yahoo購物中心都有犯了類似的毛病,大公司或許能夠增加機器讓網頁不要太慢,但是依然沒有解決資訊過多令使用者茫然的缺點。

    適當的分類、簡單清楚的引導使用者的慾望及瀏覽方向、在對的地方需要的時候提供給使用者資訊,這樣才能夠讓使用者更樂於使用這個網站。

    不過我知道,這些網站老是放堆資料的原因是要賺廣告費~XD

    Anyway,網站經營者要注意的是,CSS和網頁標準化絕對不是網頁效能的萬靈丹,但是他是必然要走的趨勢,千萬不要等到HTML5都正式啟用,搜尋引擎規則大翻盤了以後才急著想要標準化,標準化工作需要時間,並不是隨便用DW拉表格就可以完成的,因為它牽涉到的不只是視覺而已,不能把它當成設計作業來看待喔~

    囉唆一堆,好像也沒有講得很詳細,不過這些問題應該都可以寫成研究報告了吧~短短幾行也只能膚淺的提到,不好意思咧~:P

  5. Pingback: 台灣人愛打拼

  6. Pingback: [網站] 好站連結 (七) Android, javascript, Css, PHP, Perl, FreeBSD, Linux | 小惡魔 - 電腦技術 - 生活日記 - 美食介紹 - AppleBOY

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s