Safari TP 254 brings calc-size(), size shorthands and live pinch-to-zoom

Safari Technology Preview 254 shipped on October 8, covering WebKit’s 321068\@main…322634\@main range. No headline features, but the CSS additions land exactly where people previously had to work around the platform.

calc-size(): intrinsic sizes become computable

calc() only ever handled lengths, so intrinsic keywords — auto, fit-content, max-content — were untouchable. The usual escape was a wrapper element to measure, or reading the value back in JS and writing a fixed number.

TP 254 adds calc-size(), which allows arithmetic on intrinsic sizes:

.panel {
  height: calc-size(auto, size + 2rem);
}

The real value is not the arithmetic, it is animation: intrinsic sizes themselves are not interpolable, but a calc-size() expression is. “Height from auto to a fixed value” previously required tricks like grid-template-rows: 0fr → 1fr; now there is a language-level path.

Two shorthands: size and per-side radius

• size / min-size / max-size: set width and height in one declaration instead of two
• border-*-radius side shorthands: border-top-radius sets both top corners at once, replacing border-top-left-radius + border-top-right-radius

Both are “one line fewer”, but in a design-token system they remove a lot of repetition — this site’s styles are full of paired radius declarations.

Rendering: live pinch-to-zoom on macOS

macOS gained live pinch-to-zoom: content stays sharp during the gesture (no bitmap scaling) and fixed / sticky elements follow the zoom. For reading long articles on a trackpad that is a real improvement.

Bugs fixed, all of them typical

• View timeline animations froze once a sticky-positioned inline ancestor stuck to the scroll container
• Accelerated animations of opacity to 0 (including scroll-driven ones) could leave elements fully visible instead of transparent
• Accessibility: VoiceOver can now press buttons, links and form controls styled with pointer-events: none; ARIA menuitem variants are no longer all announced as “selected”; multi-part error messages on iOS are no longer read backwards with repeats

The judgement

calc-size() is the one to remember: it turns intrinsic sizes from read-only into something expressions can use. Caveat — this is Technology Preview; there is no date for stable Safari, so in production code it can only be progressive enhancement, with a plain declaration in front as fallback.

Source: WebKit’s “Release Notes for Safari Technology Preview 254” (2026-10-08).