[csswg-drafts] [CSS Pseudo] Revisit CSS Custom Properties in highlight pseudos (#9909)

schenney-chromium has just created a new issue for https://github.com/w3c/csswg-drafts:

== [CSS Pseudo] Revisit CSS Custom Properties in highlight pseudos ==
In [Issue #6641](https://github.com/w3c/csswg-drafts/issues/6641) the issue of CSS Custom Properties used in highlight pseudos, particularly selection, was discussed. The motivating use case was the heavy uses of custom properties to define the colors for selection highlights, and these custom properties were typically defined on :root.

The resolution was to copy custom properties from :root to :root::selection (and other highlights).

In trying to enable Highlight Inheritance for ::selection in chromium, it has come to my attention that custom properties are the recommended way to achieve the _behavior_ of highlight inheritance in the absence of an _implementation_ of highlight inheritance. And this pre-existing workaround breaks when highlight inheritance is actually implemented.

This is a simple example of how custom properties are used:
```
<style>
  :root {
   --selection-color: lightgrey;
  }
  ::selection {
   background-color: var(--selection-color);
  }
  .transparent {
   --selection-color: transparent;
  }
</style>
<p>Some <strong>not transparent</strong> highlight</p>
<p class="transparent">Some <strong>still transparent</strong> highlight</p>
```

With the non-spec-compliant originating inheritance implemented by all browsers today, all of the transparent <p> is transparent when selected, including the descendant ```<strong>``` element. The corresponding example with highlight inheritance requires this:
```
<style>
  :root {
   --selection-color: lightgrey;
  }
  ::selection {
   background-color: var(--selection-color);
  }
  .transparent::selection {
   background-color:transparent;
  }
</style>
<p>Some <strong>not transparent</strong> highlight</p>
<p class="transparent">Some <strong>still transparent</strong> highlight</p>
```

The original example with highlight inheritance renders both paragraphs as grey when selected.

The use of custom properties for selection is out there in the world right now. In particular, developers looking to style selection may well end up on Stack Overflow where they find things like this:

[Setting a custom property on inline style to control selection from javascript](https://stackoverflow.com/questions/68988675/is-there-any-way-to-change-background-color-of-selection-selected-text-using)
[Also controlling selection colors through JS](https://stackoverflow.com/questions/77900349/htmlcssjs-dynamic-selected-text-highlighting-color-change)
["CSS custom properties / CSS Variables will be a better approach"](https://stackoverflow.com/questions/66817591/change-selected-text-color-easily)

As I understand things, it highlights a use case that will continue to exist once highlight inheritance is shipped: You can't set pseudo elements in inline style, so the only way to control the highlights with inline style is through custom properties.

I hate to say this, but I propose option (1) we resolve on inheriting custom properties from the originating element for highlight pseudos.

The alternative, I think , is option (2) to special case ::selection and continue to use originating inheritance as implemented by browsers today, and only use highlight inheritance for the other highlight pseudos. In my opinion that's worse that option 1 given there is some utility in inheriting custom properties for these pseudo elements too.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9909 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 5 February 2024 15:58:02 UTC