What’s new in Chromium 66 and Opera 53

Opera 53 (based on Chromium 66) for Mac, Windows, Linux is out! To find out what’s new for users, see our Desktop blog post. Here’s what it means for web developers.

New ImageBitmap rendering context for <canvas>

The new rendering context allows for more efficient rendering of an image to a canvas. Instead of creating an <img> element and rendering it to the canvas, which causes multiple copies of the image to be stored in memory, an ImageBitmap object can now be displayed in the canvas directly, effectively by transferring ownership of the pixel data to the canvas element.

const image = await createImageBitmap(imageBlob);
const canvas = document.createElement('canvas');
const context = canvas.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

Since the source image can be fetched and decoded asynchronously, this can be used in e.g. a WebGL game to load textures on the fly, without jank.

CSS Typed Object Model

The CSS Typed Object Model exposes the values of CSS properties to scripts as typed JavaScript objects, instead of as CSS formatted strings. This makes it more straight-forward to write code that reads and manipulates CSS properties, and the code will typically execute faster.

Opera 53 implements the object model for a subset of CSS properties.

Asynchronous clipboard API

A new asynchronous clipboard API has been added that is simpler to use than the old document.execCommand("copy") API, and that integrates with the Permissions API.

With this new API, copying some text to the clipboard is as simple as

try {
    await navigator.clipboard.writeText("some text");
} catch {
    console.error("Could not copy text to the clipboard!");
}

and reading text from the clipboard is equally easy:

const text = await navigator.clipboard.readText();
console.log("Clipboard text:", text);

For more information about the new API and how to use it, see Unblocking Clipboard Access.

AudioWorklet

The AudioWorklet API provides a synchronous JavaScript execution context that allows developers to programmatically control audio output with lower latency and higher stability than the legacy ScriptProcessorNode API, which will be deprecated eventually.

Demos and other AudioWorklet resources can be found at Google Chrome Labs.

Other web platform features in this release

Blink > Animation

  • To maintain compatibility with other implementations, the add and accumulate keywords will not throw errors. They will soon be supported by Opera.

Blink > CSS

  • The calc() expression is now supported in media queries.
  • The rgb() and rgba() functions now allow floating point values.

Blink > Feature Policy

  • The deviceorientation, deviceorientationabsolute and devicemotion events are now by default restricted to top-level documents and same-origin frames, as if the feature policy for those features was set to self.

Blink > Fetch API

  • The Request object now supports the keepalive flag, which can be set when constructing the object, and which allows a fetch to continue after the tab is closed.

  • The new AbortSignal and AbortController makes it possible to cancel fetches.

      const controller = new AbortController();
  const { signal } = controller

  // Start a fetch controlled by the above controller.
  fetch(url, { signal }).then(...);

  // Abort the fetch.
  controller.abort();

Blink > File API

  • Attempting to read from an invalid or non-existing Blob URL now results in a network error instead of a 404 error.

Blink > Forms

  • The <textarea> and <select> elements now support the autocomplete attribute.
  • Toggling a mutable checkbox now triggers a sequence of three events: click, input and change, in that order. Previously, the input event was not fired.

Blink > Fullscreen

  • If a page in fullscreen mode uses window.focus() to switch focus to another page, fullscreen mode is exited.

Blink > GetUserMedia

Blink > JavaScript

  • The Function.prototype.toString() function now returns the function’s source code exactly as it was written, including white-space and comments.
  • JSON is now a syntactic subset of ECMAScript, which allows line separator (U+2028) and paragraph separator (U+2029) characters in string literals.
  • A try/catch statement can now omit the binding parameter. In other words, if the actual exception is not interesting, the short form try { ... } catch { ... } can be used.
  • String.prototype.trimStart() and String.prototype.trimEnd() are now supported for trimming leading and trailing white-space characters from strings, complementing the existing String.prototype.trim(). The non-standard trimLeft()/trimRight() functions remain as aliases for backwards compatibility.
  • Array.prototype.values() is now supported. It returns an iterator over the values at each index in the array.

Blink > Layout

  • The grid- prefix has been removed from the CSS gutter properties grid-gap, grid-row-gap and grid-column-gap, whose names now become just gap, row-gap and column-gap.

    The default value is normal for all three. The old names remain as aliases for the new names. The property column-gap already existed as part of CSS Multi-column Layout.

  • Elements with a transform property and with the display property set to table-row, table-row-group, table-header-group, table-footer-group, table-cell or table-caption, are now containing blocks for fixed position elements.

Blink > Media

  • The autoplay attribute is now only honored when one of the following conditions are met:

    • the media will play muted or has no audio,
    • the user has interacted with the site in the current session, before loading the page with the media, or
    • (on desktop) if the user has previously shown an interest in media on the site.

Blink > ServiceWorker

  • A service worker can no longer respond to a request whose mode is same-origin with a response whose type is CORS. This is a security measure recently added to the Fetch specification.
  • FetchEvent.clientId returns an empty string instead of null when it isn’t set, which can be the case for instance during a navigation request.

Blink > WebRTC

  • The RTCRtpSender object now supports the dtmf attribute, replacing the RTCPeerConnection.createDTMFSender() function, which will be deprecated eventually.

Deprecations and Interoperability improvements

Blink > CSS

  • The object-position and perspective-origin properties no longer accept three-part values such as top right 20%. Valid position values must have 1, 2 or 4 parts.

    This also applies to basic shapes and gradients.

Blink > HTML

  • ImageCapture.prototype.setOptions() has been removed following a change in the specification.

Blink > Input

  • Document.prototype.createTouch() and Document.prototype.createTouchList() have been removed following changes in the specification.

Blink > Web Audio

  • Automatic dezippering of AudioParam.prototype.value changes has been removed following a change in the specification. To smooth the value of AudioParam changes, use AudioParam.prototype.setTargetAtTime().

What’s next?

If you’re interested in experimenting with features that are in the pipeline for future versions of Opera, we recommend following our Opera Developer stream.