跨平台移动技术探讨三:巧用Html5技术实现跨浏览器

分层实现HTML5与跨浏览器
依据W3C之标准一个Web Page可以划分为4层架构(如下图5所示)。本文将以ASP.NET为例,逐步分层介绍如何实现HTML5与CSS3等新技术,并达到兼容不同浏览器的目的。
W3c
▲ 图5. W3C Page Schema

(1)Building
ASP.NET的IDE开发工具如Microsoft Visual Studio 2010预设是不支持HTML5格式的(VS 2012开始支持),故开发者须先将其升级至VS 2010 SP1(如图6), 并使用扩充管理员(Extension Manager)额外安装Web Standard Update for Microsoft Visual Studio 2010 SP1(如图7),此套件将提供VS 2010辨识更多W3C标准的能力, 同时包含了HTML5与CSS3的验证。

Microsoft Visual Studio 2010
▲ 图6. 下载安装VS 2010 SP1升级套件

html5

▲ 图7. 以内建扩充管理员安装Web Standard Update for Microsoft Visual Studio 2010 SP1

开发者只要将文件格式设定为HTML5(如图8), 并撰写正确的HTML5定义宣告,Building时VS 2010就能提供更完善的HTML5提示与建议,并可大幅减低原本因为不认识HTML5而出现的大量警告与错误讯息。

IDE
▲ 图8.文件格式改为HTML5

且为了能确实支持多浏览器,并尽可能减少各浏览器在呈现上的差异,Reset的动作在此阶段就显得格外重要,如图9所示Reset Definition区域的设置就是用于集中放置这须事先定义多浏览器差别的程序代码 ,防止浏览器继续执行文件内容时产生错误 。如可加上判断让无法支持HTML 5的浏览器环境可以识别HTML 5标签防止执行出错。再来则是为了最小化不同浏览器对样式表单在渲染方法上的差异 ,进行的样式归零动作也就是CSS Reset(如图10)。

CSS Reset
▲ 图9. 在页面中加入Reset Definition区域

CSS Reset
▲ 图10. CSS Reset 范例

(2)Structure
根据W3C标准规范,所有需在页面建构的HTML标签都必须撰写在body标签内,而采用HTML 5架构撰写与传统HTML 4.01其实并无太多差异,只是多出了许多可使用的新标签与特殊API,不过在一些观念与习惯上必须做出调适,而这些习惯在于往后撰写符合标准的标签会更得心应手。如:W3C规定所有标签必须小写;HTML 5利用article与section标签替换过多的div标签来排版等。但由于HTML 5的主流标准格式目前尚未全面普及化,所以还是有可能遇到一些不被其他浏览器支持的问题,然而解决方法其实很单纯,除了透过特殊判断针对不同浏览器进行对应处理,或是引用一些帮助辨识HTML标签的Java Script函示库外,对于某些真的无法支持的HTML 5标签,再转而使用HTML 4.01的标签或Java Script做替代方案即可。

BYOD
▲ 图11. 将页面建构的卷标放在body卷标内并符合撰写标准

(3)Performance
在安装了Web Standards Update for Visual Studio 2010 SP1后,开发者在撰写样式表单时可直接选用CSS 3.0的验证标准,如图12所示。利用CSS 3.0验证标准可提供VS 2010在开发时辨识更多CSS 函式,并防止侦错窗口出现错误讯息,提供更贴近W3C标准的开发环境。

CSS
▲ 图12. 将验证标准设为CSS 3.0

另外使用CSS 3.0时有些指令目前在浏览器下是被设为选择性使用的,必须使用如 -webkit-等CSS Properties,才能被开启使用。如图13所示。

CSS Properties
▲ 图13. CSS Properties

最后如果仅开发Web APP可不用考虑,但若开发者希望其也可被计算机正常浏览,就必须要再设计IE Hack与CSS Hack(如图14,15所示),藉由只有Internet Explore才能辨识的批注卷标,来让计算机上的旧版IE可以执行不同的程序代码或样式表单内容。防止错误的发生并尽可能达成相似的显示效果,即使用户意外在计算机上使用旧版IE来浏览,也能达到一定的网站效果与功能。

IE▲ 图14. IE Hack范例

CSS Hack
▲ 图15. CSS Hack范例

(4) Activities
此层为目前浏览器竞争最激烈的部分,目前最多被使用的语言为EMCA-262,俗名称为Java Script。由于各家浏览器不断优化自己的Java Script Engine,造成有不同版本的EMCA-262标准在不同浏览器间使用,如:Internet Explore 6使用第三版EMCA-262标准;Chrome 17使用第五版EMCA-262标准。然而即使是同一版EMCA-262标准在不同品牌浏览器上也有许多差异的实作方法。

要克服此问题通常有两种解决办法,传统做法就是利用函式侦测浏览器类别来做不同的措施,使得同一动作必须配合各品牌浏览器有许多套的程序代码内容。但这样费工费时又不保证长久通用的作法并不建议,在此推荐第二种近期较为普遍的方式,即是将Java Script再架高一层成为跨浏览器的函式库,使得撰写内容可以支持多浏览器环境。依照之前w3tech 的调查,JQuery 是最为主流的函示库(如表4所示),在前一百万网站中达到44.9%的使用率,且在Java Script函式库拥有85.2%市占率。故尽量使用JQuery 函示库取代一般自行撰写的Java Script , 不仅可更简单有效率地达成功能,更兼具了浏览器通用性的优势。

JavaScript
▲ 表4. JavaScript 函数库占有率 From w3tech 2012.2

移动信息化交流QQ群:一号群:211029692 二号群:344692795 CIO交流群:316076815(需认证)

移动化问答社区:wenda.yidonghua.com



1 星2 星3 星4 星5 星 (还没有打分,快来打分吧!)
Loading...
 
已有 0 条评论
返回顶部

无觅相关文章插件,快速提升流量