HTML updates in Adobe AIR 3

Note: This article was originally written for the release of AIR 2. It has been updated to include the new features and capabilities of AIR 2.5 and AIR 3.

Adobe AIR 3 includes a number of new APIs and improvements. One of the improvements is the updated HTML engine used in for the HTML-based AIR applications and for displaying HTML content in ActionScript applications.

AIR 3 includes a snapshot of the WebKit branch used in Safari 5.0.3 as well as the latest security fixes. You can review the original source at webkit.org; for the WebKit sources used in AIR go to Adobe Open Source. Thus, in most respects, you can use Safari 5.0.3 as a reference implementation of the behavior you can expect to find in AIR 3.

This article provides an overview of the new features and highlights the differences between the HTML support available in Adobe AIR 3 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.

This section lists the highlights of the new Safari features.

• Faster Nitro JavaScript Engine: The new version of WebKit includes an improved version of the Nitro JavaScript engine. This allows JavaScript-intensive applications to perform up to 20% better when run in the new runtime without any code modification or repackaging. The following table shows comparative performance results between AIR 2.6 and AIR 3.0, measured using Google V8 and WebKit Sunspider.

  Table 1. Performance comparison of JavaScript engines

  Operating System / Benchmark	AIR 2.5	AIR 3	Safari 5.0.3
  Windows 7 / V8 (higher is better)	1377	1698	1870
  Windows 7 / SunSpider (lower is better)	1358	1023	423
  Mac OS X 10.6 / V8 (higher is better)	2085	2431	2475
  Mac OS X 10.6 / SunSpider (lower is better)	819	669	340

• HTML5 sectioning elements: The HTML5 standard introduced a number of new HTML tags in order to enable improved semantics. These new tags allow a more meaningful markup for web pages and easier content publishing in template-based systems. Also, semantically richer content provides extra information to assistive systems, without affecting the presentation of HTML documents.

  HTML5 sectioning elements match typical sections of a web page, such as headers and footers, navigation sections, articles and excerpts, time stamps (for instance the time a certain post was published on a blog). These new tags are <section>, <nav>, <article>, <aside>, <hgroup>, <header>, <footer>, <time>, <mark>. A brief overview of these new tags can be found on this page. AIR 3 fully supports these new HTML5 sectioning elements.

• HTML5 new form input types and forms validation: Along with new tags, the HTML5 standard added new allowed values for the type attribute of the <input> tag, effectively defining new types of input (for example, number, range, email, URL, date, etc.). Currently, only a few browsers implement the necessary user interface for the new input types—and with big differences in the UI representation of the controls. However, almost all major browsers support the newly added properties and methods of the input control, while rendering the actual elements as generic text inputs (that can be styled to automatically reflect whether or not the input values are valid or not).

  AIR 3 supports the new input types but renders them as text inputs, too. However, the new methods and properties (for example, stepUp(), stepDown(), min, max, step, valueAsNumber, etc.) as well as appropriate styling options are available and can be used, for instance in conjunction with a JavaScript library that would draw the necessary, more interactive UI. One thing to note about AIR 3 is that, just as in Safari, form validation is not enabled—neither in terms of UI elements to signal invalid values nor in terms of preventing the submission of forms that don't meet the required criteria (required fields are filled-in, inputs have valid values).

• HTML5 postMessage(): The HTML5 standard defines a new method for safely enabling cross-origin communication. Using the window.postMessage() method and the corresponding onmessage event, windows can broadcast textual messages and subscribe to such messages. For increased security, messages can be dispatched only to subscribers that match a certain origin. This feature is supported since AIR 2.6.
• HTML5 AJAX history: The HTML5 standard added new functionality to the JavaScript history API. With HTML5, web applications developers can use the history.pushState() and history.replaceState() methods as well as the onpopstate event to modify the history stack as well as the URL displayed in the address bar of the browsers, without triggering a reload of the page.

  AIR 3 supports the new history API, allowing web applications that use it to run properly and seamlessly in AIR as well as in all current browsers.

• CSS media queries: CSS media queries extend the media declaration of a CSS import tag allowing developers to load different CSS files based on the properties of the device rendering the content. Available properties include the width and height of the viewport, the aspect ratio, orientation or even the color depth and resolution of the device. HTML support for CSS media queries is present in AIR since version 2.
  

AIR 3 is backward compatible with AIR 2.7 and earlier. As such, it includes improved support for the following JavaScript, CSS3, and HTML5 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: Since version 2.5, AIR also supports the 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 3 supports only TTF and OTF web fonts.

Canvas enhancement

AIR 3 supports the <canvas> tag, including the ImageData API (getImageData(), createImageData(), and putImageData()), and the use of canvas objects as background images in CSS.

data: URLs

AIR 2 added 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,...'); ).
  
• In CSS in @font-face declarations for embedding fonts in the CSS file, as in the following example:

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.

Even though AIR 3 includes the Safari 5 branch of WebKit, some HTML, CSS, and JavaScript features that are present in Safari are currently disabled in AIR either for security or performance reasons or because of architectural incompatibilities. The following list highlights the features that are currently disabled, along with possible workarounds:

• Audio/video HTML5 tags: The <audio> and <video> tags aim to provide a standard way of playing media in HTML pages. However, with codec support still subject to browser vendor decision and a big number of libraries abstracting and providing fallback solutions for media delivery, applications using only these tags as a mechanism for delivering media are not very common. For this reason, the <audio> and <video> tags are not supported. However, AIR is distributed with a copy of Flash Player for video and audio support.
  
• Disabled CSS features: AIR 3.0 supports almost all CSS properties and styling options implemented by WebKit/Safari with the exception of the following:
• -webkit-background-clip: text and -webkit-mask-clip: text are currently not supported due to the lack of support for using text as a mask in the Cairo library used by the rendering engine in AIR.
• Styling controls using plain CSS without using JavaScript to do element replacement. This limitation affects 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.

• SVG: The main reason for not including SVG support at this time is runtime size concerns (adding it would have increased the runtime size by 15 to 20%), coupled with insufficient interest in SVG graphics.
  
• Web sockets: The WebSockets protocol allows web applications to handle bidirectional communication with a server-side process in a straightforward way. However, the networking APIs included in AIR 2.5 currently allow more flexibility than the WebSockets usage scenarios. Since the new networking APIs include support for UDP sockets and secure TCP connections as well as HTTP, HTTPs, RTMP, and RTMFP (among other protocols), support for WebSockets is not enabled in AIR 3.
• Web workers: Web workers allow a page to spawn background threads for data processing. These communicate with the parent page using plain text messages 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 across AIR APIs.
• Client database: Since its first release, the AIR runtime has included support for creating and using a SQLite database for storing client data. AIR 1.5 added support for transactions, whereas AIR 2 added 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, since current implementations have a number of limitations and AIR offers a set of features that includes and exceeds the one specified by the HTML5 standard, support for HTML5 client-side databases is disabled.

• 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 and which should be always accessed from the network in order for users to be able to interact with the web application and documents even when they are offline. In AIR, usually all the files and resources of an application reside on the user's local disk. Applications can use local cached resources on the file system or inside a database when the application is offline using the flash.data.* classes.
• WebGL: As WebGL support in Safari is currently restricted to the Mac platform, for users running Snow Leopard, WebGL support is currently disabled in AIR 3.
• HTML5 iframe sandboxing: In order to add an additional security layer for including untrusted (and potentially malicious) content in HTML5 applications, the standard added the sandbox attribute to the <iframe> element. Using this attribute, developers can grant or restrict privileges for the content loaded inside an iframe. Because of the different security  and sandboxing model present in AIR HTML this feature is disabled.
• HTML printing: 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 3, the document.print() function is disabled, with the PrintJob API being the recommended way to control the printing process. This 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.

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

Table 2. CSS features supported in AIR 3

Table 3. HTML5 features supported in AIR 3

This article presented an overview of the new HTML5 features in AIR for JavaScript developers. As the HTML engine used in AIR is based on the WebKit version used in Safari 5.0.3, they share many features 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 or desktop integration. For more details on JavaScript development in AIR, refer to the HTML Developer's Guide for Adobe AIR.

For a list of new features in AIR 3 read Christian Cantrell's What's new in Adobe AIR 3.