每一个可以努力的日子,都是一份厚礼。
让IE也支持HTML5语义化标签
今天在珞珈山水BBS看到一个帖子,有同学建议学校宣传部门对武汉大学官网首页进行重构。这不禁让人感慨不已,前端技术一直都在不断向前发展,几年前流行的table框架现在已经被div+css所取代,web2.0时代的到来更是令javascript技术得到广泛应用,而当下HTML5、CSS3则正风起云涌一片蓬勃。语义化标签是HTML5引入的一个重要概念,目前现代浏览器都已经支持了这个特性,可惜的是IE系列9.0以下版本无法识别语义化标签,导致页面在这些版本IE下显示错乱。
语义化!
HTML5中新加入了更加具有语义的标签,比如 header, section, footer, figure等。为什么要进行语义化?最重要的可能还是为搜索引擎优化,让爬虫能更好地理解网页结构。前端工程师需要做的就是选择适合的标签,将内容转换成浏览器认识的语言。
而在当下,做语义化还存在障碍:
- 除了专业的人外,没人会关注标签是否使用得有语义
- HTML的标签还不足以表达所有可能的语义
- 语义化会需要增加一些额外的代码
鬼(CSS森林)曾经说过,外行看热闹,内行看门道,我们写的页面并不是所有人都会去看源代码的,为什么还要注意那么多东西呢?用户只是看到了一小部分,我们是内容的传播者,我们尽可能的让更多的用户更容易的从互联网获取信息,同时这里还是给懂得点右键“查看源文件”的人布道。从自身发展来说,如果想在这个行业内有所建树,专业化是必须的。
解决方案
扯了那么多,还是回到我们的问题,IE9以下旧版本浏览器不支持新的语义化标签。一种解决方案就是用js将HTML5增加的标签创建出来,就像下面这样。
<script> var html5Tags=['header' ,'footer','article','nav' ,'section','aside'] for(var i=0;i<html5Tags.length;i++){ document.createElement(html5Tags[i]); } </script> |
实际上已经有人这么做了并分享在Google code project上方便大家直接调用。于是,我们可以使用IE条件注释来调用这个js文件,这样像FireFox等非IE浏览器就会忽视这段代码,也就不会有无谓的http请求了。
<!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> |
以上代码一定要放在head部分,因为IE必须在元素解析前知道这个元素,所以这个js文件不能在其他位置调用,否则失效。
参考链接:
http://lefter.net/blog/ie_html5/
http://remysharp.com/2009/01/07/html5-enabling-script/
这篇文章由lovelucy于2011-10-28 00:35发表在前端开发。你可以订阅RSS 2.0 也可以发表评论或引用到你的网站。除特殊说明外文章均为本人原创,并遵从署名-非商业性使用-相同方式共享创作协议,转载或使用请注明作者和来源,尊重知识分享。 |
批评不自由
则赞美无意义