What’s new in Chromium 69 and Opera 56

Opera 56 (based on Chromium 69) 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.

In this release there is mostly incremental changes, but we are looking forward to seeing what people can do with the new CSS conical gradient support. Below is a quick overview of changes. Follow the links for more details, specifications and examples.

CSS

CSS > Conic gradients

The web already has linear gradients where the colour depends on the distance to a line, and radial gradients where the colour depends on the distance to a point. Now it also gets conic gradients where the colour depends on the angular distance to a line through the new conic-gradient function.

Example:

CSS > Logical margin, paddings and border properties

Blink, the Chromium/Opera browser engine, has gotten some new CSS properties that adapt to text direction. So padding-inline-start will apply to either left or right depending on what side you start reading. Other examples of newly added properties are border-block-end-color, margin-inline-start and padding-inline-end.

CSS > Scroll Snap

CSS Scroll Snap allows the page author to determine what is suitable places in a document to snap to. This could be used to avoid cutting off content or to align content that is as large as the viewport correctly. This is a common problem in a tile based user interface.

Previously this problem has been solved through JavaScript but doing it in CSS allows a much smoother user experience.

CSS > Display cutouts

“Cutouts” is an area on a mobile phone where only part of the screen is available to the web page, like the notch at the top of some phones. With the display cutout support, it becomes possible to layout content around the cutout in an adaptive way.

In CSS the necessary data can be extracted from the env function. See the specification for details.

CSS > Grid Layout

The interpretation of height percentages for row tracks and gutters will change to be compliant with the specification in the next release, but already in Opera 56 you will see warnings if you are using height calculations that might change.

Media

Media > OffscreenCanvas

OffscreenCanvas is a canvas intended to be used in workers. Sometimes painting requires heavy calculation more suitable for a webworker and then OffsceenCanvases will come in handy. They have almost the same API as ordinary canvases so moving code to a worker should be easy.

Media > stalled removed from HTMLMediaElements

There used to be an event stalled that fired for Media Source Extension (MSE) players if no data had been added for 3 seconds. This was not useful since the media player can be fine receiving data less often depending on buffer sizes and transfer chunk sizes. The event has now been removed.

Media > EME (Encrypted Media Extensions)

It is now possible for a web developer to query the browser about what encryption schemes it supports through EME. This is useful because there is no general agreement across all platforms about what encryption schemes should be supported.

DOM

DOM > Element.toggleAttribute() added

With Element.toggleAttribute an attribute can be removed if it exists or added if it does not. This is especially useful for boolean attributes such as disabled or readonly. Example:

// Switch disabled mode of "the button".
var theButton = document.getElementById("the-button");
theButton.toggleAttribute("disabled");

DOM > document.createTouchList() removed.

The official way to create Touch objects is through the Touch() constructor so document.createTouchList() had no use and is now removed.

ReportingObserver

Through the ReportingObserver API it becomes possible to collect information such as deprecation warnings and manually (through scripts) handle them. For instance by sending them to a server.

JavaScript Array.prototype.flat() / flatMap()

V8, the JavaScript engine, now has support for flat() and flatMap() on arrays, allowing code to easily expand sub-arrays in place.

x = [ [1, 1], [2, 3], 5 ];
y = x.flat(); // y = [ 1, 1, 2, 3, 5 ]

Using flatMap() allows code to write a function that controls how each array element is expanded.

Keyboard Map API

The Keyboard Map API allows web applications to get a descriptive string for different keyboard keys. This can be of use when telling a user what key to press, in for instance a game.

Example from the specification:

navigator.keyboard.getLayoutMap().then(function(map) {
    var keyUp = map.get("KeyW");
    showUserDialog("Press " + keyUp + " to move up.");
});

Network Info API / HTTP Client Hints

Approximate network information is now available through both JavaScript and HTTP Client Hints. More details can be found on the Chromium feature status page.

Web Locks API

Web Locks allows better synchronization between tabs that share the same resource, something that has become more important as more APIs are asynchronous. This is most useful when storage resources such as IndexedDB and WebSQL are used in a non-atomic way, but can be used for any purpose.

Example from the link above:

navigator.locks.request('my_resource', async lock => {
   // The lock has been acquired.
   await do_something();
   await do_something_else();
   // Now the lock will be released.
});

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.

You can also see features that we and other Chromium/Blink contributors are working on by looking at the Chrome Platform Status page.