AIR 2.5中的新HTML、HTML5、CSS和JavaScript特性

来源:互联网 发布:linux 查看命令帮助 编辑:程序博客网 时间:2024/05/01 01:12

AIR 2.5中的新HTML、HTML5、CSS和JavaScript特性

Company: Adobe

 

 

目录

  • 经过版本控制的WebKit行为
  • 新HTML、CSS和JavaScript特性
  • 禁用的WebKit特性
  • AIR 2.5特性概览
  • 未来步骤

要求

用户水平

初级

备注:本文最初是为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请求。

HTMLCSSJavaScript特性

通过对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="data:image/png;base64,..." />)、图像类型的输入标签(例如<input type="image" src="data:image/png;base64,..." />)和允许图像URL的CSS规则(例如background: url('data:image/png;base64,...');)。

请注意,在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: textWebKit引入了两个新的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中文站

原创粉丝点击