What’s new in Chromium 52 and Opera 39

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

ES2016 exponentiation operator

ES2016 introduces an arithmetic operator equivalent of Math.pow(base, exponent), in which the lefthand-side expression serves as the base value, and the righthand-side expression serves as the exponent.

4 ** 3;
// → 64

let value = 4;
value **= 3;
value;
// → 64

Fetch API: Response construction with ReadableStream

It’s now possible to construct your own ReadableStream instances and to use them as bodies for Response objects, including from within service workers. This functionality is part of the Fetch standard. See Jeff Posnick’s write-up for details, or Jake Archibald’s in-depth blog post on streams for even more info.

Fetch API: referrer policy

Requests made using the Fetch API can use a specific referrer policy, which affects the value of the Referer HTTP header that’s sent to remote servers. This can be done by adding a referrerPolicy property to the options object passed to fetch, which accepts the following values:

  • 'no-referrer'
  • 'no-referrer-when-downgrade'
  • 'origin'
  • 'origin-when-cross-origin'
  • 'unsafe-url'

See Ehsan Akhgari’s write-up for a straight-forward explanation of these values.

fetch(url, { 'referrerPolicy': 'no-referrer' })
	.then(function(response) {
		// Do something with the `response`…
	});

A demo is available.

2D canvas filters

CanvasRenderingContext2D instances now support the filter property that applies effects to primitives drawn to the canvas. The filter value is parsed in the same way as CSS filters.

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
context.filter = 'saturate(6.3)';

createImageBitmap options

An ImageBitmapOptions object is an options object that can be passed to createImageBitmap().

createImageBitmap(image, options).then(function(response) {
	// Do something with the `response`…
});

The available options are:

  • colorSpaceConversion indicates whether the image is decoded using color space conversion. Either 'none' or 'default' (default). The value 'default' indicates that implementation-specific behavior is used.
  • imageOrientation indicates whether the image is presented as-is or flipped vertically. Either 'flipY' or 'none' (default).
  • premultiplyAlpha indicates that the bitmap color channels are premultiplied by the alpha channel. One of 'none', 'premultiply', or 'default' (default).
  • resizeWidth indicates the new width.
  • resizeHeight indicates the new height.
  • resizeQuality specifies an image scaling algorithm. One of 'pixelated', high', 'medium', or 'low' (default).

Invalid <track kind> values are no longer treated as subtitles

Invalid values for <track kind> were previously treated as 'subtitles'. This means that any new values would be treated as subtitles by old browsers. Chromium now uses 'metadata' instead as the “invalid value default”, to avoid browsers showing <track>s with unrecognized values.

HTMLMediaElement.prototype.srcObject

The srcObject property on HTMLMediaElement instances enables associating a MediaStream to a media element using a simple assignment. Previously, achieving this required first obtaining a URL associated to the MediaStream, and then associating this URL to the media element.

Currently, only MediaStream objects are accepted because it is the only type currently supported by other major browsers, but Chromium aims to support more types in the future. (Per the spec, a MediaProvider can be a MediaStream, a MediaSource, or a Blob.)

Web Audio updates

AudioParam instances now have readonly minValue and maxValue properties that specify the minimum and maximum values the AudioParam can have. The value is clamped to lie in this range

Automation methods for the position and orientation coordinates of PannerNode and the position{X,Y,Z}, up{X,Y,Z}, and forward{X,Y,Z} vectors of AudioListener are now available. This allows smooth changes in the coordinates using AudioParam methods.

Chromium now implements the reduction property on DynamicsCompressorNode instances as a readonly float, matching the spec. Previously, the value was represented as an AudioParam.

IDBKeyRange.prototype.includes()

The includes method on IDBKeyRange instances tests whether or not a key exists within the bounds of the range. Until all other browsers support this natively, a polyfill can be used.

WebRTC: Storing RTCCertificates in IndexedDB

RTCCertificates are self-signed certificates used in the DTLS handshake when setting up a connection with an RTCPeerConnection. Chromium now allows web applications to store RTCCertificates by implementing the structured clone algorithm. This means RTCCertificates can be saved and loaded from an IndexedDB database, saving the cost of generating new certificates for new sessions.

Performance Observer

The Performance Observer API is essentially a streaming interface that can be used to gather low-level timing information asynchronously, as it’s gathered by the browser. Marc Cohen’s write-up does a great job explaining it.

Pause event loop during modal dialogs

When using alert(), confirm() or onbeforeunload, Chromium’s old behavior was to block JavaScript while waiting for the result, but to allow all declarative animations to continue. As of this update, Chromium makes all main-thread tasks (such as <marquee> and CSS 2D animations) also pause during this interval.

Here’s a demo showing the impact of alert() on a CSS 2D animation.

CSS containment

The CSS contain property indicates that an element and its contents are, as much as possible, independent of the rest of the document tree. This allows the browser to recalculate layout (contain: layout), style (contain: style), paint (contain: paint), size (contain: size), or any combination of them for a limited area of the DOM and not the entire page. For more details, check out Paul Lewis’ explanation.

CSS font-variant-caps & font-variant-numeric

The CSS properties font-variant-caps and font-variant-numeric are now supported.

meter { -webkit-appearance: none; }

Previously, there was no way to completely disable the browser’s default rendering of <meter> elements and to restyle them using CSS. As of Chrome 52 / Opera 39, this finally became possible using -webkit-appearance: none.

New CSS Flexbox behavior for absolutely-positioned children

The static position of absolutely-positioned children used to be set as though they were a 0×0 flex item. The CSS Flexible Box Layout spec has since been updated to take such children fully out of flow and to set the static position based on align and justify properties. Check out the demo.

Alternative Services

Alternative Services allow an origin serving an http:// or https:// resource to nominate additional origins that the client can choose to request the resource from instead when making subsequent requests. This can be used, for example, as a protocol upgrade mechanism, for connection pooling, or for load balancing.

This is done through the Alt-Used HTTP header.

For example, if the resource at https://origin.example.com/foo returns the following response headers:

Alt-Used: https://alternate.example.net

…and https://origin.example.com/bar is requested afterwards, then the browser may fetch either https://origin.example.com/bar or https://alternate.example.net/bar.

CSP3 strict-dynamic

The 'strict-dynamic' source expression allows scripts loaded via nonce- or hash-based whitelists to load other scripts. Deploying CSP is now simpler than ever before. A demo is available.

Deprecated and removed features

X-Frame-Options is now ignored when present inside a <meta> tag, e.g. <meta http-equiv="X-Frame-Options" contents="DENY">, matching the spec. Use an HTTP header (X-Frame-Options: DENY) instead.

A non-standard and little-used variant of the postMessage() API is being deprecated, specifically postMessage(message, transferables, targetOrigin). Use postMessage(message, targetOrigin, transferables) instead.

The ended event & property and the onended event handler have been removed from the Media Capture and Streams spec and are now being deprecated in Chromium.

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.