HTML5 Polyfill

HTML5將一統網路世界的說法,倘若從WHATWG在2004年提出草案算起,至今居然已經八年了。

八年來,關於HTML5即將登基成為新一代網頁標準的雜音愈來愈小,制定於上個世紀的HTML 4.01和XHTML 1.0也普遍被認為早該退休讓位。

不過,即使微軟跟Adobe皆公開表態放棄,IE6跟Flash卻都還活著,而既有各家瀏覽器對HTML5的支援也依然參差不齊。

Web Developer跟Designer所面對的難處,從來沒有因為HTML5的出現而稍減,畢竟,網路瀏覽器不支援的話,再怎麼強大好用的網頁標準,都只是零。

網路大環境很差,可慶幸的是推廣網頁標準的有志之士始終不遺餘力。

就像過去用各種IE Hacks來對付IE那樣,網路上也從來不乏各種Polyfill來填充各家瀏覽器對HTML5的支援不足。

A polyfill or polyfiller is code designed to provide technology that is not native to a web browser.

Via Polyfill - Wikipedia, the free encyclopedia

然而,過去光是處理IE各個版本都已經夠傷神了,如今還要逐一填補各家瀏覽器對HTML5的支援不足,不是更麻煩費事嗎?

的確如此。

所以,就有善心人士結合Modernizr這個很方便用來探測瀏覽器對HTML5支援度的JavaScript函式庫,打包了一套名叫Webshims Lib的聰明好用Polyfill。

下載Webshims Lib,再將以下這段原始碼置入網頁裡即可。

<!-- dependencies: jQuery + Modernizr with yepnope -->
<script src="js/jquery-1.7.1.js"></script>
<script src="js/modernizr-yepnope-custom.js"></script>
<!-- reference the base script -->
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
//implement all unsupported features || call polyfill before DOM-Ready to implement everything as soon and as fast as possible $.webshims.polyfill();
//or load only specific features you need
//$.webshims.polyfill('forms json-storage'); $(function(){
//use all implemented API-features on DOM-ready });
</script>

Post a Comment

較新的 較舊