What’s new in Chromium 50 and Opera 37
Opera 37 (based on Chromium 50) for Mac, Windows, Linux is out! To find out what’s new for users, see our Desktop blog. Here’s what it means for web developers.
ES6: RegExp
Unicode flag
ES6 specifies the u
flag which enables more Unicode-friendly features and behavior in regular expressions. For example, it allows using astral symbols in character class ranges:
// Match any symbol from U+1F4A9 PILE OF POO to U+1F4AB DIZZY SYMBOL.
const regex = /[💩-💫]/u; // Or, `/[\u{1F4A9}-\u{1F4AB}]/u`.
console.log(
regex.test('💨'), // false
regex.test('💩'), // true
regex.test('💪'), // true
regex.test('💫'), // true
regex.test('💬') // false
);
For more information on the effects of the u
flag, see “Unicode-aware regular expressions in ECMAScript 6”.
ES6: more well-known symbols
Five more ECMAScript well-known symbols have been implemented:
Function.prototype[Symbol.hasInstance]
, used in theinstanceof
operator.RegExp.prototype[Symbol.match]
, used to brand an object asRegExp
-like, and used inString.prototype.match
;RegExp.prototype[Symbol.replace]
, used inString.prototype.replace
;RegExp.prototype[Symbol.search]
, used inString.prototype.search
;RegExp.prototype[Symbol.split]
, used inString.prototype.split
.
These last four symbols act as hooks for RegExp
subclasses to change the semantics of matching. By overriding MyRegExpSubclass.prototype[Symbol.match]
etc. developers can change how the subclass behaves with respect to String.prototype.match
and similar methods.
Bold emoji on OS X
Previously, emoji with font-weight: bold
applied to them failed to render in Chromium on OS X. This is now fixed. 🙌🎉
<link rel="preload" as="…">
The preload
link relation makes it possible to define custom loading logic without suffering the performance penalty that script-based resource loaders incur. It can be combined with the as
attribute to signal to the browser what kind of resource is being preloaded. This enables various optimizations that <link rel="prefetch">
or preload
’s predecessor <link rel="subresource">
don’t offer. See Yoav Weiss’ excellent article for more information.
CSS column-fill
When using multi-column layouts, the CSS column-fill
property indicates whether columns should be balanced or not. If they are balanced, each column gets similar amounts of content inside. If they are not balanced, each column is filled to the height of the multicol container, until all the content is displayed. The spec contains some examples with visualizations.
Canvas updates
<canvas>
element instances now support the toBlob()
method alongside the toDataURL()
method. toBlob()
is typically more efficient than toDataURL
, as it enables you to work with the encoded binary data directly rather than with a Base64-encoded string.
The global createImageBitmap()
method decodes an image in the background and returns an ImageBitmap
which you can draw onto a <canvas>
in the same way you would an <img>
element, another canvas, or a video. See Paul Lewis’ write-up for more details.
DOMTokenList
validation
It’s now possible to programmatically detect support of values for HTML attributes that are backed by DOMTokenList
instances in JavaScript. Currently, those HTML attributes are the following:
To test a value, just use .supports(value)
on the DOMTokenList
instance. For more information, check out the Google Developers blog post.
FormData
updates
The FormData
interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using XMLHttpRequest
or fetch
. Previously, FormData
objects had a single append()
method, and were thus write-only. The spec has now added has()
, get()
, getAll()
, delete()
, set()
, entries()
, keys()
, values()
, forEach()
and Symbol.iterator()
methods to allow inspection, iteration, and modification. Check out the demo.
HTMLMediaElement.prototype.play()
returns a promise
The play
method on <video>
or <audio>
element instances now returns a promise. If playback succeeds, the promise is fulfilled, and if playback fails, the promise is rejected along with an error message explaining the failure. For more details, check out Jeff Posnick’s blog post or view the demo.
Presentation API updates
Support for the statechange
event on PresentationConnection
instances has been removed since it’s no longer part of the spec. On the other hand, the message
, connect
, close
, and terminate
event are now implemented.
Web Animations API updates
This release introduces the following Web Animations API changes to improve interoperability with other browsers and to improve spec compliance:
Animation.prototype.id
cancel
events- Deprecation of dashed names as keys in keyframes (to be removed in the next release)
- State change for the
pause()
method
For details, see Alex Danilo’s write-up about these features.
Web Audio API updates
Automations for the BiquadFilter
node now run at a-rate (updated every frame) instead of at k-rate (updated every rendering quantum of 128 frames). This change matches the spec.
Push Notifications on Opera for Android
Opera for Android now supports push notifications.
Sequential focus navigation starting point
The sequential focus navigation starting point is how the HTML spec defines where browsers should start to search for focusable areas when pressing Tab or Shift+Tab while there is no focused area. This is now implemented according to the spec.
X25519 for TLS
Chromium 50 brings support for X25519, the Diffie-Hellman primitive over Curve25519, to TLS. When compared to P-256, the most commonly used curve in TLS today, it admits simpler, faster implementations that are more naturally resistant to side-channels. Servers may negotiate X25519 for ECDH instead of existing curves.
Deprecated or removed features
The Geolocation API no longer works on insecure origins. Use HTTPS instead.
The use of the application cache API on insecure origins has been deprecated and will be removed in a future release. Use HTTPS and service workers instead.
Support for the insecure TLS fallback mechanism has been removed. This does not remove support for older versions of TLS — it just prevents attackers from downgrading the connection to use outdated, insecure ciphers. If your server is affected by this change, it does not implement TLS correctly. Consider upgrading to TLS 1.2 — all ciphers in prior versions have known problems.
The SVG zoom
event was never fully implemented in Chromium, causing false positives in feature detection scripts. It has now been deprecated and its removal is planned for Chromium 52 / Opera 39.
Support for the non-standard -webkit-background-composite
CSS property has been removed.
The WebRTC RTCPeerConnection
instance methods createOffer()
and createAnswer()
now require an error handler as well as a success handler. Previously it was possible to call these methods with only a success handler. This non-standard behavior has been deprecated.
Support for <link rel="subresource">
has been removed. It never worked as intended, and no other browser engines implemented it. Use the preconnect
, prefetch
, preload
, or prerender
link relations instead, or use a service worker in combination with the Cache API for more fine-grained control.
The non-standard KeyboardEvent.prototype.keyLocation
alias has been removed. To disambiguate between keys that are on multiple places on a keyboard, like numbers and Enter, use KeyboardEvent.prototype.location
instead.
Support for document.defaultCharset
has been removed.
Object.observe()
has been removed from the ECMAScript spec and is now no longer supported in Chromium. Use the Proxy
API to observe objects instead.
The SVGElement
instance properties offsetParent
, offsetTop
, offsetLeft
, offsetWidth
, and offsetHeight
has been removed. They are now only supported on HTMLElement
s, matching the spec. If you need similar functionality for SVG elements, use getBoundingClientRect()
instead.
The XMLHttpRequestProgressEvent
interface has been removed, together with the position
and totalSize
properties. Use the ProgressEvent
interface with the loaded
and total properties
instead.
The Google Developers blog has more details on some of these feature removals/deprecations.
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.