雖然還不足以全面性取代其它先進的瀏覽器,但 IE9 已經讓大多數的網頁前端工程師(以下簡稱 F2E)減輕不少負擔。
今年的 9 月 15 日,Internet Explorer 這套瀏覽器發佈了第一個 Beta 版,網路上已經有許多關於 IE9 的評價及討論,但我這篇文章想要快速地來看一下,當一個 F2E 面對 IE9 時,他可以拋開多少 IE hacks(當然,不可能是 100%),以下我就針對幾項比較常被提及的 IE hacks 來作討論(如果您有更多的看法,歡迎留言指教)。
HTML5 的新標籤 (IE8+)
其實從 IE8 開始便支援了像是
、
、
等等在 HTML5 規格書(草案)裡定義的新標籤,如果你想讓你的網頁在 HTML 標籤上就具有良好的語意(搜尋引擎最佳化也會建議您這麼做),那麼現在就可以直接使用這樣的標籤來製作網頁。
標籤
以往想要在網頁上產生一個 2D(或 3D)的圖案,除非是利用 server 產生圖片,不然就是得藉由其它 plugins 來解決(主流就是 Flash)。舉例來說,若是要在頁面上根據一些數據畫出圖表(chart),在目前多數的網頁上都是利用這兩個方式來完成(即便你使用了 Google Chart Tools 也一樣透過這兩種方式產生)。而在 IE9 之後,IE 也有了 標籤,這便提供了 F2E 利用 JavaScript 在
標籤上繪製 2D/3D 的圖形,不必假借其它的 plugins。
向量圖形(SVG)支援
SVG 是一種用 XML 來描述圖形的語言,這種圖形的好處是可以任意地縮放,甚至還可以內嵌 JavaScript 來作到動態的效果。或是用來作為 CSS 的背景圖等等。舉例來說,CSS3 雖然有一個關於漸層色彩(gradients)的模組,但是目前只有 WebKit/Gecko 核心的瀏覽器有支援(語法還不太一樣),而在支援 SVG 的瀏覽器上,便可以利用 SVG 來產生漸層。所以說 SVG 的應用層面是相當廣泛的。
及
標籤
試想,若是要在網頁上嵌入一張圖片(gif, jpg 或 png),只需要利用
這個標籤就可以完成,那是因為瀏覽器內建了這些影像檔案的解碼器,所以不必靠其它的 plugins 就能完成內嵌的工作。
而影音的部份就沒有那麼快樂了,一直以來要在網頁上呈現影片或聲音,都得仰賴著 Flash Player 或 Windows Media Player 的 plugins 來嵌入影音(其中又以 Flash 最為流行,因為幾乎大部份的電腦系統都會安裝)。這樣一來,如果 F2E 想在頁面上對某個內嵌的影音做處理,那還得另外去修改(甚至要先學習)plugin 的內容,這樣的負擔及開發成本實在是不輕。
在 IE9 導入 及
標籤之後,總算是趕上一些先進瀏覽器,也使得 F2E 幾乎也能像內嵌圖片一樣,只需要用一個標籤就能嵌入影片,甚至還能利用 CSS/JavaScript 來改變、控制它呈現的方式。
比較麻煩的就是目前各家瀏覽器所內建的影音解碼器不盡相同(因為專利的問題),以影片來說大致上可以歸納成兩種檔案、壓縮格式:
-
mp4
檔案;h.264
壓縮格式Safari(及其家族:iPhone/iPad 上的 Mobile Safari)、Chrome 及 IE9 支援
-
webm
檔案;vp8
壓縮格式Chrome、Firefox 4、Opera 10.6 支援(IE9 宣稱若使用者電腦有安裝 codec 即支援)
不過還好 標籤提供了讓瀏覽器選擇支援的檔案來播放的語法,像是這樣:
...
完整的 CSS3 選擇器(Selector)及 document.querySelector
使用過 jQuery 這個 JavaScript library 作開發的 F2E 一定都體會過 CSS3 的選擇器有多好用,現在在 IE9 的對於 CSS 的支援也逐漸往 CSS3 的各模組來挺進。除了可以在 CSS 檔案中撰寫 CSS3 選擇器的語法,像是:
#item > item:first-child { .... }
:tree-node:nth-child(2) { .... }
input[type=check]:checked { .... }
之外,從 IE8 之後也可以在寫 JavaScript 而想要取得 DOM 物件時,利用 document.querySelector
/ document.querySelectorAll
來像 jQuery 一樣利用 CSS3 選擇器來取得 DOM 物件。
CSS 的 display: inline-block
(IE8+)
一個 HTML 網頁上的元素,除了表格及少部份特殊的標籤之外,大多數的標籤在畫面呈現上主要分為 inline
及 block
。但是 inline 的元素無法設定 width/height,而 block 元素又一定會換行,而 inline-block 正好是一個不用換行,但又可以設定 width/height 的元素,大量減少使用 float
的機會。
CSS: 新的色彩模組
除了可以用 color name 或是 #AAAAAA 方式來表示色彩之外,IE9 也開始支援使用 rgba/hsla 等函數來描述色彩,同時也正式加入 opacity
屬性的支援。
CSS: 新的背景及框線模組
IE9 開始支援多重背景圖的功能,也就是能在 background-image
中填入多個圖片的值,同時也支援了像是 background-clip
的屬性。
而另一個等待很久的就是圓角矩形的支援,從 IE9 之後,可以直接使用 border-radius
屬性(前面不用加上前置詞)來做出圓角矩形的效果。
CSS Web Font 模組
其實 IE 從很早以前就開始支援這樣的語法,讓 designer 可以利用 CSS 指定特定的字型來顯示文字,若瀏覽者的電腦上未安裝該字型,也可以根據語法中的位置來下載字型檔,這樣就不必特別把文字做成圖片,而造成許多不便(改變大小要重新換圖等等)。
原生的 XMLHttpRequest
(IE7+)
很多人剛開始接觸 AJAX 這個技術時,一定都會看過不少為了 IE(6) 沒有原生的 XMLHttpRequest
物件,而必須透過 ActiveXObject
來產生的程式碼,其實早在 IE7 時,就已經提供了原生的 XMLHttpRequest
供 JavaScript 程式碼使用,當然,在 IE9 仍然是直接拿來用。
標準的 DOM Level 2 / Level 3
IE9 之後大幅支援了 DOM Level 2 及 Level 3 的標準,除了加入許多 DOM 操作的函式(像是 getElementsByClassName
等)、屬性()之外,在事件處理方面,過去總是得為了 IE 而寫出這樣的程式碼:
var dom = document.getElementById('foo');
if (foo.addEventListener) {
foo.addEventListener('click', onClick, false);
} else {
foo.attachEvent('onclick', onClick);
}
在 IE9 之後,event binding (unbinding) 就可以統一寫成 addEventListener
/ removeEventListener
的標準。
(暫)結論
由於 IE9 目前只推出了 Beta 版本,最終正式版還會加上多少的支援還不確定,不過從目前 Beta 版所提供的 features 來看,未來 F2E 要針對 IE 作的 hacks 可望大幅減少,怎麼說都是一個好消息,希望 IE9 繼續加油!
IE8有很多CSS與Firefox不一樣,做網頁時比較苦惱.