element.animate(), HTML Imports, and Object.observe()

Today’s Chrome Beta channel release includes several new developer features to help you make richer, more compelling web content and apps, especially for mobile devices. Unless otherwise noted, changes described below apply to Chrome for Android, Windows, Mac, Linux, and Chrome OS.

element.animate()

The forthcoming Web Animations JavaScript API lets you animate web content from script. The element.animate() function included in today’s Beta is the first part of the API to ship in Chrome: it makes it possible to create simple CSS Animations using JavaScript. This means that animations can be dynamically generated without paying a CSS style recalculation cost. Animations created in this way are also cancelable and provide guaranteed end events (in contrast, CSS Transitions only generate events if they cause a style change). Here's an example of how you'd use it:

elem.animate([
    {transform: 'translateX(0px)'},
    {transform: 'translateX(100px)'}
], 3000);

HTML Imports

HTML Imports, part of the Web Components standards umbrella, offer a way to include HTML documents in other HTML documents using <link rel="import">:

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

An HTML Import can contain CSS, JavaScript, HTML, or anything else an .html file can include. This means they provide a convention for bundling related HTML/CSS/JS (even other HTML Imports) into a single package, making them a fantastic tool for delivering Web Components to users.

Data-binding with Object.observe()

Object.observe() lets you observe changes to JavaScript objects. You can define a callback that observes multiple objects and will receive all changes to any objects in a single asynchronous call. This is especially useful for framework authors implementing data-binding.

// Let's say we have a model with data
var model = {};

// Which we then observe
Object.observe(model, function(changes) {

    // This asynchronous callback runs and aggregates changes
    changes.forEach(function(change) {

        // Letting us know what changed
        console.log(change.type, change.name, change.oldValue);
    });

});

Other updates in this release

Chrome no longer sends touchcancel on touch scroll, improving compatibility with other browsers and making it possible to add touch UI effects like pull-to-refresh without re-implementing scrolling and fling physics in JavaScript.
Some CSS properties such as scrollTop and offsetHeight will now return fractional values in browser-zoom situations.
The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases).
DevTools now faithfully emulates touch with mouse, allowing you to test touch interactions on Chrome for Android using the mobile emulation feature of DevTools.
Unprefixed CSS Transforms enables rich web content by allowing elements to be transformed in two-dimensional or three-dimensional space.

As always, visit chromestatus.com/features for a complete overview of Chrome’s developer features, and circle +Google Chrome Developers for more frequent updates!

Posted by Shane Stephens and Doug Stockwell, Animated Software Engineers