Software update: Google Chrome 66.0.3359.117
site-isolation-trial-opt-out as described here . Please report report any trial-specific issues to help us fix them before Site Isolation is launched more broadly.
The ImageBitmap Rendering Context for
Historically, rendering an image to a canvas and creating an ImageBitmap objects by avoiding memory duplication and rendering them more efficiently. This example shows how to use ImageBitmapRenderingContext . This essentially transfers ownership of an image’s pixels. This example does so from a blob to a but pixels can be moved between elements as well. Note that the blob is compressed so it is not a full copy in memory.
const image = await createImageBitmap (imageBlob);
const canvas = document.createElement ('canvas');
const context = canvas.getContext ('bitmap renderer');
context.transferFromImageBitmap (image);
canvas.toBlob ((outputJPEGBlob) => {
// Do something with outputJPEGBlob.
}, 'image / jpeg');
If this were done without createImageBitmap () the imageBlob would be decoded, which would cause jank. On the other hand createImageBitmap () is asynchronous which allows you to decode it completely before using it and avoiding jank. For example, a WebGL game could use this as gameplay progresses.
CSS Typed Object Model
Historically, developers wanting to manipulate CSS properties have had to manipulate strings before they convert it back to a typed representation. What made things worse when developers tried to read the value of CSS property in Javascript, this typed value was converted back to a string. In version 66, Chrome implements the CSS Typed Object Model (OM) Level 1 a part of Houdini for a subset of CSS properties . Typed in the form of a burden on the browser and by CSS values as typed in the objects rather than strings. Along with allowing the manipulative manipulation of values to attribute CSS properties, typed OM allows developers to write more maintainable and easy to understand. A letter example illustrates the point. Previously if I wanted to set the opacity of an element I could do this:
el.style.opacity = 0.3;
el.style.opacity === "0.3"
With CSSOM:
el.attributeStyleMap.set ("opacity", CSS.number ("0.3"));
el.attributeStyleMap.get ("opacity"). value === 0.3
The returned values above are of type CSSUnitValue which are easier to manipulate than strings.
Asynchronous Clipboard API
The new asynchronous clipboard API Provides a promise-based means of reading and writing to the clipboard. It’s simpler than the old execCommand ('copy') API released in Chrome 43 and integrates with the Permissions API . Future Chrome releases will also support copy / paste or richer types or data, including images. To get a taste of this API, do simple write and read operations with text.
try {
await navigator.clipboard.writeText ("Hello, clipboard.");
} catch {
console.error ("Unable to write to clipboard.");
}
Similarly, to read text back:
const data = await navigator.clipboard.readText ();
console.log ("From the clipboard:", data);
For more information, please read Unblocking Clipboard Access and check out our sample .
AudioWorklet
The legacy ScriptProcessorNode was asynchronous and required thread hops, which could produce unstable audio output. The AudioWorklet object provides a new synchronous JavaScript execution context which allows developers to programmatically control audio without additional latency and higher stability in the audio output. You can see example code in action along with other examples at Google Chrome Labs . In addition to AudioWorklet, other worklet API are being built. PaintWorklet was released in Chrome 65 / Opera 52. An AnimationWorklet is planned. ScriptProcessorNode will be deprecated some time after AudioWorklet ships.
Blink> Animation
The add and accumulate compositing operations are intended for building modularized animations. The add and accumulate keywords will be supported in Chrome soon. Until then, they will no longer throw errors. This is to maintain compatibility with Firefox and other implementations.
Blink> CSS
CSS has two new features.
- The mathematical expressions
calc (),min ()andmax ()are now supported in media queries, as required by the CSS Values and Units Module Level 4 specification. This change brings you in line with other types of rules where the functions are allowed anywhere a number is allowed. - Floating point values are now allowed in the
rgb ()andrgba ()functions.
Blink> Feature Policy
By default, deviceorientation deviceorientationabsolute and devicemotion events are now restricted to top-level document and same-origin subframes, the same as if feature policy for those features were set to 'self' . To modify this behavior, explicitly enable or disable the specific feature .
Blink> File API
The File API now results in a network error instead of 404 when attempting to read from invalid or non-existing blob URL.
Blink> Forms
HTML forms have two new features.