[css-ui] Can we standardize the behavior of appearance:auto/none as it relates to a control and its pseudo-elements?

[BoCupp-Microsoft]

https://drafts.csswg.org/css-ui/#appearance-switching

Can we standardize the behavior of appearance:auto/none as it relates to a control and its pseudo-elements?

Sorry if I'm late to the discussion, but I spent some time looking through this spec today and experimenting with the level of interop browsers currently have for -webkit-appearance. My conclusions are:

1. the primary value of appearance is in specifying 'none' for built-in controls so that authors can build a custom look on top of a base set of styles using CSS.
2. interop of -webkit-appearance:none is poor between browsers

Here's a JSBin with some samples and notes on the interop issues I'm talking about.

And here are some questions about what can be specified to help address those interop issues:

• Can we specify whether fallback content should appear when the control has appearance:none set?
• Can we specify whether all psuedo-elements of a control and the control itself should "disappear" when the control has appearance:none set?
• Can we specify what CSS should be used to make a control disappear: display, height/width, visibility?
• Some controls, like button, fallback to a base rule set to enable incremental styling by the author instead of "zeroing" the CSS to such an extent that the author must effectively style all aspects of the control. Can we specify a consistent behavior for all controls, i.e. pick one of the zeroing or base rule set behaviors?
• Some controls (e.g. checkbox, range, meter and I'm sure others) require that appearance:none be set before styling of a control has any effect. Can we specify that this is required behavior for controls (maybe new ones will be invented) and which existing controls are exempted due to web compat.

Thanks in advance for your thoughts!

[jonjohnjohnson]

See #3024 "[css-ui] Unprefix 'appearance' and/or make the spec web-compatible"

[zcorpan]

cc myself, @jugglinmike @frivoal @gregwhitworth @foolip @MatsPalmgren @jwatt @tkent-google

[zcorpan]

I think the answer to your questions is mostly "yes" - we can certainly specify things to help improve interop, and there has been some work already towards this. For example whatwg/html#4322

There's more to do of course. But also, we may not be able to (or want to) specify all aspects of controls, since we may want to allow for differences between platforms and kinds of devices, and allow for innovation for controls. But web developers also want to style them, and want consistent behavior.

[jugglinmike]

Here are a few relevant patches:

• [css-ui] Disallow internal pseudo-elements and 'appearance' values
• [css-ui] Hide proprietary appearance values
• Define how some properties disable 'appearance'

[SebastianZ]

See also #1018.

Sebastian