New in Chrome 131

Mariko Kosaka

Here's what you need to know:

More CSS styling for the <details> element.
Easier print layout with page margin boxes.
And there's plenty more.

I'm Mariko Kosaka. Let's dive in and see what's new for developers in Chrome 131.

Styling Improvements to `<details>` and `<summary>`

You now have more options to style the structure of the <details> and <summary> elements in order to build disclosure or accordion widgets.

The changes introduced in this release enable the use of the display property, and add a ::details-content pseudo-element to style the part that expands and collapses.

Historically it was impossible to change the display type of the details element. This restriction has now been relaxed, allowing you to use things like grid or flex layouts.

In this exclusive accordion example, made of several details elements, when one of the details elements is expanded, its content is placed next to the summary.

Accordion widget with Flex layout

This is achieved by using a flex layout on the details element. You can also try more layout patterns with other display values such as grid.

Check out Bramus' article More options for styling <details> for a more in-depth explanation.

`@page` margin boxes

Support for page margin boxes, when printing a web document, or exporting it as PDF, has been added.

Page margin boxes let you define the contents in the margin area of a page. So, you can provide custom headers and footers rather than using the built-in headers and footers generated by the browser.

The page margin is defined using the @page rule in CSS.

@page :right {
  @bottom-left {
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

The appearance and the contents of a margin box are specified with CSS properties inside the at-rules representing the 16 margin boxes using generated content.

For page numbering, counters are also supported with page for the current page number, and pages for the total number of pages.

Check out Rachel's article Add content to the margins of web pages when printed using CSS for a more in-depth explanation.

And more!

And of course there is plenty more.

Support for external SVG resources for 'clip-path', 'fill', 'stroke' and 'marker'.
WebHID is enabled inside dedicated worker contexts.
Control the behavior of Emoji with the font-variant-emoji CSS property.

New in Chrome 131

Styling Improvements to <details> and <summary>

@page margin boxes

And more!

Further reading

Subscribe

Styling Improvements to `<details>` and `<summary>`

`@page` margin boxes