Safari 16 ships a rare trifecta of CSS upgrades

Apple has released Safari 16, and for front-end developers the headline is interoperability. Three long-requested layout and styling features — subgrid, container queries, and font palettes — have landed in WebKit, closing gaps that have made cross-browser CSS work uneven for years.

Container queries finally reach Safari

Safari 16 adds size queries for container queries, meaning elements can now respond to the dimensions of their nearest container rather than the viewport. The companion container query units are also supported. Chrome has had both since version 105; Firefox remains the only major browser without full support.

Subgrid and grid animation

Subgrid support is now present in both Safari and Firefox, with Chrome actively developing its own implementation. Safari 16 additionally brings animatable grids — the ability to transition grid layout properties such as grid-template-columns and grid-template-rows. Firefox has supported this since 2019, and Chrome has had some form of it for a while.

Motion, scroll, and text refinements

  • Offset Path (also known as Motion Path) is now supported, allowing elements to be animated along a defined path. This broadens cross-browser coverage that has been solid since 2020.
  • Overscroll behavior is implemented via the overscroll-behavior property, giving developers control over scroll chaining and overflow effects.
  • text-align-last now works everywhere, completing cross-browser support for the property.
  • The resolution media query is also fully supported across browsers now, letting authors tailor styles to screen pixel density.

Developer tooling gains a flexbox inspector

The updated WebKit developer tools include a flexbox inspector, a new Timelines tab with an experimental screenshots timeline, and container queries information. Apple's WWDC session provides a 32-minute walkthrough of the changes, which also include support for AVIF images and a new default theme for macOS.

A list of new WebKit features.
Source: WebKit.org

Safari 15 brought notable UI and theme changes, but version 16 is a substantial step forward for the rendering engine itself. It addresses the criticism that WebKit lags behind Blink and Gecko on modern CSS features, and the pace of these additions suggests the gap is narrowing.