New in Chrome 106

Here’s what you need to know:

There are new Intl APIs to give you more control when formatting numbers.
There’s an origin trial for the Pop-up API to make it easy to surface critical content to the user.
We’re adding a handful of CSS features to improve interop.
And there’s plenty more.

I’m Pete LePage, and I’m Adriana Jara. Let’s dive in and
see what’s new for developers in Chrome 106.

New Intl APIs

The Intl APIs help to display content in a localized format.

Like other Intl APIs, this shifts the burden to the system—so you don’t need to ship or maintain complex localization code to every user.

The API knows where the currency symbol goes, how to format dates and times, or compile a list.

Chrome 106 adds a slew of new number format functionality.

const opts = {
style: 'currency',
currency: 'EUR'
};
const x = new Intl.NumberFormat('de-DE', opts);
const r = x.format(number);
// expected output: "123.456,79 €"

Need to display a price range? formatRange has you covered.

Create a new numberFormat object, provide the style and other options,
and how many digits to show.

Then call formatRange() to get the formatted string.

const opts = {
style: "currency",
currency: "EUR",
maximumFractionDigits: 0,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.formatRange(2.9, 3.1);
// expected output: "~€3"

Want to round a number to the nearest increment of five with an accuracy of two decimal places?
No problem.

Specify the minimumFractionDigits, and roundingIncrement, then call format().

const opts = {
style: 'percent',
minimumFractionDigits: 2,
roundingIncrement: 5,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.format(0.428267);
// expected output: "42.85%"

You can even tell the browser to include trailing zeros with trailingZeroDisplay, super helpful for prices.

const strip = new Intl.NumberFormat('en-US', {
style: 'percent',
minimumFractionDigits: 2,
trailingZeroDisplay: 'stripIfInteger',
}).format(0.42);
// 42%

const auto = new Intl.NumberFormat('en-US', {
style: 'percent',
minimumFractionDigits: 2,
trailingZeroDisplay: 'auto',
}).format(0.42);
// 42.00%

Check out the Intl Number Format docs on MDN for more information.

The Pop-Up API makes building UIs way easier, for those times when you just need to put information right in front of your user.

The `popup` attribute, automatically brings the element to the site’s top layer
and provides easy controls to toggle visibility.
No more worrying about
positioning,
stacking elements,
focus,
or keyboard interactions for you.
Best of all it requires zero JavaScript.

With only the following snippet the API takes care of rendering the element on top of all other content,
and handles user input, and focus management.

<div id="my-pop-up" popup>
Pop-up content!
</div>
<button  popuptoggletarget="my-pop-up">
Toggle Pop-up button
</button>

By default, users can close the popup with gestures like the ESC key or clicking on other elements.

And developers have full control over the style,positioning and size of the top layer,
but also the flexibility to modify the default behaviors. Using only CSS and HTML.

Check out Jhey’s article for more examples and API options.

New css features

There are two new CSS features that improve interop and hopefully make your life a little easier.

There is a new length unit in town: ic is joining the party. ic is similar to ch.
But ic is used specifically for text written in languages that use ideograms,
basically it measures length based on the width or height of this character which means water.

It is a unit designed to size text, allowing you to limit width to improve readability, and it gives predictable control regardless of the text size.

For example if you set the max-width of a container, let’s say to 10ic,
you know that container will contain at most 10 full width glyphs,
no matter the font-size. Check it out in the following example:

CSS Grid support for interpolation for grid-template-columns and grid-template-rows is coming, it was planned for 106, but is delayed and will be launched in Chrome 107, you can still try it out in Chrome Beta. Here is Bramus’ code as an example: