Re: [csswg-drafts] [css-ui] Changing UA styles based on the computed value of the appearance property (#10028)

I’ve tried implementing a few solutions to this and here are my thoughts:

### solution 1: internal pseudo-class for child content

We could have an internal pseudo-class which matches the select when it has a child in the new content model, which would be a button or datalist. This way we can adjust the UA styles based on the new DOM to get the new UA styles. I currently have this implemented in the chromium prototype here: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/resources/html.css;l=918-929;drc=df34b11bbe7a46c53c782a6d4a24145a4af05e10

Issues:
- In the case that you put appearance:bikeshed on a select which doesn’t have the new `<button>` or `<datalist>` content, you won’t get updated UA styles.

### solution 2: adjust style after style calculation to remove old appearance:auto UA styles

After style recalc, chromium and webkit have a style adjuster which changes the computed style. We could look for appearance:bikeshed on a select element here and remove a few styles we don’t want, like border and background-color. I started a patch to implement this in chromium here: https://chromium-review.googlesource.com/c/chromium/src/+/5348242/2/third_party/blink/renderer/core/css/resolver/style_adjuster.cc

Issues:
- If the author uses appearance:bikeshed and then wants to apply the exact same border, background-color, etc that we removed from the UA stylesheet, it will be removed by the style adjuster and the author won’t even know why.

### solution 3: leave the UA styles in there

We could just leave the problematic UA styles in there and make the developer revert all of them when they apply appearance:bikeshed.

Issues:
- This has poor ergonomics, would get negative feedback from developers, and may hurt adoption of this feature.

### solution 4: put an attribute on select to opt-in

We could use an HTML attribute instead of appearance:bikeshed to opt in to the new behavior and content model (similar to to the [proposed switch attribute?](https://github.com/whatwg/html/pull/9546)). This attribute could be used in the UA stylesheet to change the styles as desired.

### solution 5: add an internal pseudo-class or @ rule which matches when style is computed to appearance:bikeshed

We could add an internal @ rule or internal pseudo-class to gate the UA styles based on appearance as desired.

Issues:
- As I explained in the issue description, this would require two style recalcs to get a final style.


@emilio do you have any thoughts?

-- 
GitHub Notification of comment by josepharhar
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10028#issuecomment-1982208956 using your GitHub account


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

Received on Thursday, 7 March 2024 02:09:47 UTC