Along with the new APIs added in Adobe AIR 2.5, new features were introduced in the HTML engine used by AIR, thanks to the inclusion of a newer version of WebKit.

AIR 2.5 includes the WebKit branch used by Safari 4.0.3. Some security fixes were ported from the latest WebKit branches (mainly Safari 5, 5.0.1, and 5.0.2). (You can browse to the original sources on webkit.org and you'll find the WebKit sources used in AIR 2.5 at Adobe Open Source.) Thus, in most respects, you can use Safari 4.0.3 as a reference implementation of the behavior you can expect to find in AIR 2.5.

This article provides an overview of the new features and highlights the differences between the HTML support available in Adobe AIR 2.5 and in the corresponding WebKit revision. New versions of web browsers also support a new generation of very fast JavaScript engines (Google V8, WebKit SquirrelFish, and Mozilla TraceMonkey) and HTML5. If you are wondering about the JavaScript and HTML capabilities of AIR, or if you want to know whether your favorite features found in WebKit work in AIR, then this article is for you.

Versioned WebKit behavior

The inclusion of a new HTML engine changed some of the behavior of AIR 2.5. To ensure your existing AIR 1.5 applications don't break, this behavior has been versioned according to the namespace used in the application descriptor. These versioned changes include:

If an HTML document does not have a <HEAD> element, one is implicitly created. In AIR 1.5 no <HEAD> element is created if it's not present in the document.
An XMLHttpRequest (XHR) to a nonexistent resource ends in the DONE state and returns an invalid HTTP status code (0) to indicate failure. In AIR 1.5 no error is reported.
An XHR request with the POST method and no content ( content.length == 0 ) doesn't get automatically transformed into an XHR with the GET method. In AIR 1.5 zero-length POST requests get transformed to corresponding GET requests.

New HTML, CSS, and, JavaScript features

With the update to WebKit, the AIR runtime now includes improved support for JavaScript, CSS3, the canvas tag, and data: URLs.

Nitro JavaScript Engine (SquirrelFish Extreme)

The newer version of WebKit includes a revised JavaScript Engine called SquirrelFish Extreme, which delivers big performance improvements over the previous version. As a consequence, AIR 2.5 HTML/JavaScript applications can run up to twice as fast without any code modification or repackaging. Table 1 presents a comparison of the performance in AIR 1.5.3, AIR 2.5, and Safari 4.0.4 as measured with Google V8 benchmark and WebKit SunSpider benchmark.

Table 1. Performance comparison of JavaScript engines

Operating System / Benchmark	AIR 1.5.3	AIR 2.5	Safari 4.0.4
Windows XP / V8 (bigger is better)	158.6	1157.8	1509.4
Windows XP / SunSpider (lower is better)	3286.4	1625.4	666.2
Mac OS X 10.6 / V8 (bigger is better)	374.4	2522.8	2619
Mac OS X 10.6 / SunSpider (lower is better)	1758.8	608.2	374.4

There is a speed difference between AIR 2.5 and the corresponding Safari version because the AIR runtime is optimized for size when it is compiled, while Safari is optimized for speed. One of the priorities for AIR 2.5 was keeping the runtime size small, while adding a consistent set of features.

Improved CSS3 support

WebKit includes a number of new CSS properties. Some are part of the CSS3 working draft and some are WebKit-specific extensions.

2D transformations, animations, and transitions: 2D transformations can be applied to HTML elements via the -webkit-transform* and -webkit-perspective* properties and the associated transformation functions.
The -webkit-transition* properties can be used to perform smooth transitions between CSS properties, including (but not limited to) colors, position, and dimensions. They can be used in conjunction with transformation properties and functions to create simple animations.

Animations take the concept of transforms and transitions a step further, allowing developers to use keyframes to modify the behavior of the animation throughout its duration in a declarative way. The CSS properties used are -webkit-animation* and the new @keyframes rule.
Scroll bar styling: WebKit introduced a set of new proprietary CSS properties that allow skinning and custom configuration of the scroll bars. These can be accessed via the ::-webkit-scrollbar* properties, namely -webkit-scrollbar , -webkit-scrollbar-button , -webkit-scrollbar-track , -webkit-scrollbar-track-piece , -webkit-scrollbar-thumb , -webkit-scrollbar-corner and -webkit-resizer . A more detailed description of this feature can be found on the WebKit blog.
Using these properties to skin a typical web application can be problematic because of browsers that do not support them (either non-WebKit based browsers or browsers based on older WebKit versions). In an AIR application, however, these properties can be a better alternative than using JavaScript-simulated scroll bars.
Text column support: Another addition to CSS support includes the -webkit-column-count and -webkit-column-gap properties. These can be used to reflow the text in a container across an arbitrary number of columns.
Zoom: AIR 2.5 also supports the new CSS3 zoom property, which can be used to specify the magnification of an element. Changes to the zoom property can be animated.
Web fonts: Web fonts are implemented by the CSS @font-face declaration, which allows a font file to be placed on a server with other web assets and to be used to render web page content. Note that AIR 2.5 supports only TTF and OTF web fonts.

Latest canvas enhancement

AIR 2.5 now has full support for the <canvas> tag, including the ImageData API ( getImageData() , createImageData() , and putImageData() ) and support for using canvas objects as background images in CSS style sheets.

data: URLs

AIR 2 adds support for data: URLs. There are some restrictions due to the potential security risks. A data: URL can be used:

Only if it points to a resource that is of one of the image types supported by the runtime (JPEG, PNG, BMP, XBM, ICO). The only supported encoding is Base64. Any other kind of content (including scripts and Flash Player content) cannot be stored via data: URLs.
Only in the places where an image is expected. This includes image tags (for example, <img src="data:image/png;base64,..." /> ), input tags of type image (for example, <input type="image" src="data:image/png;base64,..." /> ), and CSS rules allowing image URLs (for example, background: url('data:image/png;base64,...'); ).

Note that in AIR 2.5, the security restrictions for data: URLs have been updated to allow using data: URLs in @font-face declarations (see below for font-face support). Basically, a data: URL can be used in a CSS style sheet to embed a font, using the src: rule in a @font-face declaration, for example:

        @font-face {
  font-family: "MyDataFont";
  src: url("data:font/opentype;base64,...");
})
    

Disabled WebKit features

Some HTML, CSS, and JavaScript features in the Safari 4.0.3 branch of WebKit are not supported in AIR 2.5. These features are listed below, along with workarounds or recommended alternate workflows that make more sense in AIR.

Audio/video HTML5 tags

One of the much anticipated features in HTML5 is the inclusion of <audio> and <video> tags. These allow basic playing of media content. The behavior of these tags can be scripted using corresponding new JavaScript APIs. However, the specification is not final and there is still no standard for the supported formats. Furthermore, the browsers that support these tags implement a disjoint set of codecs.

The most common use case for the <audio> and <video> tags are as replacements for Flash Player content, when Flash Player is not available in the system. However, AIR ships with its own copy of Flash Player. Along with custom-made audio/video players based on Flash, there are two options for playing video that are recommended and supported by Adobe:

FAVideo (the Flash-Ajax Video component) can be found on the Adobe Open Source site. This is a Flex-based video player wrapped in an AJAX container.
air.Video object is the basic runtime class for video support. It can be added to the stage; its position must be set explicitly whenever HTML content around it changes.

Disabled CSS features

The following CSS-specific features are not supported in AIR 2.5.

-webkit-background-clip: text and -webkit-mask-clip: text: WebKit introduced two new CSS declarations that control the clipping behavior of backgrounds and masks. These are -webkit-background-clip and -webkit-mask-clip respectively. In the Safari version of WebKit, both styles allow the use of the text attribute, along with the content , border , and padding attributes. However, the Cairo library lacks support for using text as a mask in masking operations. As such, AIR only supports the content , border , and padding attributes.
Support for using text as a mask, thus enabling the text attribute to be used in masking properties, is planned for a future version of Adobe AIR.
styling HTML Controls: Although AIR has rich support for CSS properties, there are some issues when trying to style HTML controls using plain CSS (without using JavaScript to do element replacement). In a nutshell, these limitations affect the following controls:
- <select> (the drop-down variant): Changing the background color for the expanded list does not work, nor does changing the font color or font-family for individual items in the expanded state.
- <input type="checkbox" /> and <input type="radio" />: Most of the CSS properties don't change the appearance of these controls. However, this behavior is consistent with the behavior in Safari.
Media device queries: As of September 2009, the media queries feature in CSS3 is a W3C candidate recommendation. Media queries extend the functionality of media types by allowing more precise labeling of style sheets. Queries can include (but are not limited to) attributes such as width, height, and orientation. Media queries allow changing the appearance of an HTML document without changing the content itself.
AIR 2.5 does not support media queries.

SVG

Another feature that has received a great deal of interest lately is support for SVG. While present in WebKit, the current version of Adobe AIR does not support SVG.

The main reason for not including it was runtime size concerns (adding it would have increased the runtime size by 15 to 20 percent). Initially, the main pain-points regarding AIR were the size of the runtime, integration with the operating system and native APIs, support for the <canvas> tag and new CSS properties, and JavaScript performance. These priorities, coupled with a trend toward reduced interest in SVG graphics, led to SVG support not being included in the current version of Adobe AIR.

However, the renewed interest in rich JavaScript applications powered by HTML5 canvas and faster JavaScript engines increased the number of requests for scriptable vector graphics via SVG. Thus, adding support for SVG graphics may be considered for the next version of AIR.

Web sockets

The WebSockets protocol allows web applications to handle bidirectional communication with a server-side process in a straightforward way. The main intent of the WebSockets protocol is to remove the overhead of using XHR for asynchronous network I/O and to allow for richer, more complex network communication scenarios using web applications as clients.

However, the networking APIs included in AIR 2.5 currently allow more flexibility than the WebSockets usage scenarios. The new networking APIs include support for UDP sockets and secure TCP connections as well as a number of protocols (including RTMP and RTMFP) beside HTTP and HTTPS.

Web workers

Web workers allow a page to spawn background threads for data processing. These communicate with the parent page using a message-passing mechanism and do not have access to the DOM or to the parent page.

This feature is currently disabled in Adobe AIR, as Adobe is considering a more integrated approach that will work with AIR APIs.

Client database

Since its first release, AIR has included support for creating and using a SQLite database for storing client data. AIR 1.5 added support for transactions, while AIR 2 improved it with transaction savepoints.

HTML5 introduced support for client-side databases in the form of a lightweight relational database that exposes an SQL-like API for data access. However, current implementations have limitations; some user agents limit the amount of data that can be stored in the client database as a means to limit or prevent denial-of-service attacks.

Currently, the HTML5 client-side database APIs are disabled since the native database support in AIR offers a set of features that includes and exceeds the one specified by the HTML5 standard.

Offline caching

Another feature in HTML5 related to storing data on the client side is the so called application cache. Using the application cache, an application can specify which resources should be cached on the client side and which should be always accessed from the network in order for the user to be able to interact with the web application and documents even when the user is not connected.

By default, all the files and resources of an AIR application reside on the user's local disk. However, applications that need to be connected can use the networkChange event and the ServiceMonitor classes to determine the availability of certain network services. Applications can use local cached resources on the file system or inside a database when the application is offline using the flash.data.* classes.

Window messaging

HTML5 adds support for the postMessage() method on the window object. This enables any window to broadcast a textual message and any other window to subscribe to these messages, allowing safe cross-domain communication between pages.

Currently this is not enabled in AIR, but AIR does provide mechanisms for safely communicating across domains.

Other HTML differences

Traditionally, printing in HTML was achieved via a call to the document.print() function. However, after calling this function, the developer of the web application had little to no control over the way actual printing is done (this includes, but is not limited to whether color printing is available or not, paper sizes available, number of copies, and so on). Some control over the overall styling can be achieved via CSS media types, but everything still relies on a combination of the logic implemented in the browser and the user's settings.

In AIR 2.5, the document.print() function is disabled, with the PrintJob API being used instead to control the printing process. The PrintJob API allows rendering of content that is visible, dynamic, or off-screen, as well as prompting a system Print dialog box and reading the user's printer settings related to page width, height, and orientation in addition to color support.

Standards compliance

The latest version of Adobe AIR scores 91/100 in the ACID 3 compliance test. The difference in score compared to Safari's 100/100 is caused by the disabled features mentioned above, mainly the lack of SVG support (6 tests failing), media queries, and the data: URLs security restrictions. One last point is lost to the fact that AIR does not implement by default a browser history stack and history-based change of appearance. This is because Adobe AIR is not a browser.

AIR 2.5 feature set at a glance

Tables 2 and 3 sum up the feature set of AIR as compared to Safari 4.0.3.

Table 2. CSS features supported in AIR 2

CSS Feature	AIR 2.5
CSS3 –webkit selectors	Yes, with one exception: text clipping.
Web Fonts ( `@font-face` )	Yes.
Transforms 2D	Yes.
Transforms 3D	No.
Transitions	Yes.
Animations	Yes.
Reflections	Yes.
Masks	Yes.
Styling scroll bars	Yes.
Gradients	Yes.
Zoom	Yes.
Native CSS query selectors	Yes.
CSS media device queries	No.

Table 3. HTML5 features supported in AIR 2

HTML5 Features	AIR 2.5
Faster JavaScript Engine	Yes, WebKit's Squirrelfish Extreme JavaScript Engine.
Canvas	Yes.
SVG	No.
HTML5 section tags (header, nav, article, and so on)	Yes.
Video/Audio tags	No.
Web workers	No.
Client-side database	No. AIR has a custom database API. It is not an HTML5 database, but it is available to JavaScript developers like any other AIR API.
Offline detection and caching	AIR is offline by design and provides an API for detecting network status.
XMLHttpRequest with cross origin requests	No, but by default XHR initiated from Application Sandbox can reach any domain (has cross domain capabilities).
Cross-document messaging	No, `postMessage()` is disabled in AIR.
Web storage	No. AIR has support for direct file system access, Flash shared objects, an encrypted local store, and local SQLite databases.
Web sockets	No. AIR has its own Socket API.
Server-sent DOM events	No.
Geolocation	No.
Drag-and-drop support	Yes. AIR has its own drag-and-drop API that offers deeper desktop integration than HTML.
Forms	No.
History state / back button	Custom history stack available in HTMLLoader.
Widgets	AIR is similar in design to the Widgets specification.

Where to go from here

This article presented an outline of the HTML features present in AIR for HTML/JavaScript developers. As the HTML engine used in AIR is based on the WebKit version used in Safari 4.0.3, they share many features, both in terms of HTML/JavaScript and CSS rendering. For the features that make sense for the AIR story and that are present in WebKit/Safari but not AIR, you can usually find alternatives that offer at least matching functionality. In some cases broader and more flexible APIs are available in AIR, as is the case with local storage, networking, and desktop integration. Also, performance has been greatly improved, approaching and sometimes matching the performance of Safari.

You can find an exhaustive list of new features in AIR 2 on Christian Cantrell's blog. For details on the changes in AIR 2.5, refer to the release notes.

What's new about HTML, HTML5, CSS, and JavaScript in AIR 2.5?

著者 Mihai Balan

Content

Modified

ページツール

タグ

必要条件

ユーザーレベル

Versioned WebKit behavior

New HTML, CSS, and, JavaScript features

Nitro JavaScript Engine (SquirrelFish Extreme)

Improved CSS3 support

Latest canvas enhancement

data: URLs

Disabled WebKit features

Audio/video HTML5 tags

Disabled CSS features

SVG

Web sockets

Web workers

Client database

Offline caching

Window messaging

Other HTML differences

Standards compliance

AIR 2.5 feature set at a glance

Where to go from here

More Like This

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

What's new about HTML, HTML5, CSS, and JavaScript in AIR 2.5?

著者 Mihai Balan

Content

Modified

ページ ツール

タグ

必要条件

ユーザーレベル

Versioned WebKit behavior

New HTML, CSS, and, JavaScript features

Nitro JavaScript Engine (SquirrelFish Extreme)

Improved CSS3 support

Latest canvas enhancement

data: URLs

Disabled WebKit features

Audio/video HTML5 tags

Disabled CSS features

SVG

Web sockets

Web workers

Client database

Offline caching

Window messaging

Other HTML differences

Standards compliance

AIR 2.5 feature set at a glance

Where to go from here

More Like This

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

ページツール