New in Chrome 131

Mariko Kosaka

Here's what you need to know:

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

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

CSS highlight inheritance

CSS highlight inheritance is changing for the ::selection and ::target-text pseudo-classes. This creates a more intuitive model for style inheritance and aligns with the recently added ::highlight, ::spelling-error and ::grammar-error pseudo-classes.

Think about this code snippet with emphasized text.

p {
  color: deeppink;
}

.blue::selection {
  color: blue;
}

<p class="blue">
    This is
    <em>emphasized</em>
    text.
</p>

In earlier versions of Chrome, when you select text that is emphasized, the color of the text did not change to blue despite setting ::selection pseudo-class on the parent paragraph element.

Highlighted text in pink

This is because it was implemented using the originating element inheritance model. So ::selection pseudo-class in this case only matches elements with the blue class, which the element inside of this paragraph doesn't have.

With the highlight inheritance change, when the same text is selected in Chrome 131, text will change its color to blue.

Highlighted text in blue

There are a few more changes related to this, so be sure to check out Inheritance changes for CSS selection styling written by Stephen Chenney from Igalia, who worked on this feature.

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

CSS highlight inheritance

Styling Improvements to <details> and <summary>

@page margin boxes

And more!

Further reading

Subscribe

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

`@page` margin boxes