What’s new in Chromium 52 and Opera 39

综合技术 Dev.Opera (源链)

Opera 39 (based on Chromium 52) forMac, Windows, Linux is out! To find out what’s new for users, see ourDesktop blog. Here’s what it means for web developers.

ES2016 exponentiation operator

ES2016 introduces an arithmetic operator equivalent
of Math.pow(base, exponent)
, in which the lefthand-side expression serves as the base value, and the righthand-side expression serves as the exponent.

4 ** 3;
// → 64

let value = 4;
value **= 3;
// → 64

Fetch API: Response
construction with ReadableStream

It’s now possible to construct your own ReadableStream
instances and to use them as bodies for Response
objects, including from within service workers. This functionality is part of the Fetch standard
. See Jeff Posnick’s write-up
for details, or Jake Archibald’s
in-depth blog post on streams for even more info.

Fetch API: referrer policy

Requests made using the Fetch API
can use a specific referrer policy, which affects the value of the Referer
HTTP header that’s sent to remote servers. This can be done by adding a referrerPolicy
property to the options object passed to fetch
, which accepts the following values:

  • 'no-referrer'
  • 'no-referrer-when-downgrade'
  • 'origin'
  • 'origin-when-cross-origin'
  • 'unsafe-url'

See Ehsan Akhgari’s write-up
for a straight-forward explanation of these values.

fetch(url, { 'referrerPolicy': 'no-referrer' })
	.then(function(response) {
		// Do something with the `response`…

A demo is available.

2D canvas filters

instances now support the filter
property that applies effects to primitives drawn to the canvas. The filter
value is parsed in the same way as CSS filters

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
context.filter = 'saturate(6.3)';


An ImageBitmapOptions
object is an options
object that can be passed to createImageBitmap()

createImageBitmap(image, options).then(function(response) {
	// Do something with the `response`…

The available options are:

  • colorSpaceConversion
    indicates whether the image is decoded using color space conversion. Either 'none'
    or 'default'
    (default). The value 'default'
    indicates that implementation-specific behavior is used.
  • imageOrientation
    indicates whether the image is presented as-is or flipped vertically. Either 'flipY'
    or 'none'
  • premultiplyAlpha
    indicates that the bitmap color channels are premultiplied by the alpha channel. One of 'none'
    , 'premultiply'
    , or 'default'
  • resizeWidth
    indicates the new width.
  • resizeHeight
    indicates the new height.
  • resizeQuality
    specifies an image scaling algorithm. One of 'pixelated'
    , high'
    , 'medium'
    , or 'low'

values are no longer treated as subtitles

Invalid values for

were previously treated as 'subtitles'
. This means that any new values would be treated as subtitles by old browsers. Chromium now uses 'metadata'
instead as the “invalid value default”, to avoid browsers showing
s with unrecognized values.


The srcObject
property on HTMLMediaElement instances enables associating a MediaStream
to a media element using a simple assignment. Previously, achieving this required first obtaining a URL associated to the MediaStream
, and then associating this URL to the media element.

Currently, only MediaStream
objects are accepted because it is the only type currently supported by other major browsers, but Chromium aims to support more types in the future. (Per the spec, a MediaProvider
can be a MediaStream
, a MediaSource
, or a Blob

Web Audio updates


now have readonly minValue
and maxValue
properties that specify the minimum and maximum values the AudioParam
can have. The value
is clamped to lie in this range

Automation methods for the position and orientation coordinates of

and the position{X,Y,Z}
, up{X,Y,Z}
, and forward{X,Y,Z}
vectors of

are now available. This allows smooth changes in the coordinates using AudioParam

Chromium now implements the reduction
property on DynamicsCompressorNode
instances as a readonly float, matching the spec. Previously, the value was represented as an AudioParam


The includes
method on IDBKeyRange

tests whether or not a key exists within the bounds of the range. Until all other browsers support this natively, a polyfill
can be used.

WebRTC: Storing RTCCertificate
s in IndexedDB


are self-signed certificates used in the DTLS handshake when setting up a connection with an RTCPeerConnection
. Chromium now allows web applications to store RTCCertificate
s by implementing the structured clone algorithm. This means RTCCertificate
s can be saved and loaded from an IndexedDB database, saving the cost of generating new certificates for new sessions.

Constraints API

The following

methods are now supported:

  • getCapabilities
  • getConstraints
  • getSettings
  • applyConstraints

These APIs allow getting, setting, and querying constraints on a MediaStreamTrack


instances now have video
and audio

Performance Observer

The Performance Observer API
is essentially a streaming interface that can be used to gather low-level timing information asynchronously, as it’s gathered by the browser. Marc Cohen’s write-up
does a great job explaining it.

Pause event loop during modal dialogs

When using alert()
, confirm()
or onbeforeunload
, Chromium’s old behavior was to block JavaScript while waiting for the result, but to allow all declarative animations to continue. As of this update, Chromium makes all main-thread tasks (such as
and CSS 2D animations) also pause
during this interval.

Here’s a demo
showing the impact of alert()
on a CSS 2D animation.

CSS: alpha channel for RGB colors in hex notation

The CSS color parser now supports RGB colors in hex notation
consisting of 8 ( #RRGGBBAA
) or 4 ( #RGBA
) digits.

For example, #0000FFCC
or #00FC
are equivalent to rgba(0, 0, 255, 204)
, a slightly-transparent blue.

A demo is available.

CSS contain

The CSS contain

indicates that an element and its contents are, as much as possible, independent of the rest of the document tree. This allows the browser to recalculate layout ( contain: layout
), style ( contain: style
), paint ( contain: paint
), size ( contain: size
), or any combination of them for a limited area of the DOM and not the entire page. For more details, check out Paul Lewis’ explanation

CSS font-variant-caps
& font-variant-numeric

The CSS properties


are now supported.

meter { -webkit-appearance: none; }

Previously, there was no way to completely disable the browser’s default rendering of
elements and to restyle them using CSS. As of Chrome 52 / Opera 39, this finally became possible using
-webkit-appearance: none


New CSS Flexbox behavior for absolutely-positioned children

The static position of absolutely-positioned children used to be set as though they were a 0×0 flex item. The CSS Flexible Box Layout spec
has since been updated to take such children fully out of flow
and to set the static position based on align
and justify
properties. Check out the demo.

Alternative Services

Alternative Services
allow an origin serving an http://
or https://
resource to nominate additional origins that the client can choose to request the resource from instead when making subsequent requests. This can be used, for example, as a protocol upgrade mechanism, for connection pooling, or for load balancing.

This is done through the Alt-Used
HTTP header.

For example, if the resource at https://origin.example.com/foo
returns the following response headers:

Alt-Used: https://alternate.example.net

…and https://origin.example.com/bar
is requested afterwards, then the browser may fetch either https://origin.example.com/bar
or https://alternate.example.net/bar

CSP3 strict-dynamic

The 'strict-dynamic'
source expression

allows scripts loaded via nonce- or hash-based whitelists to load other scripts. Deploying CSP is now simpler than ever before. A demo is available.

Deprecated and removed features

is now ignored when present inside a
tag, e.g.
, matching the spec
. Use an HTTP header ( X-Frame-Options: DENY
) instead.

A non-standard and little-used variant of the postMessage()
API is being deprecated, specifically postMessage(message, transferables, targetOrigin)
. Use postMessage(message, targetOrigin, transferables)

The ended
event & property and the onended
event handler have been removed from the Media Capture and Streams spec
and are now being deprecated in Chromium.

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


Better Bluetooth support and Android App Shortcuts... Chrome OS’s Android apps are getting app shortcuts within the right-click context menus, a sign of better integration as more touch-oriented device...
Google’s convertible Chrome OS ‘Pixelbook’ leaks w... Today has seen a deluge of leaked hardware that will likely be announced at Google’s upcomingOctober 4th event. Matching last month’s rumor of a new ...
Android Messages “Integration” Coming to Chrome OS... You must’ve heard about Google’s grand plans to create a new text messaging app called “ Chat ” for Android. If yes, you must’ve also noticed that...
How to Completely Reinstall Chrome OS on Your Chro... As operating systems go, Chrome OS is arguably the most reliable of them all. You won’t have to deal with the dreaded “blue screen of death,” crashes...
Chrome OS prepares to support third-party Android ... Last month at Google I/O 2018, Google made a number of announcements pertaining to the future of development onChrome OS. One of these announcements ...
责编内容来自:Dev.Opera (源链) | 更多关于

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » What’s new in Chromium 52 and Opera 39

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录