讓舊版瀏覽器支援 HTML5 語意(SEMANTICS)標籤

HTML5 內建了特定的語意標籤以支援網頁版面的切割設計,設計人員利用這些標籤建立具有明確架構定義的網頁,如果要讓 IE 這一類不支援 HTML5 的瀏覽器能夠正確的顯示此類標籤所建立的網頁,你還必須在網頁開始解析之前,建立相關的語意標籤元素。

考慮以下的網頁內容:


這個版面以<header>標籤建立標題,以 <aside> 建立側邊欄,並且利用 <nav> 標籤組織右邊的連結清單,畫面中央內容,則是以 <section> 定義,最下方則是 <footer> ,以 Chrome 檢視得到我們要的效果,現在以 IE8 瀏覽這個網頁,結果畫面如下:


如你所見,設計好的版面在這裏完全無法呈現,為了避免這個問題,現在於網頁一開始未執行任何程式碼之前,建立以下的 JavaScript :


<!--[if IE]>    
<script>
    document.createElement('section');
    document.createElement('aside');
    document.createElement('nav');
    document.createElement('header');
    document.createElement('footer');
</script>
<![endif]-->


其中逐行建立這裏需要用到的語意標籤元素,如此一來瀏覽器便能解析這些標籤,現在重新瀏覽網頁,在  IE8 底下也可以正常的呈現了。


由於目前主流瀏覽器均已支援 HTML5 語意標籤,除了 IE 之外這段 Script 是不必要的,所以可以在開始與結束的地方加上判斷式 <!--[if IE]> <![endif]--> 以辨識  IE 瀏覽器,是的話才建立元素。

必須特別注意的是, createElement () 只是讓不支援 HTML5 瀏覽器能夠順利解析這些標籤,對於單純的網頁配置沒有問題,如果對象是其它具程式功能的標籤物件,例如 <canvas> ,這種方式除了維持版面的設計之外,在功能面上完全沒有助益。


沒有留言: