---
title: "aadhar.sh/garage/safari 27"
description: "What Safari 27 ships that this site already leans on: base-select going stable, anchor positioning upgrades and scroll anchoring, with live support checks."
path: "/garage/safari27"
section: "garage"
kind: "content"
updated: "2026-06-09"
source: "https://aadhar.sh/garage/safari27"
---

> Site index: https://aadhar.sh/llms.txt
> Section index: https://aadhar.sh/garage/llms.txt
> This is the Markdown twin of a page on aadhar.sh. The HTML at the source
> URL below is the original, and is hand-written and unminified on purpose.

# Safari 27, through this site's lens

[WWDC26][wwdc] 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 covers only where the platform caught up. Source: the [WebKit][webkit] team's [News from WWDC26: WebKit in Safari 27 beta](https://webkit.org/blog/17967/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][pseudo-element].

On this site: the homepage and the [horizon](https://aadhar.sh/garage/horizon) demo already ship a Luna-styled [base-select][customizable-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][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][popover-api] 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][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][oklch] + P3 work already in the homepage.

## Platform & worker upgrades Safari 27

The structural, less visible upgrades:

- **Top-level `await`**, off a full [ESM][es-module]-loader rewrite for standards compliance.
- **[WebAssembly JSPI][jspi]**, so synchronous Wasm can suspend and await JS promises.
- **[Service Worker][service-worker] static routing**, routing rules that skip the SW entirely.
- **[Transferable streams][transferable-streams]**, plus `ReadableStream.from()` and async iteration.
- **[Cookie Store API][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](https://webkit.org/blog/17974/web-technology-sessions-at-wwdc26/). Six worth a watch; I flag the two that land squarely on this site.

- [**Grid Lanes**](https://developer.apple.com/videos/play/wwdc2026/314/): CSS-only [masonry][masonry], no JavaScript. On this site: the [horizon](https://aadhar.sh/garage/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**](https://developer.apple.com/videos/play/wwdc2026/315/): 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](https://developer.apple.com/videos/play/wwdc2026/204/): the overview (everything on this page, from the source).
- [Meet the `model` element](https://developer.apple.com/videos/play/wwdc2026/215/): embedding 3D, now cross-platform.
- [Immersive website environments](https://developer.apple.com/videos/play/wwdc2026/320/): spatial experiences on visionOS.
- [Web Extensions](https://developer.apple.com/videos/play/wwdc2026/216/): 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.

[wwdc]: https://en.wikipedia.org/wiki/Worldwide_Developers_Conference "Apple's Worldwide Developers Conference, held each June, where it announces new operating systems and developer tools."
[webkit]: https://en.wikipedia.org/wiki/WebKit "The open-source browser engine that powers Safari."
[pseudo-element]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements "A CSS selector for a part of an element that has no tag of its own, such as ::before or a dropdown's picker icon, so it can be styled."
[customizable-select]: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select "The CSS value appearance: base-select, which lets a page fully style a native select dropdown, including its open list of options."
[anchor-positioning]: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Anchor_positioning "A CSS feature that places one element relative to another, such as a tooltip pinned to its button, without JavaScript measuring positions."
[popover-api]: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API "A browser API for showing content above the rest of the page, such as menus and tooltips, with built-in show, hide and dismiss behavior."
[scroll-anchoring]: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_anchoring "A browser behavior that keeps what you are reading in place when content loads or grows above it, so the page doesn't jump."
[oklch]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch "A CSS color notation built from lightness, chroma and hue, arranged so equal steps in the numbers look like equal steps to the eye."
[es-module]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules "JavaScript's built-in module format, where files share code through import and export statements."
[jspi]: https://v8.dev/blog/jspi "JavaScript Promise Integration: a WebAssembly feature that lets synchronous Wasm code pause while it waits on a JavaScript promise, then resume."
[service-worker]: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API "A script a site installs in the browser that sits between its pages and the network and can answer requests from a local cache."
[transferable-streams]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Transferable_objects "Streams that can be handed from one thread to another, such as to a worker, so the data moves without being copied."
[cookie-store-api]: https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API "A promise-based browser API for reading and writing cookies, usable from service workers as well as pages."
[masonry]: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Grid_lanes "A layout that stacks items in columns at their natural heights, each filling the gap under the one above, like bricks in a wall."

Source: https://aadhar.sh/garage/safari27