Browser support

Version 3.0 only uses web platform features that are Baseline widely available. The oldest browsers the build checks against are:

node scripts/gb-css-validate.mjs prints these values, and the CSS is compiled against them. They move as Baseline moves, so rerun the script to see the current numbers.

Newer features are either guarded with @supports or allowed to be ignored where a browser lacks them. The exceptions are listed, with the reason for each, in scripts/gb-baseline-allow.json. In short:

• field-sizing: a textarea keeps its fixed rows and scrolls.
• interpolate-size: size changes to intrinsic keywords jump instead of animating.
• starting-style: an element appears without its enter transition.
• transition-behavior: discrete properties change at once.
• scrollbar-gutter: no reserved gutter, so a small layout shift when a scrollbar appears.
• overscroll-behavior: scroll chaining at the edge is not contained.
• view-transitions: the view transition styles never match.
• container-scroll-state-queries: the app bar does not switch to its stuck look.
• forced-colors: ignored where forced colors mode does not exist (Safari).

Guard your own newer CSS the same way, so older browsers keep a usable fallback:

<textarea rows="2" aria-label="Message">Type here and add lines.</textarea>

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

Test on the oldest version of each browser in the table, not only the current release. To see which Baseline features the repository uses, run npm run gb:baseline.