The new Opera 56 has arrived with major innovations regarding multitasking. It is based on Chromium 69. Also, we already installed it on our cross-browser testing platform, so that you can see how your web apps would look in it.

Cross-browser testing in Opera 55

Try Opera 56 in Browserling now!

New Features in Opera 56

Volume control in the video pop-up window

In 2016 Opera has announced the feature that lets you watch videos easily, while simultaneously do something else, by embedding the videos in a pop-up window. What Opera 56 adds now is a volume control integrated in the pop-up window for easier, hence faster access.

Opera 56 Volume Control

Scrolling to the top of the page by clicking the active tab is now configurable

..or should we say - turn offable. Many users requested that the feature has to be configurable. Now you can decide whether clicking on the active tab will scroll to the top of the page. Clicking again would scroll to the previous position as you know. To turn this feature on or off go to Settings > Advanced > Browser > User Interface, you won't miss to see it.

New zoom level indicator

Easier bug reporting

Now you can report any issues with the browser by going to O Menu > Help. There you will find the report an issue section. Clicking on it will redirect you to Opera's bug report wizard.

Nicer About page

About pages always somehow make an impression. Opera team already seems to know this and as per Opera 56, the About page has been nicely redesigned. If you wish to check for an available update to your Opera browser, go to Update and Recovery… in the O Menu for Windows and Linux and Opera in the toolbar for Mac.

Opera 56 about dialog

Categories in Settings page

Opera 56 separates the settings into four categories:

  1. Basic
  2. Privacy and security
  3. Features
  4. Browser

That way you can navigate to the options you look for easier than before.

New Developer Features in Opera 56

CSS changes in Opera 56

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.

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.

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.

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.

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 changes in Opera 56

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.

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.

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 Changes in Opera 56

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");

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() andflatMap() on arrays, allowing code to easily expand sub-arrays in place.

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.

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.


Happy cross-browser testing in Opera 56!