Safari 27, through this site's lens

WWDC26 shipped Safari 27 (macOS 27 "Golden Gate," iOS/iPadOS 27, visionOS 27): ~58 new web-platform features. This site already leans on a bunch of them, so this cut shows where the platform caught up, not the whole changelog. Source: the WebKit team's News from WWDC26: WebKit in Safari 27 beta.

Every card says what Safari 27 brings, and the strip below runs a live check of your browser. This whole site bets on high-octane fuel: when the engine has a feature it burns it, otherwise it falls back. "Not in your browser" never means broken.

appearance: base-select now stable

Style a real <select>, dropdown and all, with CSS. No JS rebuild, no accessibility loss. Safari 27 takes it stable and adds the ::picker-icon and ::checkmark pseudo-elements.

On this site: the homepage and the horizon demo already ship a Luna-styled base-select with a beveled drop-button, behind an @supports guard, so browsers without it get the native dropdown. Safari going stable just means more visitors see the styled one, with zero code change here.

Anchor positioning upgrades Safari 27

Safari 27 makes anchored elements follow transformed positions, and adds position-anchor: normal | none plus refined anchor-valid / anchor-visible matching.

I'm pinned to that button with position-anchor + anchor(), no JS measuring. In Safari 27 I'd track it even through CSS transforms.

On this site: the photo and track tooltips use CSS anchor positioning as the JS-free keyboard fallback. Transform-aware anchoring matters here because windows move via transform when you drag them, so an anchored popover can stay glued to a window mid-drag.

Scroll anchoring Safari 27

When content loads above the viewport, the browser keeps your scroll position instead of jumping. Controlled with overflow-anchor.

On this site: every page is a pinned window whose .content scrolls internally. When content lands above the fold late (a lazy image, the server-injected tracklist), scroll anchoring kills exactly that jump, native in Safari now, no JS scroll-restoration to hand-write.

The :heading pseudo-class Safari 27

Match <h1>–<h6> in one selector instead of enumerating them (and one day :heading(2,3) for levels).

If your browser has :heading, this is green.

So is this one. One rule, every level.

(Body text stays the default color.)

On this site: a small win. The design tokens already style captions and headings off one font stack; :heading would let the shared nav.js CSS reach every page's headings without knowing the tag.

CSS odds & ends Safari 27

A grab-bag that tidies things we hand-roll:

width: stretch;          /* fill the container, margins accounted for  */
color: revert-rule;      /* roll one cascade rule back, not the whole property */
contain: style;          /* scope CSS counters / quotes to a subtree    */
color: oklch(... );      /* + new srgb-linear / display-p3-linear spaces */

On this site: contain: style is the honest version of the quote/counter scoping we avoid; the linear color spaces pair with the OKLCH + P3 work already in the homepage.

Platform & worker upgrades Safari 27

Less visible, more structural:

  • Top-level await, off a full ESM-loader rewrite for standards compliance.
  • WebAssembly JSPI, so synchronous Wasm can suspend and await JS promises.
  • Service Worker static routing, routing rules that skip the SW entirely.
  • Transferable streams, plus ReadableStream.from() and async iteration.
  • Cookie Store API maxAge.

On this site: Service Worker static routing is the one I keep eyeing for sw.js. The cache-first / SWR / network-only split lives in JS in the fetch handler today; static routes could declare some of it and skip waking the worker at all.

Spatial web Safari 27

The <model> element graduates from visionOS-only to iOS, iPadOS, and macOS; visionOS 27 adds immersive website environments and spatial-photo controls on <img>.

On this site: not used (no 3D), but filed. A resto-mod car site has obvious one-day uses for a real <model> viewer.

The talks WWDC26

WebKit's web-technology sessions roundup. Six worth a watch; I flag the two that land squarely on this site.

  • Grid Lanes: CSS-only masonry, no JavaScript. On this site: the horizon page flagged masonry as "not shipped" mid-2026, and here it is shipping. A direct fit for the photo grid: a ragged-height contact sheet, no fixed-square crop.
  • Customizable Select: the full appearance: base-select deep dive. On this site: the talk behind the first card above, the Luna combobox we already ship.
  • What's New in Safari 27: the overview (everything on this page, from the source).
  • Meet the model element: embedding 3D, now cross-platform.
  • Immersive website environments: spatial experiences on visionOS.
  • Web Extensions: building and distributing browser extensions.

I paraphrase the feature names and scope from the WebKit post up top; the chips run real CSS.supports() and interface probes in your browser. Drag this window by its title bar; ⌘K jumps anywhere.