![Adriana Jara](https://web.dev/images/authors/ajara.jpg) Adriana Jara [X](https://twitter.com/tropicadri) [GitHub](https://github.com/tropicadri) [LinkedIn](https://www.linkedin.com/in/adrianajara) [Mastodon](https://hachyderm.io/@tropicadri)

<br />

[Video](https://www.youtube.com/watch?v=coidqLlYgoo)

Here's what you need to know:

- [Three new CSS features](https://developer.chrome.com/blog/new-in-chrome-117.md.txt#exit-entry-animations) make it easy to add smooth entry and exit animations.
- Compute higher order datasets with [array grouping](https://developer.chrome.com/blog/new-in-chrome-117.md.txt#array-grouping).
- DevTools makes [local overrides easier](https://developer.chrome.com/blog/new-in-chrome-117.md.txt#local-overrides).
- And there's plenty [more](https://developer.chrome.com/blog/new-in-chrome-117.md.txt#more).

I'm Adriana Jara. Let's dive in and see what's new for developers in Chrome 117.

## New CSS features for entry and exit animations.

These three new CSS features complete the set to easily add entry and exit animations,
and smoothly animate to and from the top layer dismissible elements such as dialogs and popovers.

The first feature is `transition-behavior`. To transition discrete properties, like `display`, use the `allow-discrete` value for `transition-behavior`.

```css
.card {
  transition: opacity 0.25s, display 0.25s;
  transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}

.card.fade-out {
  opacity: 0;
  display: none;
}
```

Then the `@starting-style` rule is used to animate entry effects from `display: none` and into the top-layer. Use `@starting-style` to apply a style that the browser can look up before the element is open on the page.

```css
/*  0. IS-OPEN STATE   */
/*  The state at which the element is open + transition logic */
.item {
  height: 3rem;
  display: grid;
  overflow: hidden;
  transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}

/*  1. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  2. EXITING STATE   */
/*  While it is deleting, before DOM removal in JS, apply this
    transformation for height, opacity, and a transform which
    skews the element and moves it to the left before setting
    it to display: none */
.is-deleting {
  opacity: 0;
  height: 0;
  display: none;
  transform: skewX(50deg) translateX(-25vw);
}
```

Finally, to fade out a `popover` or `dialog` from the top layer, add the `overlay` property to your list of transitions. Include overlay in the transition or animation to animate overlay along with the rest of the features and ensure it stays in the top layer when animating. This will look much smoother.

```css
[open] {
  transition: opacity 1s, display 1s allow-discrete;
}
```

```css
[open] {
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}
```

Checkout [Four new CSS features for smooth entry and exit animations](https://developer.chrome.com/blog/entry-exit-animations.md.txt) for details on how to use these features for improving your user experience with motion.

## Array grouping

In programming, array grouping is an extremely common operation, seen most often when we use SQL's GROUP BY clause and MapReduce programming (which is better thought of as map-group-reduce).

The ability to combine data into groups allows developers to compute higher order datasets.
For example, the average age of a cohort, or daily LCP values for a webpage.

Array grouping enables these scenarios by adding the `Object.groupBy` and `Map.groupBy` static methods.

`groupBy` calls a provided callback function once for each element in an iterable. The callback function should return a string or symbol that indicates the group of the associated element.

In the following example, from the [MDN documentation](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy), there is an array of products with the `groupBy` method used to return them grouped by their type.

```javascript
const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 },
];

const result = Object.groupBy(inventory, ({ type }) => type);

/* Result is:
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

```

For more details check out the [`groupBy` documentation](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy).

## Local overrides streamlined in DevTools.

The [local overrides](https://developer.chrome.com/docs/devtools/overrides.md.txt) feature is now streamlined, so you can easily mock response headers and web content of remote resources from the **Network** panel without access to them.

To override web content, open the **Network** panel, right-click a request, and select **Override content**.

![The override options in the drop-down menu of a request.](https://developer.chrome.com/static/blog/new-in-chrome-117/image/the-override-options-the-492316b9bb4bb.png)

If you have local overrides set up but disabled, DevTools enables them. If you haven't set them up yet, DevTools prompts you in the action bar at the top. Select a folder to store the overrides in and allow DevTools access to it.

![Select a folder and allow access to it in the action bar at the top.](https://developer.chrome.com/static/blog/new-in-chrome-117/image/select-folder-allow-acc-f99fee222330b.png)

Once the overrides are set up, DevTools then takes you to **Sources** \> **Overrides** \> **Editor** to let you [override web content](https://developer.chrome.com/docs/devtools/overrides.md.txt#make-changes).

Note that the overridden resources are indicated with ![Saved.](https://developer.chrome.com/static/blog/new-in-chrome-117/image/saved-9fbc47ba3fa3a.png) in the **Network** panel. Hover over the icon to see what's overridden.

![An override icon next to a request in the Network panel.](https://developer.chrome.com/static/blog/new-in-chrome-117/image/an-override-icon-next-a-ce652fc7080be.png)

Check out [what's new in DevTools](https://developer.chrome.com/blog/new-in-devtools-117.md.txt) for all the details and more information on DevTools in Chrome 117.

## And more!

Of course there's plenty more.

- The much anticipated [`subgrid`](https://developer.mozilla.org/docs/Web/CSS/CSS_grid_layout/Subgrid) value for `grid-template-columns` and `grid-template-rows` is now implemented in Chrome.

- There is a [`WebSQL` deprecation trial](https://developer.chrome.com/blog/deprecating-web-sql.md.txt) and a developer trial for the [`unload` event deprecation](https://developer.chrome.com/docs/web-platform/deprecating-unload.md.txt).

## Further reading

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

- [What's new in Chrome DevTools (117)](https://developer.chrome.com/blog/new-in-devtools-117.md.txt)
- [Chrome 117 deprecations and removals](https://developer.chrome.com/blog/deps-rems-117)
- [ChromeStatus.com updates for Chrome 117](https://chromestatus.com/features#milestone%3D117)
- [Chromium source repository change list](https://chromium.googlesource.com/chromium/src/+log/116.0.5845.171..117.0.5938.57)
- [Chrome release calendar](https://chromiumdash.appspot.com/schedule)

## Subscribe

To stay up to date, [subscribe](https://goo.gl/6FP1a5) to the
[Chrome Developers YouTube channel](https://www.youtube.com/user/ChromeDevelopers/),
and you'll get an email notification whenever we launch a new video.

Yo soy Adriana Jara, and as soon as Chrome 117 is released, I'll be right here to tell you what's new in Chrome!

> [!NOTE]
> **Note:** This post was updated on 2024-09-13 to use the correct order for nested `@starting-style` rules. As of Chrome 130, `@starting-style` rules must be placed after the post-entry state (normal) declarations.