[csswg-drafts] [css-forms-1] use calc-size() for improved sizing of <button> and <select> (#12085)

dbaron has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-forms-1] use calc-size() for improved sizing of <button> and <select> ==
In https://github.com/w3c/csswg-drafts/issues/12019#issuecomment-2770409866 and in the [related presentation](https://dbaron.org/css/appearance-base-principles-testing) I proposed that we change the styles that are currently (for `<button>` and `<select>`):

```css
  min-block-size: max(24px, 1lh);
  min-inline-size: 24px;
```

into:

```css
  min-block-size: calc-size(auto, max(24px, 1lh, size));
  min-inline-size: calc-size(auto, max(24px, size));
```

This has the advantage that (as described in the examples in the presentation) we no longer override the intrinsic size of the text in the button or select, and thus it defaults to reasonable sizing behavior in flexbox and grid (rather than being willing to shrink down very small).

We didn't resolve on doing that in that issue, and this separate issue is to discuss whether we should in fact make that change.  (I think we probably should.)

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12085 using your GitHub account


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

Received on Tuesday, 15 April 2025 18:51:08 UTC