What’s new in Chromium 67 and Opera 54

Opera 54 (based on Chromium 67) 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.

Generic Sensors

Sensor data is used in many native applications to enable experiences like immersive gaming, fitness tracking, and augmented or virtual reality. This data is now available to web applications using the Generic Sensor API. The Generic Sensors API provides a foundation for sensors in the form of a base Sensor interface and associated abstract operations. Concrete sensors are provided on top of this specification. The following are some of the concrete sensors:

Accelerometer: A sensors that measures (proper) acceleration (rate of change of velocity).
Gyroscope: A sensor that measures orientation or angular velocity.
Orientation Sensor: A sensor that fuses the two above sensors to provide a more accurate orientation measurement.
Motion Sensors: This sensor includes a magnetometer as well as the accelerometer and the gyroscope.

Additional resources:

Intel’s collection of demos (sample code).
Sensors introduction on Google Developers.

Other Features in this Release

SVG

SVG2 requires <foreignObject> to be a stacking context. Making <foreignObject> a stacking context means HTML content within a <foreignObject> will integrate better with other content.

DOM

DOMTokenList.replace() now returns a boolean value indicating if the replacement was successful or not. This allows code that for instance takes different paths depending on whether a replacement occurred, to avoid an extra condition using contains().

HTML > Custom Elements

Custom Elements can now extend HTML elements to inherit the semantics of native, built-in elements. This avoids reimplementing built-in functionality such as accessibility, semantics and JavaScript methods/properties.

Input

Mouse events (mousedown, auxclick, mouseup) will now be dispatched for back and forward buttons on mice with more than four buttons. This allows back and forward mouse buttons to be prevented by applications, such as games, that wish to override them.

On Windows the right-hand Alt key serves as AltGraph (ISO-Level-3-Shift) on some layouts, such as many European language layouts, to allow generating additional printable-characters. Internally the key generates Ctrl+Alt modifiers, so that Opera reports all of Control, Alt and AltGraph in the flags for these keys. In this change, Opera distinguishes AltGraph from Ctrl+Alt under Windows for consistency with these modifiers on other platforms.

For developers this removes an edge-case from keyboard event modifier handling. If an app handles keydown/keypress/keyup to implement shortcuts, it will no longer need workarounds to cope with certain (mainly European) keyboard layouts. For example, if an app uses Ctrl+# as a shortcut then previously the app would need to check for both Ctrl, and for AltGraph, otherwise French users would not be able to use it. This change applies to Windows only.

JavaScript

JavaScript now supports a numeric primitive for arbitrary precision integers. Previously, numbers in JavaScript were represented as double-precision floats, thus giving them limited precision. Using the BigInt() function and ‘n' suffix on numeric literals you can store and operate on large integers beyond the safe integer limit for numbers.

Layout

Formatting contexts will now behave exactly like floats do when they are positioned. In other words, they no longer consider the shape-outside property of the float when positioning is determined, and are instead positioned according to their margin box. The new behavior can be seen in this example by changing the height of the flex class. This also affects how new formatting contexts are sized and positioned.

Loading

Client Hints enable origins to receive device-specific preferences in the HTTP request headers. The Accept-CH-Lifetime header field adds a client hint that allows origins to persist their opt-in policy for a specified period so they can receive client hints on navigation requests. Additionally, on the first page load, this feature provides hints for all subresources of the page.

For more on Client Hints, see Automating Resource Selection with Client Hints by Ilya Grigorik.

Streams

Stream API support has been extended with TransformStream. Transform streams enable transforming data in stream form. It can for example be used to pipe between a ReadableStream and a WritableStream. The following example uses a TransformStream to decode text received in a streaming response body:

function textDecodeTransform() {
  const decoder = new TextDecoder();
  return new TransformStream({
      transform(chunk, controller) {
        controller.enqueue(decoder.decode(chunk, { stream: true }));
      }
  });
}

fetch(url).then(response => {
  // response.body is a stream of Uint8Array chunks.
  // But if we want chunks of text:
  const stream = response.body.pipeThrough(textDecodeTransform());
  // …
});

Shadow DOM

The <slot> element can now participate in a flat layout tree, with UA style display: contents. Before this change, a CSS selector would not match a <slot> element. Now selectors match and children will inherit from the <slot> element.

Deprecations and Interoperability Improvements

HTTP-Based Public Key Pinning is deprecated

HTTP-Based Public Key Pinning (HPKP) was intended to allow websites to send an HTTP header that pins one or more of the public keys present in the site’s certificate chain. It has very low adoption, and although it provides security against certificate misissuance, it also creates risks of denial of service and hostile pinning.

To defend against certificate misissuance, web developers should use the Expect-CT header, including its reporting function. Expect-CT is safer than HPKP due to the flexibility it gives site operators to recover from configuration errors, and due to the built-in support offered by a number of CAs.

We expect to remove this in Opera 56 (Chromium 69).

AppCache deprecated in Non-secure Contexts

AppCache over HTTP is deprecated. AppCache is a powerful feature that allows offline and persistent access to an origin. Allowing AppCache to be used over non-secure contexts makes it an attack vector for cross-site scripting hacks. Removal is expected in Opera 56 (Chromium 69).

Layout / CSS

Two Webkit-prefixed CSS properties were been removed in this release - -webkit-box-flex-group and -webkit-box-lines. Percent (%) values are no longer accepted by the -webkit-line-clamp property.

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.