Apple shipped Safari 27 beta on June 8, 2026 with 58 new features, 525 fixes and 4 deprecations. That's a big release by any recent standard, and the volume is exactly the problem: a list that long reads as noise, and the three or four items that will actually change how you build an interface are buried between a WebGPU clip distance and a cookie store parameter.
So I read all of it and pulled out what a designer or front-end developer will feel. Six things, roughly in the order they'll bite.
TL;DR: Safari 27 beta adds 58 features. The ones that matter for interface work are the customizable
<select>viaappearance: base-select, transform-aware anchor positioning, the:headingpseudo-class, therevert-rulecascade keyword, thestretchbox-sizing keyword, and subpixel inline layout (WebKit, 2026).
What Shipped, and How Much of It You Care About
Here's the shape of the release, which is worth seeing before the details.
| Area | Roughly what landed |
|---|---|
| CSS | 11 changes, including anchor positioning, selectors, box sizing |
| Forms | Customizable <select> with its own pseudo-elements |
| JavaScript and Web APIs | Top-level await, JSPI, service worker static routing, stream improvements |
| Spatial | <model> beyond visionOS, immersive environments, <img controls> |
| Web Inspector | Contrast in the color picker, redirect chains, subgrid badges |
| MathML, SVG, WebGPU | Operator support, lang attributes, clip_distances |
Four of those six rows are engine work you'll never think about. Two of them change your stylesheet. That ratio is normal for a WWDC release, and it's why reading the whole post beats reading the headline.
The Layout Changes You'll Feel First
Two small CSS additions here do more work than their size suggests.
stretch is now available as a keyword for width, height and min-width. It fills the available space while accounting for margins, which is the thing 100% has never done and which every developer has worked around with calc(100% - 2rem) or a wrapper element. It's a small keyword that deletes a class of hack.
Subpixel inline layout is the other one, and it's quieter. Text and inline elements are now positioned with device-pixel precision in the block direction, rather than snapping to whole pixels. If you've ever had a baseline drift by a pixel between two columns that should have matched, or watched an inline badge sit one pixel high next to its label, this is the machinery that was doing it.
Web Inspector picked up matching help: subgrid and grid-lanes badges now appear in the Elements tab, so you can see at a glance which elements are establishing which layout context. Anyone who has debugged a subgrid by adding temporary outlines will understand why that's worth a line in a release post.
Since we're on grids: if you're laying out a dashboard and want to sketch the track structure before writing any of it, our own dashboard grid generator produces the CSS Grid definition from a visual layout, and it's free.
Anchor Positioning Finally Follows a Transform
This is the fix I'd been waiting for, and it's the one that makes anchor positioning usable in a motion-heavy interface.
Anchored elements now track the transformed position of their anchor. transform, translate, rotate and scale are all honoured. Before this, an anchor that moved via a transform left its anchored element behind at the untransformed coordinates, which meant any card that scaled on hover would tear its own tooltip off and leave it floating somewhere near where the card used to be.
That has been the practical reason anchor positioning stayed out of animated UI. You could have anchoring or you could have motion, and picking motion meant going back to measuring rectangles in JavaScript on every frame.
There's tidying alongside the fix. anchors-valid and anchors-visible have been renamed to anchor-valid and anchor-visible, with the old keywords still accepted, so nothing breaks today. And position-anchor gains normal and none, with normal as the new default.
If you shipped a JavaScript workaround for the transform problem, go and find it now. The same thing happened with the position-area fallback bug in Safari 26.6: once the browser does the job correctly, a workaround stops being harmless and starts fighting the engine's own logic.
The Customizable Select Is the Real Headline
Set appearance: base-select and a <select> becomes yours to style. You get ::picker-icon for the indicator and ::checkmark for the selected state, plus a <selectedcontent> element for rendering what's currently chosen.
Why does this matter more than anything else in the release? Because the select is the single control the entire industry has been reimplementing badly for twenty years. Every design system has a custom dropdown. Almost all of them are a div with a listbox role, a keyboard handler somebody wrote from memory, and a focus trap that works until it doesn't. They are the most common source of accessibility bugs I find in component libraries, and they exist for one reason: designers wanted control over the appearance of a control the browser wouldn't let them touch.
Now it does. The native element keeps its keyboard behaviour, its screen reader semantics and its mobile treatment, and you get to restyle it.
Adopt it as an enhancement rather than a rewrite. Build the plain <select>, confirm it's correct with no CSS at all, then layer the base-select rules on top. A browser that doesn't understand the value ignores it and renders the native control, which is a perfectly good outcome. What you shouldn't do is keep the old fake dropdown and add this beside it, because then you own two controls and only one of them works for a screen reader.
Two Selectors That Change How You Write a Reset
:heading matches h1 through h6, and combines with functional selectors. Your reset drops from a six-element list to one pseudo-class.
Careful with it though. A pseudo-class has higher specificity than an element selector, so replacing h1, h2, h3, h4, h5, h6 with :heading doesn't just shorten the rule, it strengthens it. On a site with one typographic system that's a clean win. On a site with three competing stylesheets it's a cascade change wearing a shortcut's clothes, and you'll find out where in the least convenient place.
revert-rule is the other one, and it's more niche but genuinely new. It rolls a property back to the state it had before the current style rule, which is a different thing from revert and revert-layer. It's a debugging and layering tool more than a design one, but if you maintain a cascade-layered design system you'll find a use for it inside a week.
Typography Details Nobody Puts in the Headline
A cluster of small things that matter if you work in more than one script.
Dutch is now handled correctly: text-transform: capitalize and ::first-letter titlecase the "ij" digraph to "IJ" at the start of a word when lang="nl" is set. That's the sort of fix that affects a whole country's worth of sites and gets one bullet point.
text-autospace gets an insert keyword, making ideograph-alpha ideograph-numeric insert equivalent to ideograph-alpha ideograph-numeric. And SVG text now accepts lang and xml:lang, so the language of text inside an SVG can finally be declared rather than inherited by accident.
For colour work, srgb-linear and display-p3-linear are now predefined colour spaces in Canvas and WebGL. Linear-light spaces are what you want for gradient interpolation and compositing, because blending in a gamma-encoded space is what produces the muddy grey band in the middle of a blue-to-yellow gradient. If you've fought that, you know why this is here.
One HTML Attribute Worth Adding Today
Buried in the HTML section is sizes="auto" on <img>, and on an image-heavy site it earns its place faster than anything else in this release.
For a loading="lazy" image, the browser now works out the size from the element's actual layout width instead of making you predict it in a sizes attribute. That prediction has always been the weak link in responsive images. You write sizes="(min-width: 64rem) 33vw, 100vw" against the layout as it exists today, the layout changes in a redesign six months later, and nothing tells you the attribute is now lying. The browser quietly downloads the wrong candidate from your srcset and the only symptom is a slightly worse Largest Contentful Paint.
With auto, the measurement happens at the moment the browser needs it. One attribute, no maintenance, and it degrades to your existing behaviour where it isn't supported.
Two more platform items are worth knowing about even if you never touch them directly. Top-level await arrives with a complete rewrite of the ECMAScript module loader, fixing module execution ordering and initialisation bugs that produced some genuinely baffling failures in bundled code. And the service worker static routing API lets a service worker declare rules that bypass it entirely for certain requests, which removes the worker from the critical path for static assets. Both are the kind of change that shows up on your performance panel rather than in your stylesheet.
What Web Inspector Got
Inspector improvements rarely get attention, and these ones deserve some.
The color picker now shows contrast information inline while you're editing a colour, so you find out you've broken a contrast ratio at the moment you break it rather than in an audit two weeks later. Format and gamut controls are visible upfront instead of hidden behind a toggle. The network tab shows every request in a redirect chain instead of only the final destination. And the Timeline's Layout events now name the element that triggered them, which turns "something caused a layout" into an actionable line.
None of that is glamorous. All of it removes a step from a loop you run fifty times a day.
The Spatial Additions, and Why I'd Wait
<model> is no longer visionOS-only. It's available on iOS, iPadOS and macOS, it gained dynamic-range-limit for controlling HDR rendering of 3D content, and <img> picked up a controls attribute that gives spatial and panorama photos native interactive controls. Immersive website environments arrive through a <model> element plus an Immersive API call.
This is a real platform expansion and I understand the excitement. I'd still keep it in prototypes for now, and here's the disagreement worth having: every interface decision you make around <model> is one no other engine can render, which means you're designing a fallback experience as the primary experience for most of your audience. That's a reasonable trade for an Apple-platform product and a bad one for a general website. Revisit when a second engine ships something compatible.
Summary
Safari 27 beta landed on June 8, 2026 with 58 features, 525 fixes and 4 deprecations. For interface work the release comes down to six things: appearance: base-select finally makes the native <select> stylable with ::picker-icon, ::checkmark and <selectedcontent>; anchor positioning now follows transform, translate, rotate and scale, which unblocks it for animated UI; :heading collapses a six-element reset into one pseudo-class at the cost of higher specificity; revert-rule adds a cascade rollback that layered design systems will use; stretch deletes the calc(100% - margin) hack; and subpixel inline layout fixes the one-pixel baseline drift nobody could reproduce. Web Inspector's inline contrast readout and redirect chains are the quiet productivity win. The spatial work is genuine and single-vendor, which is a reason to prototype rather than ship.
Build this grid yourself
Reading span numbers is not the same as seeing them. The generator below lays out the exact grid specced above, with the sidebar and metric strip in place. Change the app type, change the density, and shuffle until the arrangement matches the content you actually have.
