AIR 2.5中的新HTML、HTML5、CSS和JavaScript特性
Company: Adobe
目录
要求
用户水平
初级
备注:本文最初是为AIR 2版本编写的。已对它进行了更新以包含AIR 2.5的新特性和功能。
除了Adobe AIR 2.5中添加的新API,AIR使用的HTML引擎中还引入了一些新特性,包含了新的WebKit版本。
AIR 2.5包含Safari 4.0.3使用的WebKit分支。从最新的WebKit分支(主要为Safari 5, 5.0.1和5.0.2)移植了一些安全补丁。(可以在webkit.org上浏览最初的源代码,您将可以在Adobe Open Source上找到AIR 2.5使用的WebKit源代码。)因此,在大多数方面,您都可以使用Safari 4.0.3作为您期望在AIR 2.5中找到的行为的参考实现。
本文概述这些新特性并重点介绍Adobe AIR 2.5中与相应WebKit修订版中可用的HTML支持之间的区别。新的Web浏览器版本也支持非常快的新一代JavaScript引擎(Google V8、WebKit SquirrelFish和Mozilla TraceMonkey)和HTML5。如果希望了解AIR的JavaScript和HTML功能,或者希望知道WebKit中您最喜爱的特性是否适用于AIR,那么本文正好适合您。
经过版本控制的WebKit行为
对新HTML引擎的包含改变了AIR 2.5的一些行为。为了确保您现有的AIR 1.5应用程序不会被破坏,此行为已根据应用程序描述符中使用命名空间进行版本控制。这些具有版本控制的更改包括:
- 如果HTML文档没有<HEAD>元素,那么已经隐式地创建一个。在AIR 1.5中,如果文档中没有<HEAD>元素,则没有创建该元素。
- 对不存在的资源的XMLHttpRequest (XHR)将导致DONE状态并返回一个无效HTTP状态码(0)表明失败。在AIR 1.5中不会报告错误。
- 包含POST方法但没有内容(content.length == 0)的XHR请求不会自动转换为包含GET方法的XHR。在AIR中,长度为0的POST请求将转换为相应的GET请求。
新HTML、CSS和JavaScript特性
通过对WebKit的更新,AIR运行时现在包含对JavaScript、CSS3、canvas标签和data: URL的改进支持。
强大的JavaScript引擎(SquirrelFish Extreme)
新的WebKit版本包含一个修订的JavaScript引擎SquirrelFish Extreme,它相对于以前的版本提供了显著的性能改进。结果,在不进行任何代码修改或重新封装的情况下,AIR 2.5 HTML/JavaScript应用程序的运行速度是原来的两倍。表1给出了AIR 1.5.3、AIR 2.5和Safari 4.0.4中的性能对比(使用Google V8基准测试和WebKit SunSpider基准测试测量)。
表1. JavaScript引擎性能比较
操作系统/基准测试 | AIR 1.5.3 | AIR 2.5 | Safari 4.0.4 |
Windows XP / V8 (越高越好) | 158.6 | 1157.8 | 1509.4 |
Windows XP / SunSpider (越低越好) | 3286.4 | 1625.4 | 666.2 |
Mac OS X 10.6 / V8 (越高越好) | 374.4 | 2522.8 | 2619 |
Mac OS X 10.6 / SunSpider (越低越好) | 1758.8 | 608.2 | 374.4 |
AIR 2.5和对应的Safari版本之间存在速度差异,因为AIR运行时在编译时针对大小进行了优化,而Safari针对速度进行了优化。AIR 2.5优先考虑的一个方面是保持运行时大小较小,同时添加一致的特性集。
改进的CSS3支持
WebKit包含许多新的CSS特性。一些特性包含在CSS3工作草案中,另一些是WebKit特定的扩展。
2D变换、动画和过渡:2D变换可以通过-webkit-transform*和-webkit-perspective*属性以及关联的变换函数应用于HTML元素。
-webkit-transition*属性可用于在CSS属性之间执行平滑的过渡,这些属性包含(但不限于)颜色、位置和维度。它们可与变换属性和函数结合使用来创建简单的动画。
动画进一步扩展了变形和过渡的概念,允许开发人员通过一种声明性方式,使用关键帧修改整个播放期间的动画行为。使用的CSS属性包括-webkit-animation*和新的@keyframes规则。
- 滚动条样式:WebKit引入了一组新的专用CSS属性,允许对滚动条设置皮肤和进行自定义配置。这些属性可通过::-webkit-scrollbar*属性访问,也就是-webkit-scrollbar、-webkit-scrollbar-button、-webkit-scrollbar-track、-webkit-scrollbar-track-piece、-webkit-scrollbar-thumb、-webkit-scrollbar-corner和-webkit-resizer。关于此特性的更详细说明可以在WebKit博客上找到。
使用这些属性为典型的Web应用程序设置皮肤可能存在问题,因为一些浏览器不支持它们(无论是不基于WebKit的浏览器还是基于旧WebKit版本的浏览器)。但是,在AIR应用程序中,这些属性比使用通过JavaScript模拟的滚动条更好。
- 文本列支持:增加的另一项CSS支持包括-webkit-column-count和-webkit-column-gap属性。它们可以用于在一个容器中重新排列任意数量列中的文本。
- 缩放:AIR 2.5还支持新的CSS3 zoom属性,该属性可用于指定一个元素的放大率。对zoom属性的更改可以制作成动画。
- Web字体:Web字体使用CSS @font-face声明实现,允许将一个字体文件放在一个具有其他Web资产的服务器上,并用于渲染Web页面内容。请注意,AIR 2.5仅支持TTF和OTF Web字体。
最新的画布增强
AIR 2.5现在全面支持<canvas>标签,包括ImageData API(getImageData()、createImageData()和putImageData()),还支持使用画布对象作为CSS样式表中的背景图像。
data: URL
AIR 2添加了对data: URL的支持。由于潜在的安全风险,所以存在一些限制。data: URL可在以下情况使用:
- 仅在它指向一个具有受运行时支持的图像类型的资源(JPEG、PNG、BMP、XBM、ICO)时。唯一支持的编码为Base64。任何其他类型的内容(包括脚本和Flash Player内容)都不能通过data: URL存储。
- 仅在需要使用图像的地方。这包括图像标签(例如<img src="https://img-blog.csdnimg.cn/2022010709414218644.png" />)、图像类型的输入标签(例如<input type="image" src="https://img-blog.csdnimg.cn/2022010709414218644.png" />)和允许图像URL的CSS规则(例如background: url('https://img-blog.csdnimg.cn/2022010709414218644.png');)。
请注意,在AIR 2.5中,对data: URL的安全限制已更新为允许在@font-face声明中使用data: URL(参见下文了解font-face支持)。基本而言,data: URL可在CSS样式表中用于嵌入字体,只需在@font-face声明中使用src:规则,例如:
@font-face { font-family: "MyDataFont"; src: url("data:font/opentype;base64,..."); })
禁用的WebKit特性
AIR 2.5中不支持WebKit的Safari 4.0.3分支中的一些HTML、CSS和JavaScript特性。这些特性已在下面列出,还给出了在AIR中更有意义的解决办法或建议的替代工作流。
音频/视频HTML5标签
HTML5中一个备受期待的特性是包含了<audio>和<video>标签。这些标签可用于实现基本的媒体内容播放功能。这些标签的行为可以使用相应的新JavaScript API编写脚本。但是,该规范不是最终版本,目前仍然没有支持格式的标准。而且,支持这些标签的浏览器实现了各种各样的编解码器集。
<audio>和<video>标签最常见的用例是用于在系统中没有Flash Player时替换Flash Player内容。但是,AIR附带了自己的Flash Player副本。除了基于Flash的自定义音频/视频播放器,Adobe还支持并推荐了两个视频播放选项:
- FAVideo(Flash-Ajax Video组件)可在Adobe Open Source网站上找到。这是一个基于Flex且包装在一个AJAX容器中的视频播放器。
- air.Video对象是一个用于实现视频支持的基本运行时类。它可以添加到舞台上,只要围绕它的HTML内容发生改变,它的位置就必须显式设置。
禁用的CSS特性
AIR 2.5中不支持以下特定于CSS的特性。
- -webkit-background-clip: text和-webkit-mask-clip: text:WebKit引入了两个新的CSS声明来控制背景和蒙板的剪切行为。它们分别是-webkit-background-clip和-webkit-mask-clip。在Safari版本的WebKit中,两种样式都允许使用text属性,以及content、border和padding属性。但是,Cairo库缺乏对在蒙板操作中将文本用作蒙板的支持。因此,AIR仅支持content、border和padding属性。
对将文本用作蒙板的支持,从而支持在蒙板属性中使用text属性,计划在未来的Adobe AIR版本中添加。
- 设置HTML控件样式:尽管AIR对CSS属性具有丰富的支持,但在尝试使用纯CSS(不使用JavaScript进行元素替换)对HTML控件设置样式时仍存在一些问题。简单来讲,这些限制会影响以下控件:
- <select>(下拉列表变体):对展开的列表的背景颜色的更改不起作用,对展开状态下各个项的字体颜色或字形体系的更改也是如此。
- <input type="checkbox" />和<input type="radio" />:大部分CSS属性都不会更改这些控件的外观。但是,此行为与Safari中的行为是一致的。
- 媒体设备查询:截至2009年9月,CSS3中的媒体查询特性是W3C推荐的一种候选方案。媒体查询扩展了媒体类型的功能,允许更准确地设置样式表的标签。查询可以包含(但不限于)宽度、高度和朝向等属性。媒体查询允许在不更改内容本身的前提下更改HTML文档的外观。
AIR 2.5不支持媒体查询。
SVG
另一个在最近得到大量关注的特性是支持SVG。尽管目前WebKit中已提供支持,但最新的Adobe AIR版本不支持SVG。
未包含它的主要原因在于运行时大小方面(添加它会将运行大小增加15-20%)。最初,与AIR相关的主要难题是运行时的大小、与操作系统和本地API的集成、对<canvas>标签和新的CSS属性的支持,以及JavaScript性能。这些优先事项,以及对SVG图形功能的兴趣降低的趋势,导致最新的Adobe AIR版本中未包含SVG支持。
但是,对受HTML5画布和更快的JavaScript引擎支持的富JavaScript应用程序的兴趣的复燃,增加了对可通过SVG编写脚本的矢量图形的需求。因此,添加对SVG图形的支持可能会在下一个AIR版本中考虑。
Web套接字
WebSockets协议允许Web应用程序以直观的方式处理与服务器端进程之间的双向通信。WebSockets协议的主要目的是消除使用XHR进行异步网络I/O的开销,以支持使用Web应用程序作为客户端的功能更加丰富、更加复杂的网络通信场景。
但是,AIR 2.5中包含的网络API目前实现的灵活性比WebSockets使用场景更高。新的网络API包含对UDP套接字和安全的TCP链接的支持,还支持除HTTP和HTTPS外的许多协议(包括RTMP和RTMFP)。
Web工作线程
Web工作线程允许一个页面生成大量后台线程来进行数据处理。这些线程使用一种消息传递机制与父页面通信,无法访问DOM或父页面。
此特性目前在Adobe AIR中是禁用的,因为Adobe正在考虑一种将适用于AIR API的更加集成的方法。
客户端数据库
从第一个版本开始,AIR就包含了对创建和使用SQLite数据库来存储客户端数据的支持。AIR 1.5添加了对事务的支持,而AIR 2使用事务保存点对它进行了改进。
HTML5通过一种轻量关系数据库引入了对客户端数据库的支持,它公开一个类似SQL的API用于数据访问。但是,目前的实现具有一些限制,一些用户代理限制了可在客户端数据库中存储的数据量,从而限制或防止拒绝服务攻击。
目前,HTML5客户端数据库API已禁用,因为AIR中的本地数据库支持提供了一系列特性,包含并超越了HTML5标准指定的客户端数据库。
离线缓存
HTML5中另一个与在客户端存储数据相关的特性就是所谓的应用程序缓存。使用应用程序缓存,应用程序可以指定哪些资源应该在客户端上缓存,哪些应该始终从网络访问,以便用户甚至能够在未联网时与Web应用程序和文档交互。
默认情况下,AIR应用程序的所有文件和资源位于用户的本地磁盘上。但是,需要联网的应用程序可以使用networkChange事件和ServiceMonitor类来确定某些网络服务的可用性。当应用程序离线时,应用程序可以通过flash.data.*类使用文件系统上或数据库内本地缓存的资源。
窗口消息
HTML5在窗口对象上添加了对postMessage()方法的支持。这使任何窗口都可以广播文本消息,任何其他窗口都可以订阅这些消息,从而可以在页面之间实现安全的跨域通信。
目前这一支持未在AIR中启用,但AIR确实提供了进行跨域安全通信的机制。
其他HTML区别
在传统上,HTML中的打印是通过调用document.print()函数来实现的。但是,在调用此函数之后,Web应用程序的开发人员几乎无法控制实际的打印方式(这包括但不限于彩色打印是否可用、可用的纸张规格、副本数量等)。对整体样式的一定控制可以通过CSS媒体类型来实现,但所有控制仍然需要结合在浏览器中实现的逻辑和用户设置来实现
在AIR 2.5中,document.print()函数是禁用的,使用了PrintJob API来控制打印过程。PrintJob API支持渲染可见的、动态的或屏幕外部的内容,以及向系统提示一个打印对话框并读取用户与页面宽度、高度和朝向以及颜色支持相关的打印机设置。
标准符合性
Adobe AIR的最新版本在ACID 3符合性测试中获得的分数为91/100。该分数与Safari的100/100存在差距的原因在于,禁用了上面提到的特性,主要是缺乏SVG支持(6项测试失败)、媒体查询和data: URL安全限制。最后一个原因是AIR默认没有实现浏览器历史状态堆栈和基于历史状态的外观更改。这是因为Adobe AIR不是浏览器。
AIR 2.5特性集概览
表2和3汇总了与Safari 4.0.3相比,AIR的特性集。
表2. AIR 2中支持的CSS特性
CSS特性 | AIR 2.5 |
CSS3 –webkit选择器 | 是,但有一个例外:文本剪切。 |
Web字体(@font-face) | 是。 |
2D变换 | 是。 |
3D变换 | 否。 |
过渡 | 是。 |
动画 | 是。 |
反射 | 是。 |
蒙板 | 是。 |
设置滚动条样式 | 是。 |
渐变 | 是。 |
缩放 | 是。 |
本地CSS查询选择器 | 是。 |
CSS媒体设备查询 | 否。 |
表3. AIR 2中支持的HTML5的特性
HTML5特性 | AIR 2.5 |
更快的JavaScript引擎 | 是,WebKit的Squirrelfish Extreme JavaScript引擎。 |
画布 | 是。 |
SVG | 否。 |
HTML5分节标签(header、nav、article等) | 是。 |
视频/音频标签 | 否。 |
Web工作线程 | 否。 |
客户端数据库 | 否。AIR有一个自定义数据库API。它不是HTML5数据库,但可以向任何其他AIR API一样供JavaScript开发人员使用。 |
离线检测和缓存 | AIR为离线用途而设计,提供了一个API来检测网络状态。 |
包含跨起源请求的XMLHttpRequest | 否,但从应用程序沙盒发起的XHR默认可以到达任何域(具有跨域功能)。 |
跨文档消息 | 否,postMessage()在AIR中禁用。 |
Web存储 | 否。AIR支持直接文件系统访问、Flash共享对象、一种加密的本地存储和本地SQLite数据库。 |
Web套接字 | 否。 AIR具有自己的套接字API。 |
服务器发送的DOM事件 | 否。 |
地理位置 | 否。 |
拖放支持 | 是。AIR具有自己的拖放API,提供了比HTML更深的桌面集成。 |
表单 | 否。 |
历史状态/后退按钮 | 自定义历史状态堆栈可用于HTMLLoader中。 |
构件 | AIR在设计上类似于构件规范。 |
未来步骤
本文概述了AIR为HTML/JavaScript开发人员提供的HTML特性。由于AIR中使用的HTML引擎基于Safari 4.0.3中使用的WebKit版本,所以它们具有许多相同的特性,无论是在HTML/JavaScript还是CSS渲染方面。关于对AIR领域有意义并且WebKit/Safari中包含但AIR中未包含的特性,常常可以找到至少提供了匹配功能的替代特性。在一些情况下,AIR提供了更广泛和更灵活的API,比如在本地存储、网络和桌面集成方面。另外,性能得到了极大提升,接近Safari的性能,甚至有时与它不相上下。
可以在Christian Cantrell的博客中找到AIR 2中的新特性的完整列表。关于AIR 2.5中的更改的详细信息,参见版本说明。
转自 info中文站