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.
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.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.
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.targetis a reference to the constructor that was used when calling
- Inside of a normal function,
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.
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
This is primarily useful for browser extensions, to determine if an event was dispatched by a script running in the main world or not.
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.
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.
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.
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.
addAll method on
Cache instances takes an array of
RequestInfo objects, fetches them, and adds the response objects into the
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
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
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
workerStart property on
PerformanceResourceTiming instances is now supported.
Service worker updates
matchAll() method on
Clients instances now returns the clients in most-recently-focused order, matching the spec.
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.
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.