Chrome 49 Beta: CSS custom properties, background sync with service workers, and new ES2015 features

CSS custom properties

Modern websites often have CSS files with repeated values, such as a few colors reused throughout the page in a color scheme. Altering this data can be tedious and error-prone, since it’s scattered throughout one or more CSS files. To improve this, Chrome now supports CSS custom properties, allowing developers to define property variables in CSS without using external frameworks. Developers can then use the var() function to reference these custom properties anywhere in the document.

Changing a custom property can update multiple components in a website

CSS custom properties also inherit across shadow roots, so a web component can provide a “style API” that makes it possible to tweak and theme the component without knowing about its internals. The Polymer library uses this platform feature to simplify customizing components.

Background sync with service workers

Previously, sites could lose local changes or become out of sync if a user didn’t stay on the site until updates could be sent over the network. For example, an email client might lose a pending message if the user hit "send" and quickly navigated away. The new Background Sync API improves networking reliability by allowing service workers to schedule a one-off sync of a user’s local changes when the device next connects to the network, even if the site isn’t open.

Improved ECMAScript 2015 support

The ES2015 specification (ES6) is a major update to JavaScript that allows developers to write application logic that is more legible, powerful, and memory efficient. The latest version of Chrome’s V8 engine has 91% JavaScript ES2015 feature support. Developers can now use destructuring and default parameters to avoid boilerplate code when extracting data from arrays and objects or when setting function parameter defaults. Proxy objects and the Reflect API can customize previously hidden object behavior such as property lookup and assignment. The latest version of Chrome also makes block-level constructs such as class and let available outside of strict mode.

Keygen and application/x-x509-user-cert

The <keygen> element is used to generate a key-pair as part of an HTML form. While this can be used to enhance user security, <keygen> and user certificates sent with the MIME type of application/x-x509-user-cert can be exploited to disrupt a user’s secure communication, interfere with the functioning of their devices, or track the user without consent. Going forward, <keygen> will return an empty string by default and user certificates sent with the MIME type of application/x-x509-user-cert will no longer be automatically downloaded and installed.

Other features in this release

• With user consent, sites can record audio and video without relying on plugins by using the new MediaRecorder API.
• Developers can now control how fonts load using CSS font-display, improving page load speed.
• Sites can now detect which service worker client initiated a fetch request and return a specialized response using the FetchEvent.clientID attribute.
• Chrome now animates scrolling for discrete scrolling devices like mouse wheels, allowing for a smoother user experience.
• Chrome now more strictly protects secure cookies and allows developers to identify secure cookies using cookie prefixes.
• Sites can now prevent media from playing remotely using the disableRemotePlayback attribute as part of the Remote Playback API.
• Event.timeStamp is now a DOMHighResTimeStamp instead of a DOMTimeStamp, allowing for high-precision scroll latency and pointer velocity measurements.
• Promise rejection handling can now be tracked using the UnhandledRejection and RejectionHandled events.
• Developers can now interact with the GET parameters of a URL more easily using URLSearchParams.
• The WebAudio API now supports IIR Filters, OfflineAudioContext.suspend() and resume(), and promises in DecodeAudioData.
• WindowClient.navigate() allows service workers to navigate controlled windows to a new URL.
• Sites can detect if a user has requested reduced data usage and respond with a lighter experience by checking the Save-Data header field.

Minor changes

• Chrome’s content security policy now matches ‘script-src http:’ to both HTTP and HTTPS, preventing developers from accidentally rejecting secure resources.
• The Request.mode enum of the Fetch API now supports a navigate mode, improving spec compliance.
• Developers now have the option to ignore case when matching attribute selectors.
• Developers can now create pop-ups that don’t expose which page opened them using 'rel=noopener'.
• addEventListener() and removeEventListener() now require their first two arguments and can have the "capture" option specified using dictionary syntax, improving spec compliance and flexibility.
• Chromium now supports the standardized version of ChaCha-Poly1305 cipher suites in TLS.
• Navigator.getStorageUpdates() has been removed as it is no longer in the Navigator spec.
• MouseEvent.webkitMovementX/Y has been removed in favor of the unprefixed version.
• initTouchEvent has been deprecated in favor of the TouchEvent constructor to improve spec compliance and will be removed altogether in Chrome 53.
• Object.observe() has been deprecated as it is no longer on the standardization track and will be removed in a future release.
• The getComputedStyle(e).cssX behaviour has been deprecated since it was not a part of the formal spec.
• Some non-standard uses of RTCPeerConnection legacy methods have been deprecated to enable promise-based implementation of the WebRTC spec.
• Document.defaultCharset has been deprecated to improve spec compliance.

Posted by Josh Karlin, Syncing Samurai