Chromium Blog: Chrome 36 Beta: element.animate(), HTML Imports, and Object.observe()

Chromium Blog

News and developments from the open source browser project

Chrome 36 Beta: element.animate(), HTML Imports, and Object.observe()

Thursday, May 22, 2014

Betaelement.animate()Web Animations JavaScript APIa CSS style recalculation costelem.animate([ {transform: 'translateX(0px)'}, {transform: 'translateX(100px)'} ], 3000);
HTML ImportsHTML ImportsWeb Components standards umbrella<link rel="import"><head> <link rel="import" href="/https/blog.chromium.org/path/to/imports/stuff.html"> </head>
Data-binding with Object.observe()Object.observe()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.

The will-change property allows developers to give a hint about which properties are about to change, which can help reduce delays at the beginning of animations in some cases.