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.
<link rel=preconnect>
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 callingnew
. - Inside of a normal function,
new.target
isundefined
.
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)
DOMException
s 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.
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.