Add UA stylesheet for <select> base appearance #10670
Conversation
Discussion here: w3c/csswg-drafts#10857
domenic
added
addition/proposal
|
|
||
| <!-- TODO should this go at the top of the section right below "the select element"? --> | ||
| <p>The following styles are expected to apply to <code>select</code> elements when they are being | ||
| rendered as a <span>drop-down box</span> with <span>base appearance</span>:</p> |
There was a problem hiding this comment.
Where do we define what base computes to when it's a list box?
There was a problem hiding this comment.
In this iteration I'm not proposing supporting base appearance on list box rendering. In chromium, I am making it do the same thing as appearance:auto, and our plan to do forward compat is to add a CSS @supports rule when appearance:base is ready for list box rendering.
|
I just updated this PR to match the latest styles from the CSS issue. I'm not sure what we should say about properties that are supposed to be inherited, like color and font. Should we explicitly say color:inherit? Should we have some text which says that all properties not listed here should be whatever their unset value is? Should we just say that other UA styles should not apply? There is a bunch of UA styles in chromium I have to undo by adding extra CSS, and while I don't want to list all those properties specifically in this spec I also think it would be a good idea to mention that when implementing this feature, you have to undo those. |
|
I think we need to list all those properties explicitly in the spec! Why would we not? |
|
I think @josepharhar is describing Chromium's implementation of "base appearance", as in principle "base appearance" would start from an unstyled element so you would not have to undo styling, unless it was some global style. |
|
I see. That's probably covered by the CSS spec for |
|
Agreed! I'll omit the properties which have their default. |
This prevents authors from breaking accessibility
source
Outdated
| min-block-size: max(24px, 1lh); | ||
| min-inline-size: 24px; |
There was a problem hiding this comment.
I think @dbaron had thoughts on better defaults for these so they can work better in flexbox/grid
There was a problem hiding this comment.
so long as the minimum sizing doesn't fall below 24px height/width. these were specifically added so that the customizable select would meet the WCAG 2.2 minimum target size success criterion by default.
| text-transform: initial; | ||
| text-align: initial; | ||
| text-indent: initial; | ||
| background-color: transparent; |
There was a problem hiding this comment.
Chrome seems to set this to color-mix(in lab, currentColor 10%, transparent) in Forced colors mode. Should that be copied to this PR or should chrome actually just be keeping this as transparent?
There was a problem hiding this comment.
Chrome also seems to set different values in forced colors mode for a few other properties too.
Such as the selects border both normally and on hover.
The hover background change for the options is also lost in forced colors mode too?
I think it would be good to define how all this is expected to work to ensure we're interopable in that mode too.
|
This PR won't be merged and will instead be included in a bigger PR including all customizable select PRs: #10548 |
This PR adds a stylesheet for customizable select which applies when the select element has base appearance.
Discussion here: w3c/csswg-drafts#10857
Customizable select proposal: #9799
(See WHATWG Working Mode: Changes for more details.)
/infrastructure.html ( diff )
/rendering.html ( diff )