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.
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.
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.
Categories in Settings page
Opera 56 separates the settings into four categories:
- Privacy and security
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
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
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
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.
“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
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 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 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");
The official way to create Touch objects is through the
Touch() constructor so
document.createTouchList() had no use and is now removed.
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.
flatMap() 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
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!
Email this blog post to your friends or yourself!
Enter a URL to test, choose platform, browser and version, and you'll get a live interactive browser in 5 seconds!