CSS highlight pseudo system

[delan]

Request for position on an emerging web specification

• WebKittens who can provide input: @smfr @litherum

Information about the spec

• Spec Title: CSS Pseudo-Elements Module Level 4 § Highlight Pseudo-elements
• Spec URL: https://drafts.csswg.org/css-pseudo-4/#highlight-pseudos
• Explainer: https://www.azabani.com/2022/09/01/meet-the-css-highlight-pseudos.html

Design reviews and vendor positions

• Mozilla standards-positions issue: CSS highlight pseudo system mozilla/standards-positions#548
• Related webkit-dev thread: https://lists.webkit.org/pipermail/webkit-dev/2021-July/031917.html

Bugs tracking this feature

• WebKit Bugzilla:
  • https://bugs.webkit.org/show_bug.cgi?id=220325
  • https://bugs.webkit.org/show_bug.cgi?id=205228
  • https://bugs.webkit.org/show_bug.cgi?id=233927
• Radar:
  • rdar://problem/73037921
  • rdar://problem/57930142
  • rdar://problem/86466520

Anything else we need to know

css-pseudo-4 specifies the widely-supported but previously non-standard ::selection as one of several “highlight pseudos”, along with things like spelling/grammar errors and author-defined custom highlights. The highlight pseudos include a more powerful processing model:

• highlights can now add their own decorations and shadows
• highlights can now inherit applicable properties from ancestor highlight styles (was also true for Presto!)

This is mostly compatible with older ::selection impls but not completely:

• originating shadows now paint below the backgrounds of ::selection and other highlights
• ::selection can no longer remove or (in general) change the color of originating decorations and shadows
• it was possible (albeit unlikely) for existing content to rely on ::selection styles not being inherited
• custom properties on :root are no longer visible to ::selection pseudos unless defined on :root::selection

For more details, check out our explainer.

Although this new system is complex, we have successfully implemented it in Blink, and we’re planning to send an intent to ship for it soon. We recently shared our techniques for making it performant at BlinkOn 17. The main Blink features are HighlightOverlayPainting (stable in M105) and HighlightInheritance (stable in M105 for custom highlights only).

[smfr]

@anttijk @megangardner

[delan]

Hi, just following up on this, any thoughts? Happy to answer any questions you might have.

[anttijk]

These special inheritance rules are annoying (inheriting non-inherited properties?) and require special handling but I suppose they are implementable.

[delan]

Yeah, it’s more complicated than I would like, but I don’t think there’s an easier way to introduce inheritance while preserving the “innermost” behaviour of backgrounds and (now) decorations.

Would “support” (positive) best represent WebKit’s position overall, despite those drawbacks of inheritance?

[nt1m]

We'll add position: support in a week pending objections.