Field-sizing property, for content-responsive form inputs

[mirisuzanne]

Description

The field-sizing property in CSS allows authors to opt-in to content-based sizing for text-based inputs, selects, and textareas. This is a very common request from authors, and has historically required JS. But content-intrinsic sizing is pretty a pretty common default in CSS, and it would be great to have this ability on form-fields cross-browser!

Specification

https://drafts.csswg.org/css-ui/#field-sizing

Additional Signals

I'm not aware of any web compatibility issues.

• WP Tests: https://wpt.fyi/results/?label=master&label=experimental&aligned&q=field-sizing

Browsers:

• Blink: shipped in 123
• Webkit:
  • bug: https://bugs.webkit.org/show_bug.cgi?id=264720
  • position: https://webkit.org/standards-positions/#position-231
• Gecko:
  • bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1832409
  • position: (couldn't find it)

Author workarounds:

• Many JS workarounds
• an article on CSS Tricks
• annpm autosize package

Author interest in field-sizing:

• Field Sizing Just Works! from PolyPane
• Better form UX with the CSS property field-sizing from Stephanie Stimac

[lukewarlow]

https://github.com/mozilla/standards-positions/issues/849 - here's the positive Firefox standards position btw.