Chrome 74: What’s New for Developers
The latest version of Chrome has arrived, bringing with it a host of exciting new features for developers. From private class fields in JavaScript to a new media query for reducing animation, there’s plenty to explore.
Private Class Fields: A New Era for JavaScript
In Chrome 72, we saw the introduction of public class fields in JavaScript. Now, with Chrome 74, private class fields are joining the party. Using the # symbol to denote private fields, developers can create classes that are more secure and easier to maintain.
Here’s an example of a public class field:
And here’s how you can make it private with the # symbol:
Reducing Animation: A New Media Query
Some users may experience motion sickness when browsing websites with parallax scrolling, zooming, or jumpy motion effects. To address this issue, Chrome 74 introduces a new media query, prefers-reduced-motion. This allows developers to design websites that take into account users’ preferences for reduced motion.
Here’s an example of how you can use this media query to disable animation:
Listening for CSS Transition Events
Developers can now listen for CSS transition events like transitionrun, transitionstart, transitionend, and transitioncancel. This is useful for tracking or changing behavior when a transition runs.
Here’s an example of how you can log transitions on your website:
Feature Policy APIs: Taking Control
Chrome’s new feature policies give developers more control over the behavior of APIs and other website features. With the Feature-Policy header or an iframe’s allow attribute, you can enable, disable, or modify the behavior of features like fullscreen API or autoplay on mobile and third-party videos.
Here’s an example of how you can use the Feature-Policy header:
Dark Mode: Coming to Windows
In Chrome 73, dark mode was introduced for Mac users. Now, with Chrome 74, it’s rolling out for Windows users as well. Dark mode gives websites a sleek new look, with a different theme applied to new tabs, the bookmarks bar, and more.
What Else?
These are just some of the highlights of Chrome 74. For a more detailed look at the features and updates, check out chromestatus.com, Google’s official site for all Chrome updates.