Overview of the new spec for ::selection and other highlights, the status of our implementation, the challenges we still face, and what’s next. Presented by Delan Azabani for the BlinkOn 15 conference (online), on November 16th & 17th, 2021. Video of the talk at https://youtu.be/Vh2niGIqtOc

1. CSS highlight pseudos
Delan Azabani (she/her)
November 2021
1

2. Hi, I’m Delan!
Building on the web since ~2004
Building the web since 2017
Joined Igalia in December last year
+
Special thanks to Rego ( ), who was responsible for much of the
work discussed here, and has been a huge help throughout this project.
*
azabani.com @dazabani
@regocas
2

3. Background
Spec overview, current status, next steps
Igalia’s work is primarily funded by our customers
This project was sponsored by
Original patch allows recoloring spelling and grammar errors
Original task was to upstream the patch, but in practice…
3

4. Spec overview
“Real” elements are known as originating elements
Four built-in pseudo-elements
::selection (widely implemented)
::target-text (shipped in Blink)
#:~:text=keyword → keyword
::spelling-error
::grammar-error
Custom highlights with ::highlight(…)
Conceptually unlike other pseudo-elements
Inheritance-based style propagation
Tricky “overlay” painting behaviour
4

5. Not like other pseudos
All other pseudos interact with the box tree in some way
Highlight pseudos do not generate new boxes
they are singletons, but omnipresent within every box
styles vary depending on location in tree (“innermost”)
5

6. Highlight styles are inherited
<style>aside::selection { background: yellow; }</style>
<p>The quick brown fox jumps over the lazy dog.
<aside>The fox is <b>brown</b>.</aside>
6

7. Highlights “lift” text and decorations
(press z/x to animate)
fox
qui own
kc br
7

8. Highlights can add their own shadows
(press z/x to animate)
quick brown fox
qui fox
ck brown
8

9. Current status
::{spelling,grammar}-error (CSSSpellingGrammarErrors)
supported in style like any other highlight pseudo
paint support is limited to text-decoration-color
Highlight inheritance (HighlightInheritance)
supported for the four built-in highlight pseudos
needs optimisation for legacy content (*::selection)
Custom highlights (HighlightAPI)
Highlight painting is improving…
…but mostly only for ::selection
9

10. Highlight painting is improving…
(press z/x to animate)
qui own fox
brown
kc br
10

11. …but mostly only for ::selection
11

12. Next steps
12

13. Inheritance
Make ::highlight() use inheritance too →
Iron out edge cases, invalidation, and
color:currentColor
Improve perf of global ::selection rules
Investigate compat risks for ::selection →
Expose inherited styles to devtools, e.g.
<div>Tex<span>t sele</span>​
cted</div>
CL:3237158
csswg-drafts#6774
13

14. ::selection rework
Design doc:
Merge the ::selection painter with the paint code for
other markers, including all of the ::selection-only
features
Replace k{Back,Fore}ground with phases for each
highlight, skipping over text in higher overlays
Help wanted with data structures: can the selection
“simply” become DocumentMarkers? What happens if
you Select All?
https://go.daz.cat/iri4b
14

15. Spec issues
— ensuring contrast of highlight colors (needs discussion)
— highlight text decoration painting ( work in progress)
— highlights and custom properties ( pending review)
— clarify paired-cascading behaviour ( pending review)
— compat risk with mixed highlight colors (needs discussion)
— highlight UA defaults and inheritance (needs discussion)
Testability issues
Need a way to reliably create spelling and grammar errors ( )
Need a way to allow UA highlight “tweaks” without breaking reftests
#6150
#6022 #6666
#6264 #6663
#6386 #6665
#6774
#6779
wpt#30863
15

16. More next steps
Minimal text-decoration painting impl for highlights other than ::selection?
Look into reconciling squiggly lines with wavy/dotted decorations (
)
Fix ::selection text-shadow clipping to take offsets into account (part of
)
Vertical scripts complicate this; we need to migrate away from
DrawLooper ( ) and clean up our coordinate handling
1257553
1147859
671438
16

17. Further reading
These slides (interactive):
Index of demos/patches/issues:
Blog post in May:
Second blog post coming soon ( )
on Slack
https://go.daz.cat/ufuce
https://go.daz.cat/giige
https://go.daz.cat/d65vn
@dazabani
#css-highlight-pseudos
17

18. 18