Safari 27 beta opens up the form control, scroll, and the cascade

I opened the post on a coffee break and ended up wiring three small demos before lunch, which is usually a good sign. The short version: per WebKit, Safari 27 beta brings 58 new web-platform features, 525 fixes, and 4 deprecations. The longer version is where the interesting bits live, because a handful of those features change things you actually write every day in HTML and CSS.

The headline list

WebKit calls out a few items as the marquee additions in the beta: customizable <select>, scroll anchoring, transform-aware anchor positioning, WebAssembly's JavaScript Promise Integration (JSPI), and several new CSS keywords and pseudo-classes. There's also a "subpixel inline layout" pass for more precise text rendering, and 30 SVG fixes aligned with the SVG 2 Working Group's decisions. That's a lot of surface area for one release — so let's walk through the parts most likely to land in a stylesheet.

A form control you can actually style

Customizable <select> is the change I expect to show up in design reviews first. Per the WebKit announcement, it lets authors style the form control without reaching for a JavaScript library — you opt in with the CSS appearance value base-select:

select {
  appearance: base-select;
}

That single line is the entry point. From there the control is yours to style, with the native semantics still intact. WebKit has a separate post on the "golden rule" of doing this accessibly, which is a strong hint that the temptation to swap visible labels for icons-only is real and they'd rather you didn't.

Scroll anchoring as a default, not a workaround

The second one I'm relieved about: scroll anchoring is in the beta. WebKit describes it as preventing visual jumps when content loads above the viewport — the classic "I was reading paragraph six, an ad inserted above me, now I'm on paragraph four" annoyance. It's been a behaviour you had to script your way around. Now it's a platform-level fix in this engine.

Three new CSS keywords worth knowing

The post mentions three additions to the CSS surface that come up enough to memorise:

• :heading — a new pseudo-class. Per WebKit it targets headings; the post doesn't go further than naming it, so don't read it as a replacement for h1–h6 selectors until the spec text confirms what it matches.
• revert-rule — a new keyword. Slotting it into the existing family of cascade-control keywords gives authors another tool for undoing a cascade decision; again, lean on the source for the exact behaviour before adopting it.
• stretch — a keyword for box sizing. If you've been writing width: 100% and fighting margins, this is the kind of addition that's worth a five-minute experiment.

The post doesn't spell out every nuance of how each behaves, so when you reach for one, check it against the spec text the release links to. Don't trust a description, including this one, over what the source actually shows.

Outside CSS: Wasm, text, and SVG

JSPI is the WebAssembly headline. WebKit's framing is that it lets Wasm code participate in JavaScript's async world — meaning a Wasm function can suspend and resume around a JS promise without contortions. If you're not shipping Wasm today, file it; if you are, this is the bit you'll want to read first in the full notes.

Subpixel inline layout is the kind of change you feel without noticing — text positioning gets more precise, which mostly shows up as less jitter at certain zoom levels and a little less drift in justified text. And the 30 SVG fixes are framed as alignment with SVG 2 Working Group decisions, so expect existing SVG to behave a little more like the spec says, not less.

What I'm watching next

A few honest caveats. The WebKit post is the announcement for a single engine's beta — it doesn't tell us what other engines have shipped of the same features, or whether any of this is Baseline yet, so I'm not going to claim either. If you ship to a broad audience, the question to ask before adopting any of these isn't "did Safari ship it?" but "what does this feature look like in the other engines today?" The answer for appearance: base-select, :heading, revert-rule, and stretch will decide whether you can use them outright or behind @supports.

The piece I'm following next is the customizable <select> story — specifically how progressive enhancement around appearance: base-select settles in across engines, because that's where this release stops being "Safari has a new toy" and starts being something you can ship to everyone.