New in Chrome 99

Pete LePage

Here's what you need to know:

• The count down to version 100 of Chrome and Firefox is just weeks away.
• CSS cascade layers gives you more control over your CSS, and helps to prevent style-specificity conflicts.
• The showPicker() method allows you to programmatically show a browser picker for <input> elements like date, color, and datalist.
• And there's plenty more.

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

Chrome 100 and Firefox 100

Chrome 100 ships in late March (2022), and Firefox 100 ships shortly after in early May. Both of these are a major version number milestone and roll over to three digits. But, if your code is expecting two digits, the new version number could cause issues for you.

Any code that checks version numbers, or parses the user agent string should be checked to make sure it won't have any issues.

In Chrome, the #force-major-version-to-100 flag will change the current version number to 100.

And in Firefox Nightly's Settings menu, you can enable the "Firefox 100 User-Agent String" option. It's a good idea to test your site so that you can make sure everything works as expected.

Check out Chrome and Firefox soon to reach major version 100 for complete details.

CSS Cascade Layers

Support for CSS Cascade Layers and the CSS @layer rule is landing in Chrome 99. They provide more explicit control of your CSS files to prevent style-specificity conflicts. This is especially useful for large codebases, design systems, and when managing third party styles in applications.

They introduce a new layer to the CSS cascade. With layered styles, the precedence of a layer always beats the specificity of a selector.

If you're trying to style a link, inside a .card, within a .post you will find that the more specific selector will be applied. By using the @layer rule, you can be more explicit about the style specificity of each, and make sure that the link style in your card, overrides the link style in your post.

@layer base {
  a {
    font-weight: 800;
    color: red;
  }

  .link {
    color: blue;
  }
}

This is because of cascade precedence. Layered styles create new cascade planes.

Cascade layers using the CSS @layer rule are supported in Chrome 99, Firefox 97, and Safari 15.4 Beta. Check out Cascade layers are coming to your browser for more information.

showPicker() for input elements

For a long time, we've had to resort to custom widget libraries or hacks to show a date picker. There's a new showPicker() method on HTML InputElements. It's the canonical way to show a browser picker, not only for date, but also time, color, and other <input> elements with pickers.

To use it, call showPicker() on the <input> element. In this example, I wrapped it in a try…catch block. That allows me to provide a fallback, if the browser doesn't support the API, or can't show the picker. Thus, ensuring that users still get a good experience.

const button = document.querySelector("button");
const dateInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    dateInput.showPicker();
    // A date picker is shown.
  } catch (error) {
    // Use an external library when this fails.
  }
});

Check out Show a browser picker for date, time, color, and files for complete details, and all the different <input> types you can use showPicker() for.

And more!

Of course there's plenty more.

The Canvas2D API has been updated, adding new functionality, including:

• Two new events for ContextLost and ContextRestored
• A willReadFrequently option
• More CSS text modifier support
• And more.

There's a new origin trial to allow PWAs to provide alternate colors in the web app manifest for dark mode.

And the handwriting recognition API has now landed.

Further reading

This covers only some of the key highlights. Check the links below for additional changes in Chrome 99.

• What's new in Chrome DevTools (99)
• Chrome 99 deprecations and removals
• ChromeStatus.com updates for Chrome 99
• Chromium source repository change list
• Chrome release calendar

Subscribe

To stay up to date, subscribe to 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 100 is released, I'll be right here to tell you what's new in Chrome!