CSS Highlight Inheritance

Category: CSS
Type: No developer-visible change
Status: Enabled by default (Chrome 134)
Intent stage: None

Summary

With CSS Highlight Inheritance, the CSS Highlight pseudo classes, such as ::selection and ::highlight, inherit their properties through the pseudo highlight chain, rather than the element chain. The result is a more intuitive model for inheritance of properties in highlights. Specifically, "When any supported property is not given a value by the cascade ... its specified value is determined by inheritance from the corresponding highlight pseudo-element of its originating element’s parent element." There are some caveats due to properties not allowed on a highlight pseudo and historical usage: units depending on fonts, container queries, viewports etc. use metrics from the originating element, and all custom property values used in the highlight pseudo are taken from the originating element (inherited through the originating element cascade). (https://drafts.csswg.org/css-pseudo-4/#highlight-cascade)

Standards & signals

Specification: https://drafts.csswg.org/css-pseudo-4/#highlight-cascade
Firefox: Neutral — emilio@ is active in standards discussions on the issues, but I am not aware of implementation. https://bugzilla.mozilla.org/show_bug.cgi?id=1703963 https://bugzilla.mozilla.org/show_bug.cgi?id=1703961
Safari: In development — I have a private email from the Apple engineer tasked with implementing. I don't want to reveal PI.
Web developers: No signals — Developer ergonomics is the primary concern motivating highlight inheritance. See https://github.com/w3c/csswg-drafts/issues/2474 for the initial spec discussion related to the behavior of ::selection. See https://bugs.chromium.org/p/chromium/issues/detail?id=1490471 for an example of a user seeing unexpected behavior without this feature.

View on chromestatus.com