New in Chrome 74

Pete LePage

In Chrome 74, we've added support for:

Creating private class fields in JavaScript is now much cleaner.
You can detect when the user has requested a reduced motion experience experience.
CSS transition events
Adds new feature policy APIs to check if features are enabled or not.

And there's plenty more!

I'm Pete LePage. Let's dive in and see what's new for developers in Chrome 74!

Change log

This covers only some of the key highlights, check the links below for additional changes in Chrome 74.

Private class fields

Class fields simplify class syntax by avoiding the need for constructor functions just to define instance properties. In Chrome 72, we added support for public class fields.

class IncreasingCounter {
  // Public class field
  _publicValue = 0;
  get value() {
    return this._publicValue;
  }
  increment() {
    this._publicValue++;
  }
}

And I said private class fields were in the works. I'm happy to say that private class fields have landed in Chrome 74. The new private fields syntax is similar to public fields, except you mark the field as being private by using a # (pound sign). Think of the # as being part of the field name.

class IncreasingCounter {
  // Private class field
  #privateValue = 0;
  get value() {
    return this.#privateValue;
  }
  increment() {
    this.#privateValue++;
  }
}

Remember, private fields are just that, private. They're accessible inside the class, but not available outside the class body.

class SimpleClass {
  _iAmPublic = 'shared';
  #iAmPrivate = 'secret';
  doSomething() {
    ...
  }
}

To read more about public and private classes, check out Mathias's post on class fields.

`prefers-reduced-motion`

Some users have reported getting motion sick when viewing parallax scrolling, zooming, and other motion effects. To address this, many operating systems provide an option to reduce motion whenever possible.

Chrome now provides a media query, prefers-reduced-motion - part of Media Queries Level 5 spec, that allows you to detect when this option is turned on.

@media (prefers-reduced-motion: reduce)

Imagine I have a sign-up button that draws attention to itself with a slight motion. The new query lets me shut off the motion for just the button.

button {
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

Check out Tom's article Move Ya! Or maybe, don't, if the user prefers-reduced-motion! for more details.

CSS `transition` events

The CSS Transitions specification requires that transition events are sent when a transition is enqueued, starts, ends, or is canceled. These events have been supported in other browsers for a while…

But, until now, they weren't supported in Chrome. In Chrome 74 you can now listen for:

transitionrun
transitionstart
transitionend
transitioncancel

By listening for these events, its possible to track or change behavior when a transition is run.

Feature policy API updates

Feature policies, allow you to selectively enable, disable, and modify the behavior of APIs and other web features. This is done either through the Feature-Policy header or through the allow attribute on an iframe.

Feature-Policy: geolocation 'self'

<iframe ... allow="geolocation self">
</iframe>

Chrome 74 introduces a new set of APIs to check which features are enabled:

You can get a list of features allowed with document.featurePolicy.allowedFeatures().
You can check if a specific feature is allowed with document.featurePolicy.allowsFeature(...).
And, you can get a list of domains used on the current page that allow a specified feature with document.featurePolicy.getAllowlistForFeature().

Check out the Introduction to Feature Policy post for more details.

And more!

These are just a few of the changes in Chrome 74 for developers, of course, there's plenty more. Personally, I'm pretty excited about KV Storage, a super fast, async, key/value storage service, available as an origin trial.

Google I/O is happening soon!

And don't forget - Google I/O is just a few weeks away (May 7th to 9th) and we'll have lots of great new stuff for you. If you can't make it, all of the sessions will be live streamed, and will be available on our Chrome Developers YouTube channel afterwards.

Want to stay up to date with our videos, then subscribe to our Chrome Developers YouTube channel, and you'll get an email notification whenever we launch a new video.

I'm Pete LePage, and as soon as Chrome 75 is released, I'll be right here to tell you -- what's new in Chrome!