Menu

Chrome 65 Beta: CSS Paint API and the ServerTiming API

February 8th, 2018

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, Mac, and Windows.

CSS Paint API

The CSS Paint API, also known as “CSS Custom Paint”, allows developers to programmatically generate an image whenever a CSS property expects one. Instead of referencing an image resource, developers can now use the new paint() function to reference a paint worklet that will draw the image. This API can be used for many things, including making the DOM tree smaller and transferring significantly less data compared to an image.

<style>
  textarea {
    background-image: paint(checkerboard);
  }
</style>
<textarea></textarea>
<script>
  CSS.paintWorklet.addModule('checkerboard.js');
</script>

To see the paint worklet in action, check out our explainer and the video demo below.

In this example, the CSS Paint API is used to programmatically create a checkerboard image.

Server Timing API

Developers interested in measuring the performance of their web applications have been able to use the Navigation Timing and Resource Timing APIs to request timing data for the document and its resources. Until now, there has been no way for the server to send any details about its response time to the client. The new Server Timing API allows web servers to pass performance timing information via HTTP headers to browsers. This new API provides developers a more complete performance picture that includes the speed of both the client and the server. For example, Chrome Developer Tools now shows server timing performance information via the Server Timing API.

Screenshot of the Chrome Developer Tools integration of the ServerTiming API.

Other features in this release

Blink > CSS

  • Developers can now use the :any-link pseudo-selector to apply CSS properties to all unvisited or visited hyperlink elements.
  • The syntax for specifying HSL/HSLA and RGB/RGBA coordinates for the color property now match the CSS Color 4 spec.
  • Developers can use display:contents to generate boxes for an element’s children and pseudo-elements without generating the parent box.

Blink > DOM

  • To complement assignedNodes(), the <slot> element now has an assignedElements() method, which returns only the element nodes assigned to a given slot.
  • Chrome now supports the HTMLAnchorElement.relList property to indicate the relationship between the resource represented by the <a> element and the current document. Thanks to Samsung for this contribution!

Blink > Feature Policy

Blink > Network

  • To match compatibility with the TLS spec, Chrome now supports the draft-23 version of the TLS 1.3 protocol.
  • Developers can use Request.destination to evaluate which resource their service worker is fetching.

Blink > Performance APIs

  • As WebIDL was deprecated, PerformanceResourceTiming, PerformanceLongTaskTiming, and TaskAttributionTiming now support the toJSON method to convert objects to JSON.

Blink > Security

  • To protect users against cross-origin information leakage, Chrome will ignore the presence of the download attribute on anchor elements with cross-origin attributes.

Deprecations and interoperability improvements

Blink > Bindings

  • To match compatibility with the HTML spec, document.all is no longer overwritable.

Blink > Network

  • As previously announced, Chrome 65 will not trust certificates issued from Symantec’s Legacy PKI after December 1st, 2017, and will result in interstitials. This will only affect site operators who explicitly opted-out of the transition from Symantec’s Legacy PKI to DigiCert’s new PKI, and does not apply to the previously disclosed independent sub-CAs from this infrastructure.

For a complete list of all features (including experimental features) in this release, see the Chrome 65 milestone hotlist.

Posted by Ian Kilpatrick, Patiently Painting Engineer