Add CSS `field-sizing` (previously `form-sizing`)

[Schweinepriester]

• [css-ui-4] Add 'field-sizing' property w3c/csswg-drafts#9251
• https://botsin.space/@intenttoship/110987203053231471
• Chrome: Intent to prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/cA-cmgrA_QE/m/6uF_LYq4AAAJ
• css-ui field-sizing property mozilla/standards-positions#849
• css-ui field-sizing property WebKit/standards-positions#231

[karlhorky]

Nice showcase of the "auto-height <textarea>" use case for this by @yisibl here:

• https://twitter.com/yisibl/status/1704879401710846429

[karlhorky]

@jh3y noted on 6 Oct 2023 that Chrome Canary 120 rolled out with this: https://twitter.com/jh3yy/status/1710398436917321799

[sillvva]

Renamed to field-sizing https://twitter.com/jh3yy/status/1714275910172791211

[Schweinepriester]

@sillvva thank you for letting us know, I changed the title! o7

[argyleink]

shipping in Chrome 123 https://chromestatus.com/feature/5176596826161152

[yisibl]

shipping in Chrome 123 https://chromestatus.com/feature/5176596826161152

Chrome hasn't seen an officially enabled CL yet and may have to wait for the PR merge in the HTML spec. whatwg/html#9903

[Schweinepriester]

a blog post: https://polypane.app/blog/field-sizing-just-works/

mozilla position has been marked positive 3 days ago: mozilla/standards-positions#849 (comment) 🥳

[LeaVerou]

What is the blocker here? The HTML PR @yisibl mentioned has been merged.

[yisibl]

What is the blocker here? The HTML PR @yisibl mentioned has been merged.

Good news, this was finally released in Chrome 123.

Before shipping, I raised some issues and got them fixed. I hope this can be used as a reference for other browsers.

[Schweinepriester]

MDN entry: https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing

and as such data available now: https://caniuse.com/?search=field-sizing