如何舊版IE也能擁有最新的CSS3酷炫效果!

評論
評論

微軟的 IE 瀏覽器雖然受到許多網頁開發者們的討厭,但畢竟身為目前市佔率最高的瀏覽器,開發者們也不能棄之不顧。然而,目前最流行的新一代網頁標準 CSS3 擁有了許多實用的好功能,目前在非 IE 的瀏覽器中大多也已經支援了,那該怎麼辦呢?

CSS3 到底有多好用

大多數的當代網頁設計,扣除掉透過 Flash 和 Sliverlight,大致上都是使用 HTML+CSS 的組合進行設計,而 HTML 的最新版本為 HTML5,而 CSS3 則是 CSS 的接替者。

那 CSS3 到底多了什麼功能呢?舉個最簡單的例子而言,在 Web 2.0 的時代,許多網站都很喜歡使用圓角的設計,不管是在頁面的按鈕、或是文字框等都會使用圓角讓畫面更好看。然而這個簡單的圓角效果製作起來卻是相當麻煩,透過傳統的 CSS2,我們只能透過自己先在 Photoshop 等繪圖軟體將圓角的圖案設計好、輸出成圖檔後,在以背景的方式整張貼到網頁上。

像是以下的圖案便是透過 CSS3 在最新版 Safari 瀏覽器中所呈現出來的,這中間完全沒有使用到任何一個圖檔!

這樣做的缺點自然是相當花費時間、且裁切出的圖檔也不能重複利用,更別提傳輸這些圖檔的額外網路頻寬了。同樣的道理也發生在畫面的陰影效果、漸層效果等,沒有 CSS3 我們只能透過一張張靜態的圖片去堆疊出我們想要的效果。

然而目前 CSS3 的支援狀況誠如序文所提到的,大多數的現代瀏覽器像是 Chrome/Safari/Firefox/Opear 等均已經支援了 CSS3 上述的大多屬性,而 IE9 也同樣的支援。然而大多數的使用者可能使用的是 IE6~8 的版本,那該怎麼辦呢?目前常見的作法便是擺著,就讓 IE6~8 的使用者們看不到圓角、陰影等效果,畢竟這些效果往往只是錦上添花,即便沒有這些特效網站也都能夠正常的瀏覽。

CSS3 PIE

CSS3 PIE 便是一個能夠解決上述問題的方便工具。透過 JavaScript 的模擬,CSS3 PIE 替 IE 實作了包含圓角、陰影、漸層和多重背景等 CSS3 所支援的內容,讓舊版的 IE 瀏覽器也能夠像其他新的瀏覽器一般直接的讀取 CSS3 的程式碼,就不需要另外花費而外的時間製作圖檔了。

而要如何使用 CSS3 PIE 呢?首先我們必須先從官方網站上面下載原始碼,下載後解壓縮會是兩個.htc 檔,其中一個是有壓縮過、一個則是沒有壓縮過的,除非是要研究裡面的程式碼細節,否則直接使用壓縮的版本即可。

接下來我們的 CSS 程式碼當中加入相關的 CSS 屬性,並且附上與這隻.htc 檔的連結:

div#header {     -webkit-border-radius: 8px 8px 0 0;     -moz-border-radius: 8px 8px 0 0;     border-radius: 8px 8px 0 0;     behavior: url(PIE.htc); }

前兩行-webkit 和-moz 開頭的分別是為了 WebKit 系列(Safari、Chomre)的瀏覽器和 Mozilla 系列(Firefox)瀏覽器所的 CSS3 規則,而第三條則是給 CSS3 PIE 所使用的。

透過這樣的指定與加入.htc 檔,IE 便可以自動的讀取這隻 JavaScript 並且顯示出正確的 CSS 3 效果囉!

結論

CSS3 的方便性讓許多開發者紛紛在新的網頁專案中進行嘗試,而透過 CSS3 Pie 更可以將 CSS 3 的支援加入 IE 瀏覽器中,讓 CSS 3 真正能夠靈活的使用在工作的專案上。

參考資源


精選熱門好工作

Full-stack (Frontend most) Senior Software Engineer

ShopBack 回饋網股份有限公司
臺北市.台灣

獎勵 NT$20,000

Backend 工程師

Omlet Arcade 美商歐姆雷特
臺北市.台灣

獎勵 NT$20,000

行銷企劃主管

安力國際開發股份有限公司
臺北市.台灣

獎勵 NT$20,000

評論