[appearance: user-agent] Opt-in to the current OSes control variant

[gregwhitworth]

Related to issue #688 there have been surveys done in the past where developers do want to provide the same experience of a control to that of other applications on the operating system. This issue is to kick off the initial discussion for some proposal. And while it's not exactly the same, @domenic did a poll regarding matching the platform for JSDom and the results are effectively split between complete interop (*nix) and matching the platform it's running on.

The problem state: As a developer I want to be able to have the user-agent leverage its preferred solution for a control/component.

Proposal:appearance: user-agent

What does this mean? Within Open UI we've stated that controls/components defined by us will be interoperable by default. This means that the styles and behaviors need to be consistent in order to be relied upon and overridden (clarifications on this in #688) easily by authors. So let's use an example using the <selectmenu>:

<selectmenu>
  <option>Option</option>
  <option>Option</option>
  <option>Option</option>
  <option>Option</option>
</selectmenu>

If you test this in a Chromium browser with experimental flags enabled it renders a very basic style:

Note: The styles shown in the image haven't been resolved on by Open UI as of the creation of this issue.

If we then leverage user-agent like so:

<selectmenu style="appearance: user-agent">
  <option>Option</option>
  <option>Option</option>
  <option>Option</option>
  <option>Option</option>
</selectmenu>

The user-agent will serve whatever they desire and will NOT adhere to the standards for appearance, DOM structure or behaviors even if defined for a given control or component. This would result in a similar result as we have with <select> today if the user-agent desired to align this with their other controls/components.

Edge (Mac OS)

Firefox (Mac OS)

Safari (Mac OS)

Android

iOS

[brechtDR]

I personally like this idea. Especially if I think about all the fancy things that devs will create with the selectmenu that aren't mobile friendly at all. It could potentially help with A11Y on touch devices to just show a default based on user agent there.

[mfreed7]

I like the proposal to allow developers to opt-in to browser and platform "native" styling for controls. I'm curious, though, do we need a new value for this? What about this?

• appearance: auto = browser and platform specific styling
• appearance: none = interoperable styling, fully overridable by developer CSS

This is roughly what we have today with existing form controls, modulo the bit about "interoperable" for appearance: none. But pretty close?

If desired, e.g. for <selectmenu>, the spec can say that the default UA stylesheet contains

selectmenu {
  appearance: none;
}

so that the default is "interoperable".

[annevk]

I'm not sure why we have this discussion here and in w3c/csswg-drafts#5998?

[gregwhitworth]

Agreed, given this one is primarily heading back down the appearance route, let's close as dupe to the CSSWG issue.