Hey there!

Safari 27 came out in September, and the WebKit team's release post lists 83 new features and 844 bug fixes. That ratio says a lot about this release. By WebKit's own breakdown, about 86% of the work in Safari 27 is fixing things that already existed, and about 11% is improving existing features. Brand new features are only a small slice.

For anyone who builds websites, that's useful to know. Safari's engine, WebKit, sits behind most browsing on iPhones and iPads, so when something renders differently there, a lot of people see it. In this post I'll go through the Safari 27 changes most likely to affect everyday web work, starting with a long-standing request from front-end developers.

You can finally style a select dropdown

The <select> element is the standard dropdown you see in forms: pick your country, pick a size, pick a delivery date. It works everywhere and it's accessible out of the box, but for years you could barely style it. The list that pops open is drawn by the operating system, so you couldn't add icons to options, change the arrow, or make the menu match the rest of your design.

The usual workaround was to throw the real <select> away and build a fake one out of <div>s and JavaScript. That gives you full control over the look, but you then have to rebuild everything the browser used to do for free: keyboard navigation, screen reader support, form submission, validation. It's easy to get one of those wrong.

Safari 27 adds support for customizable select. You opt in with a single CSS declaration, appearance: base-select, applied to both select and ::picker(select). That switches the dropdown to a plain, stylable base version. ::picker(select) targets the popup list itself, and new pseudo-elements like ::picker-icon (the arrow) and ::checkmark (the tick next to the selected option) let you style parts of the control that used to be off limits. According to WebKit, you keep keyboard navigation, screen reader support, form submission, validation and change events automatically.

You can also put richer content inside the control. MDN's guide to customizable select elements shows a <button> containing a <selectedcontent> element at the top of the <select>, which mirrors whatever option is currently chosen, including any icons or extra markup inside it.

There is one thing to check before you rely on it. Chrome and Edge already support customizable select and Safari 27 now joins them, but MDN still marks the feature as not Baseline, meaning it isn't yet supported across all the major browsers. The good news is that it degrades gracefully. In a browser without support, MDN explains that the custom <button> structure is ignored, rich option content is reduced to plain text, and you get a normal, working <select>. So you can style it today without breaking anything for people on other browsers.

Pages that stop jumping around

You've probably had this happen: you start reading an article, an image or ad loads somewhere above where you are, and the text you were reading gets shoved down the page.

Safari 27 adds scroll anchoring. When new content appears above the part of the page you're looking at, Safari now adjusts the scroll position so the content you were reading stays where it was. It's on by default through the CSS overflow-anchor property, which is set to auto. If it causes problems for a particular layout, you can switch it off for that element with overflow-anchor: none.

Smaller changes that save real code

A lot of Safari 27 is small additions that remove a workaround you might have in your codebase. A few from the release notes:

• sizes="auto" for lazy-loaded images. With responsive images, the sizes attribute tells the browser how wide an image will be on screen so it can download the right file. Working that out in advance is fiddly. For images with loading="lazy", you can now write sizes="auto" and Safari works out the width from the real layout once it knows it.
• A :heading selector. :heading matches any heading element, so you no longer need to list h1, h2, h3, h4, h5, h6 in your CSS. There's also a version that takes levels, like :heading(1, 2).
• Line clamping and balanced text together. -webkit-line-clamp (cut text off after a set number of lines) and text-wrap: balance (even out the line lengths in a heading) now work on the same element.
• Easier streams in JavaScript. ReadableStream now supports async iteration, so you can read a stream with a simple for await loop, and there's a new ReadableStream.from() for creating one from an existing iterable.

Under the hood there's also a rewrite of how Safari loads JavaScript modules, which WebKit says fixes bugs in the order that top-level await code runs and how modules start up. There are 66 SVG fixes as well. None of this shows up as a new feature in a demo, but fixes like these are what close "works in Chrome, broken in Safari" bug reports.

Coding agents can now drive Safari

The last change is aimed at developers using AI coding tools. Safari 27 on macOS includes an MCP server. MCP (Model Context Protocol) is a standard way for AI agents to connect to other tools. With it, an agent can open your site in Safari, see how it renders, compare computed styles and layout, check accessibility and look at performance.

You have to turn it on yourself in Safari's Settings, under the Developer tab, with the option "Allow remote automation and external agents". WebKit says the server runs entirely on your own machine, makes no network calls of its own and has no access to your personal information in Safari.

For teams that mostly develop in Chrome, this gives an agent a direct way to check a page in Safari as part of the same workflow, rather than leaving Safari testing as a separate manual step.

The takeaway

Safari 27 is mostly a cleanup release. Customizable select is the headline: you can now style a native dropdown in Safari and keep its accessibility, and because it falls back to a normal <select> elsewhere, it's safe to start using. Scroll anchoring, sizes="auto" and :heading each remove a small piece of code or a small annoyance, and the 844 fixes should mean fewer Safari-only bugs to chase.

If you have a custom JavaScript dropdown in your project, Safari 27 is a good reason to check whether a styled native <select> could replace it.