What’s New in Chrome 74

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 voila! You’re logging transitions on your website.

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.

Plug: LogRocket, a DVR for web apps

LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

Try it for free.

The post What's new in Chrome 74 appeared first on LogRocket Blog.