IE 8 不再支援 CSS Expression

睡蓮 標籤
IE 8

　　上星期IE在官方blog中公佈了IE 8 版本在標準模式下，不再支援CSS Expression。從網頁標準的角度來看，這消息無疑令人振奮，至少看到了微軟兌現網頁標準的承諾，不斷在技術方面下功夫。

　　何謂CSS Expression？就是在CSS的屬性後面插入程式碼，支援自定義屬性，專用於IE瀏覽器。慣常的做法是遇到IE不支援CSS屬性的時候才會用到，通常針對IE 6 以下版本的居多。IE 7 對CSS支援情況相對於IE 6 來說已有少許改進，會用到CSS Expression的情況較IE 6 以下來得少。

　　舉個簡單例子，當要給寬度設定上或下限時，一般的屬性標準寫法是：max-width或 min-width，但這種屬性在IE 6以下版本無效，這時候便用CSS Expression方法來解決，算是CSS Hack的一種。

　　例如給<div id="example"></div>設定了100%寬度時，指定下限寬度為600px，按標準的寫法是：

#example{
          width:100%;
          min-width:600px;
          }

　　min-width在大部份支援網頁標準的瀏覽器下都有效，唯是IE 6以下版本無效，這時候便插入CSS Exprission如下：

#example{
          width:100%;
          min-width:600px;
          width:expression(this.Width < 600 ? "600px" : "100%" );
          }

　　但是插入CSS Expression換來的代價，就是不能通過W3C標準驗證。

　　解決的方法是使用IE 條件註解，將CSS Exprission從選擇器中抽離出來，在html檔裡的<head>與</head>之間插入如下代碼：

<!--[if lt IE 7]>
<style type="text/css">
/*<![CDATA[*/
#example{
              width:expression(this.Width < 600 ? "600px" : "100%" );
}
/*]]>*/
</style>
<![endif]-->

　　<!--[if lt IE 7]>意思是如果IE版本小於7 ，就使用裡面的代碼，否則就略過。這樣的用法保證CSS和HTML檔皆能通過W3C標準驗證。

　　另外，上文提及支援自定義屬性的CSS Expression，就如自定義id和class選擇符一樣，可以隨意給屬性這樣定義：waterlily:expression。

　　CSS Expression用法就是這麼有彈性，但終究不是網頁標準的用法。IE 8的決定，讓CSS與程式碼各歸其位，該用CSS的時候用CSS，該用程式碼時就回去用Javascript。