BASELINE 2026

field-sizingで、 textareaを内容に合わせる

field-sizing: content が主要ブラウザで使えるようになりました。 @supports で囲めば、プログレッシブエンハンスメントとして今すぐ導入しやすいです。

Progressive Enhancement 未対応でも普通に使えて、対応環境では自然に伸びます

Fallback

固定サイズのtextarea

Comment

Enhanced

Comment

Core CSS

textarea {
  min-block-size: 4lh;
  max-block-size: 12lh;
}

@supports (field-sizing: content) {
  textarea {
    field-sizing: content;
  }
}

Point

固定サイズでも使えるUIにしておき、対応ブラウザではCSSだけで自動対応します。