What’s new in Chromium 52 and Opera 39

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;
value;
// → 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

CanvasRenderingContext2D
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)';

createImageBitmap
options

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'
    (default).
  • premultiplyAlpha
    indicates that the bitmap color channels are premultiplied by the alpha channel. One of 'none'
    , 'premultiply'
    , or 'default'
    (default).
  • resizeWidth
    indicates the new width.
  • resizeHeight
    indicates the new height.
  • resizeQuality
    specifies an image scaling algorithm. One of 'pixelated'
    , high'
    , 'medium'
    , or 'low'
    (default).

Invalid
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.

HTMLMediaElement.prototype.srcObject

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


AudioParam
instances

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
PannerNode

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

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

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

IDBKeyRange.prototype.includes()


The includes
method on IDBKeyRange
instances

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


RTCCertificate
s

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.

MediaStreamTrack
Constraints API

The following
MediaStreamTrack

methods are now supported:

  • getCapabilities
  • getConstraints
  • getSettings
  • applyConstraints

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

Additionally,
MediaTrackConstraints

instances now have video
and audio
properties.

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
ment


The CSS contain
property

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
font-variant-caps

and
font-variant-numeric

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

X-Frame-Options
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)
instead.

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
.

稿源:Dev.Opera (源链) | 关于 | 阅读提示

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

喜欢 (0)or分享给?

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

使用声明 | 英豪名录