2009-03-06 09:47 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的部份則可以使用下列的設定：
- IE**************任何版本的IE
- lt **************IE version 比version還要少的IE版本
- lte *************IE version 比version少或是相同的IE版本
- IE version ******只針對與指定version相同的IE版本
- gte IE version ***大於或是等於指定version的IE版本
- 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 不作用。 |
|
|
Win NS 4.0 - 4.04 This causes Netscape to hang. Browser must be closed |
@import url(cooldog.css) all; |
|
|
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以外 */
}回應
