[css-ui] Change appearance: button to only apply to buttons

[zcorpan]

https://drafts.csswg.org/css-ui-4/#valdef-appearance-button

See whatwg/html#4857

Change button to not be applicable to non-buttons
intent to ship

I didn't see a spec issue about this, so filing this.

I think the change to css-ui to match is to move button to the list of <compat-auto> non-terminal value type.

cc @tkent-google @emilio @smfr @frivoal

[zcorpan]

cc @heycam

[heycam]

For what it's worth, telemetry that I added to Firefox to check for -moz-appearance value usage showed that 0.051% of pages loads used -moz-appearance: button on some non-widget element, and 0.016% of page loads used -moz-appearance: button on a widget whose default appearance is not button.

[frivoal]

I believe we have a much older resolution saying that the WG didn't want any value other than none or auto, except for compat reasons. By that logic, if button on arbitrary elements isn't needed for compat, we ought to be retiring it, and making it part of <compat-auto> seems like the right way to do that.

@heycam Is 0.051% an acceptably low threshold for Mozilla for this particular change?

[heycam]

To me it feels a little high. That's one in every 2,000 pages.

[zcorpan]

There was more detailed analysis behind Chromium's decision to change this, see https://groups.google.com/a/chromium.org/forum/m/#!msg/blink-dev/QFXFzfQtlKk/YPOZLSoXCwAJ

This shipped in chromium 80. @tkent-google have there been any bug reports from this change?

[tkent-google]

This shipped in chromium 80. @tkent-google have there been any bug reports from this change?

AFAIk, there are only two bug reports.
https://bugs.chromium.org/p/chromium/issues/detail?id=1038687
https://bugs.chromium.org/p/chromium/issues/detail?id=1094709

We have no plan to revert the current behavior.

[css-meeting-bot]

The CSS Working Group just discussed Change appearance: button to apply only to buttons, and agreed to the following:

• RESOLVED: Limit 'appearance: button' to buttons once we figure out what buttons are

The full IRC log of that discussion

<fantasai> Topic: Change appearance: button to apply only to buttons
<Rossen_> github: https://github.com//issues/5174
<fantasai> florian: General principle that 'auto' does magic by tag, and 'none' turns of magic
<fantasai> florian: But we have some legacy stuff
<fantasai> florian: As specified, appearance: button makes things look like buttons
<fantasai> florian: even when not actually buttons
<fantasai> florian: We could reduce magic of button by only applying 'appearance: button' to buttons
<fantasai> florian: Mozilla was a bit skeptical
<tantek> q-
<emilio> scribenick: emiliop
<emilio> scribenick: emilio
<emilio> fantasai: I think this is one of the things that may be useful to do on things that are not buttons
<emilio> ... for visual reasons it may be useful. In a lot of cases they style it so that they look like their buttons, but if they weren't it would be useful
<iank_> q+
<emilio> ... I don't see a huge benefit from restricting this if we need to make it work for everything else so I'd lean towards not doing that
<fantasai> florian: Current definition allows to turn link into button ...
<emilio> florian: the current definition would allow you to turn stuff into buttons, but also weird cases where they should not
<emilio> q+
<tantek> not sure about the compat details, however I'm in favor of less magic here
<emilio> ack fantasai
<fantasai> florian: but do we reduce this to only compat necessity or do we let people make things into buttons when possible?
<Rossen_> ack iank_
<fantasai> iank_: I think part of the work with the simplifying making appearance sane was to limit the magic in scope
<fantasai> iank_: It seems like a bit of a reversal if we say, actually, we do want these to apply to everything
<fantasai> iank_: so prefer to restrict this down as much as possible
<Rossen_> ack emilio
<fantasai> emilio: If compat allows it, prefer to put less magic here
<fantasai> emilio: We have prefixed appearance, and hacky internal property to support 'appearance: button'
<emilio> s/prefixed/unprefixed, heycam|away implemented it
<fantasai> fantasai: wanted clarification...
<Rossen_> fantasai: are links explicitly called out? can they be used as btn?
<fantasai> florian: Current spec allows any element to look like a button
<fantasai> florian: Chrome says not many people use it, not even on links
<emilio> q+
<Rossen_> ack emilio
<fantasai> emilio: To be clear, magic of 'appearance: button' applies to everything except ? and ?
<emilio> input, textarea and non-listbox selects
<fantasai> iank_: I believe we've already shipped this in 80 which is quite a few releases ago
<fantasai> florian: by this you mean the simplification you proposed?
<fantasai> Rossen_: That means you're not breaking anyone who depends on this?
<fantasai> iank_: Got a few minor reports
<fantasai> iank_: no large-scale breakage
<fantasai> Rossen_: Based on data, we can live with scoping 'appearance: button' to buttons only, is this something we can resolve on?
<fantasai> Rossen_: Proposed resolution is scope 'appearance: button' to buttons only
<fantasai> Rossen_: Hearing no objections. Call it resolved. If there's issue wrt links, I'm sure we can re-oepn
<fantasai> smfr: Are we saying that 'appearance: button' only applies to the BUTTON element?
<fantasai> hober: <input type=button> ?
<fantasai> smfr: file input button?
<fantasai> florian: I guess it's BUTTON and <INPUT type=button>
<tantek> and reset
<fantasai> smfr: <input type=submit> ?
<fantasai> florian: Chrome folks can you clarify?
<tantek> Blink folks, what was implemented? <button> <input type=button|submit|reset>?
<fantasai> RESOLVED: Limit 'appearance: button' to buttons once we figure out what buttons are

[atanassov]

As a follow up on the previous discussion, we should define what buttons refer to.

[frivoal]

The conclusion reached during the meeting is a little bit flawed, as we used imprecise language and confused ourselves.

RESOLVED: Limit 'appearance: button' to buttons once we figure out what buttons are

As a follow up on the previous discussion, we should define what buttons refer to

We don't actually need to define what buttons are, because the way we achieve "Limit 'appearance: button' to buttons" is by making button part of the <compat-auto> non-terminal value type. This means the button keyword will behave identically to the auto, this lets widgets get their native appearance, and leaves other things alone. The result is that things that aren't supposed to be buttons can no longer forcibly be made into buttons, but we don't need to specify which is which, as determining what is the correct native appearance of various widgets is the responsibility of the host language (HTML), not of the css spec.

Based on that, the resolution is actually enough to make the edit to the spec, and does not need further research to determine what buttons are.