New in Chrome 117

Adriana Jara

Here's what you need to know:

Three new CSS features make it easy to add smooth entry and exit animations.
Compute higher order datasets with array grouping.
DevTools makes local overrides easier.
And there’s plenty 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.

.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.

/*  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.

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

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

Checkout Four new CSS features for smooth entry and exit animations 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, there is an array of products with the groupBy method used to return them grouped by their type.

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.

Local overrides streamlined in DevTools.

The local overrides 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.

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.

Once the overrides are set up, DevTools then takes you to Sources > Overrides > Editor to let you override web content.

Note that the overridden resources are indicated with in the Network panel. Hover over the icon to see what's overridden.

Check out what’s new in DevTools for all the details and more information on DevTools in Chrome 117.

And more!

Of course there’s plenty more.

The much anticipated subgrid value for grid-template-columns and grid-template-rows is now implemented in Chrome.
There is a WebSQL deprecation trial and a developer trial for the unload event deprecation.