 Pete LePage [X](https://twitter.com/petele) [GitHub](https://github.com/petele) [Mastodon](https://techhub.social/@petele) [Homepage](https://petelepage.com/)
[Video](https://www.youtube.com/watch?v=h3mzFraS8CA)
Here's what you need to know:
- The count down to [version 100](https://developer.chrome.com/blog/new-in-chrome-99.md.txt#v100) of Chrome and Firefox is just weeks away.
- [CSS cascade layers](https://developer.chrome.com/blog/new-in-chrome-99.md.txt#layers) gives you more control over your CSS, and helps to prevent style-specificity conflicts.
- The [`showPicker()`](https://developer.chrome.com/blog/new-in-chrome-99.md.txt#showPicker) method allows you to programmatically show a browser picker for `` elements like `date`, `color`, and `datalist`.
- And there's plenty [more](https://developer.chrome.com/blog/new-in-chrome-99.md.txt#more).
I'm [Pete LePage](https://petelepage.com). 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](https://web.dev/chrome-firefox-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](https://developer.mozilla.org/docs/Web/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.
```css
@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](https://developer.chrome.com/blog/cascade-layers.md.txt) 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 `` elements with pickers.
 Browser date pickers in Chrome desktop, Chrome mobile, Safari desktop, Safari mobile, and Firefox desktop (July 2021).
To use it, call `showPicker()` on the `` 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](https://developer.chrome.com/blog/show-picker.md.txt)
for complete details, and all the different `` types you can use
`showPicker()` for.
## And more!
Of course there's plenty more.
The Canvas2D API has been [updated](https://chromestatus.com/feature/6051647656558592), 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](https://developer.chrome.com/origintrials/#/view_trial/4239013149262479361).
And the [handwriting recognition API](https://chromestatus.com/feature/5263213807534080) 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)](https://developer.chrome.com/blog/new-in-devtools-99.md.txt)
- [Chrome 99 deprecations and removals](https://developer.chrome.com/blog/deps-rems-99.md.txt)
- [ChromeStatus.com updates for Chrome 99](https://www.chromestatus.com/features#milestone%3D99)
- [Chromium source repository change list](https://chromium.googlesource.com/chromium/src/+log/98.0.4758.88..99.0.4844.48)
- [Chrome release calendar](https://chromiumdash.appspot.com/schedule)
## Subscribe
To stay up to date, [subscribe](https://goo.gl/6FP1a5)
to [Chrome Developers YouTube channel](https://www.youtube.com/user/ChromeDevelopers/),
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!