What’s new in Chrome 74

Chrome 74 has arrived, and while there’s not much exciting from a user-facing perspective, there are some goodies for the developer minded. The new version comes complete with new private class fields for Javascript, a media query that allows users to reduce animation, dark mode for Windows, and more.

Public class fields, meet private class fields

You might remember that Chrome 72 added support for Javascript’s new public class field syntax back in January. This is a nifty new way to simplify your syntax by allowing you to define class fields directly in the class definition, no constructor necessary.

Now in Chrome 74, private class fields join their public cousins. The private class fields function more or less the same but make use of a # to denote that they’re private vs. public, and of course, they’re only accessible inside the class.

For a refresher, a public class field looks like this:

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

And a private class field has that added #:

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

Not so fast

As it turns out, some people aren’t huge fans of the flashy animations found on some modern websites. In fact, parallax scrolling, zooming, and jumpy motion effects can make some motion sick. Imagine getting car sick while browsing the website. Not fun. Operating systems have started adding options to reduce this motion and now with Chrome 74, you can use a media query, prefers-reduced-motion, to design with this group of people in mind.

How does this work? Say you have an animated button.

You can use @media (prefers-reduced-motion: reduce) like so:

button {
  animation: vibrate 0.3s linear infinite both;
}
@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

And now, when someone has a reduced motion preference turned on in MacOS or another operating system, they won’t see the animation.

Listen for CSS transition events

Good news, everyone! You can now listen for CSS transition events like transitionrun, transitionstart, transitionend, and transitioncancel. Other browsers have supported this for quite a while, but better late than never. Listening to these events can come in handy if you want to track or change behavior when a transition runs.

Just a little code…

element.addEventListener(‘transitionstart’, () => {
  console.log(‘Started transitioning’);
});

and voilà! You’re logging transitions on your website.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

What can you do with this? Well, maybe you have an eye-catching animation on your website to, well, catch the user’s attention. After it runs and they’re captivated, you want to deliver an important message. How can you do that? Transition events (transitionend)!

Take control with feature policy APIs

Chrome’s new feature policies make it easy to enable, disable or modify the behavior of APIs and other website features. With them, you can do things like allow iframes to use the fullscreen API or change the default behavior of autoplay on mobile and third-party videos. You can take advantage of this new functionality with the Feature-Policy header or with an iframe’s allow attribute:

HTTP Header: Feature-Policy: geolocation ‘self’
<iframe … allow=”geolocation self”></iframe>

For a deeper dive on feature policies, take a look at Google’s article on the subject.

Embrace the dark mode

Or don’t. The point is, now you can choose. In Chrome 73, dark mode was added for Mac users, but not for Windows. Chrome 74 starts the roll out of it for Windows as well. Like with the Mac version, dark mode in Windows looks a bit like incognito mode with a different theme applied to new tabs, the bookmarks bar, and more.

According to Google, this will be happening gradually so if you can’t do it quite yet, don’t worry. Dark mode is coming.

What else?

These are just some of the highlights for Chrome 74. If you’re looking for the nitty-gritty, check out chromestatus.com, Google’s official site for all Chrome updates. They get into the weeds on these features and even give you a sneak peek into future releases.