Skip to main content
Bram Verweij
Browser News

Safari 27 Ships Customizable Select and 58 New Web Features

Apple shipped Safari 27 on September 14, 2026, bringing 58 brand-new platform features and 525 bug fixes — the largest single-release patch count in WebKit's history. Front-end developers gained several long-requested capabilities that previously required JavaScript workarounds or sacrificed accessibility.

Customizable Select Elements

The headline addition is native, CSS-driven <select> customization. Setting appearance: base-select on a <select> element opts it into a new rendering model that respects your CSS — including font-family, color, border-radius, and background.

/* Opt the select into the new model */
select { appearance: base-select; }

/* Style the dropdown panel */
select::picker { border: 1px solid #ccc; border-radius: 8px; }

/* Style the selected-option indicator */
select::checkmark { color: #0c73fe; }

For years, form styling required either hiding the native control entirely — sacrificing keyboard navigation and screen-reader semantics — or shipping JavaScript-powered custom dropdowns. Safari 27 makes neither necessary: the customizable select inherits native accessibility behaviour automatically. The ::picker-icon pseudo-element also lets you replace the default chevron without touching the underlying control.

Anchor Positioning Upgrades

CSS Anchor Positioning, which landed in Chromium earlier this year, now gains transform-aware tracking in Safari 27. Positioned elements can follow scaled or rotated anchors — a real-world fix for tooltips and popovers that misalign when their reference element sits inside a CSS transform. New values position-anchor: normal and none give explicit control over default anchor behaviour, making the feature more predictable in design-system components.

Three New CSS Primitives

Smaller additions that will prove useful in production:

  • :heading — a pseudo-class matching <h1> through <h6>. Instead of writing h1, h2, h3, h4, h5, h6 { … }, a single :heading { … } rule covers all heading levels. Useful in design systems where heading typography is defined globally.
  • revert-rule — reverts a CSS property to the value it would have had before the most recent rule applied it. More surgical than revert (which rolls back to the browser default) and useful when layering design-token overrides.
  • stretch box-sizing — fills available space while accounting for margins, a cleaner alternative to the width: 100%; margin: 0 16px dance.

Performance and Stability

Safari 27 ships scroll anchoring — automatic prevention of layout jumps when content loads above the visible viewport. Images and ads that pop in as a user scrolls no longer shift the reading position. Most sites benefit without any code change.

A complete rewrite of the ES module loader enables proper top-level await in modules, and subpixel inline layout makes text rendering measurably more precise on high-DPI screens. WebAssembly also gains JSPI (JavaScript Promise Integration), allowing Wasm code to suspend while JavaScript Promises resolve.

For the complete changelog, see the Safari 27 release notes on Apple Developer and the WebKit blog.

More from the blog

All posts