Opera 33 released

Opera 33 (based on Chromium 46) for Mac, Windows, and Linux and Android is out! To find out what’s new for users, see our Desktop and Mobile blogs. Here’s what it means for web developers.

The Resource Hints standard defines <link rel="preconnect" href="…"> as a hint that the browser should predictively open a connection to the supplied server for resources that will be needed later in the loading process.

<iframe sandbox="allow-popups-to-escape-sandbox">

The allow-popups-to-escape-sandbox flag for <iframe sandbox="…"> allows a sandboxed document to spawn new windows without forcing the sandboxing flags upon them, hence creating a clean browsing context. For example, a third-party advertisement can be safely sandboxed without forcing the same restrictions upon a landing page. A demo is available.

<iframe sandbox="allow-scripts allow-modals">

From now on, sandboxed frames block modal dialogs (such as those caused by window.alert(), window.confirm(), window.print(), and window.prompt()) by default to prevent them from popping up confusing messages to users.

If you really want to allow modal dialogs inside a sandboxed frame, add allow-modals to its sandbox attribute. A demo is available.

ES6 new.target

new.target is an implicit parameter that all functions have. It is to constructor calls as this is to method calls:

  • Inside of a constructor, new.target is a reference to the constructor that was used when calling new.
  • Inside of a normal function, new.target is undefined.

This is useful for distinguishing at runtime whether code is being executed as a constructor or as a function. new.target may also be used as a way to determine the specific subclass that was used with new from within a superclass constructor. A demo is available.

ES6 spread operator

The ES6 spread operator ... turns the elements of an array into the arguments of a function call or into elements of another array.

// Date of the Opera 33 release.
new Date(...[2015, 9, 20]);

// Or…
const dateParts = [2015, 9, 20];
new Date(...dateParts);

For more information, read Axel Rauschmayer’s explanation of the spread operator.

new DOMException(message, errorName)

DOMExceptions can now be programmatically created as follows:

throw new DOMException('The operation could not be completed', 'AbortError');

The first parameter is a custom error message; the second parameter is a value taken from the table of DOMException error names.

Trusted events

The isTrusted read-only property of an Event instance is true when the event was generated by a user action such as mouse click, and false when the event was scripted or invoked via dispatchEvent.

This is primarily useful for browser extensions, to determine if an event was dispatched by a script running in the main world or not.

A demo is available.

history.scrollRestoration

By default, browsers restore the scroll position when a user traverses history. This behavior works well for document-style web sites but it is often not appropriate for single-page web applications where the page content may be reconstructed (often asynchronously) upon navigation and where the application wants to control the details of visual transition between UI states.

The new history.scrollRestoration API makes it possible to disable this default scroll restoration behavior, as follows:

history.scrollRestoration = 'manual';

This leaves the web developer in full control over any scroll changes that may be required when a user traverses the app’s history.

For more details, see Paul Lewis’ blog post.

WebRTC bufferedamountlow event

The bufferedamountlow event makes it possible to monitor WebRTC data channel buffers. This allows pages to use WebRTC data channels for high-throughput applications more efficiently and conveniently, by removing the need to use timer-based polling for output buffer management.

CSS.escape(string)

CSS.escape(string) serializes string as a CSS identifier. This enables developers to easily and securely do things like escaping a string for use as part of a selector. Check out the demo, and use the polyfill to maintain compatibility with browsers that don’t implement this yet.

CSS intrinsic sizing

The CSS Intrinsic & Extrinsic Sizing Module extends the CSS sizing properties with the following keywords:

These keywords represent content-based “intrinsic” sizes and context-based “extrinsic” sizes, allowing CSS to more easily describe boxes that fit their content or fit into a particular layout context. A demo is available.

Cache API updates

The Cache API as available in window contexts, web worker contexts, and service workers contexts is now restricted to secure origins (such as HTTPS) only.

The addAll method on Cache instances takes an array of RequestInfo objects, fetches them, and adds the response objects into the Cache object.

Fetch API updates

Chromium 44 / Opera 31 added support for Request.prototype.context which has since been dropped from the spec. To match the spec, support for this feature has been removed in Chromium 46 / Opera 33 after being deprecated in Chromium 45 / Opera 32.

The Fetch API also defines a redirect setter on Request instances that tells the browser how to treat redirect responses (i.e. HTTP status codes 301, 302, 303, 307, or 308). This setter is now supported. It accepts the following values:

  • 'follow' — follow any redirect responses;
  • 'error' — treat a redirect response as an error;
  • 'manual' — don’t follow the redirect, and return an opaque-redirect filtered response which wraps the redirect response.

HTTP Client Hints

DPR, Width, and Viewport-Width hints enable proactive content negotiation between client and server, enabling automated delivery of optimized assets — e.g. auto-negotiating image DPR resolution, image size, and other optimized assets based on signals such as the client’s viewport width. For more details, see the list of use cases.

Note that HTTP Client Hints can be used alongside the <picture> element to automate resolution switching, simplify art direction, and automate delivery of variable-sized images.

HTTP Public Key Pinning reporting

HTTP Public Key Pinning, or HPKP, is a standard that allows websites to send an HTTP header instructing the browser to remember (or “pin”) parts of its TLS certificate chain. The browser then refuses subsequent connections that don’t match the pins that it has previously received.

HPKP reporting can be used to detect misconfigurations as you’re rolling out HPKP. The Google Developers blog has a very good explanation of how this works.

Performance Timeline API updates

The Performance Timeline APIs (performance.*) were previously only available in window contexts. Now they are available in web worker contexts and service workers contexts as well.

Resource Timing-specific extensions now work without the webkit prefix.

Additionally, the workerStart property on PerformanceResourceTiming instances is now supported.

Service worker updates

The matchAll() method on Clients instances now returns the clients in most-recently-focused order, matching the spec.

The update() method on ServiceWorkerRegistration instances (which shipped in Chromium 45 / Opera 32) pings the server for an updated version of this service worker registration. In Chromium 46 / Opera 33, it now returns a promise that resolves with undefined if the operation completed successfully or if there was no update, and rejects if update failed. If the new worker ran but installation failed, the promise still resolves.

Proprietary codecs in Web Audio API

Opera now supports proprietary Web Audio API codecs. It is now possible to decode MP3s, for example, if your system supports it.

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.