Safari 27 and iOS 27: What Changed for Your Website

Some of your visitors reach your site through Safari, and you can see their share in your own analytics. That makes each Safari release relevant to whether a new CSS or HTML feature works for real visitors. The WebKit blog's beta post gave a long list for Safari 27: customisable select, transform-aware anchor positioning, scroll anchoring, the :heading pseudo-class, revert-rule, the stretch keyword and more.

Long as the list looks, you do not need to know all of it. Most features make life easier for whoever writes the site's code; the visitor does not see them directly and only notices that pages break less. As the owner, ask yourself which part of your site needs any of these. The answer is usually forms and image areas.

The WebKit blog says that with appearance: base-select, dropdown lists can be styled completely. A list in which people pick a city, a service or an appointment time can therefore be drawn in your brand's colours and typeface. The blog also states that keyboard and screen-reader behaviour is preserved, which is a calmer route for accessibility than replacing the list with a component written from scratch.

It is not a requirement. If your current list works, leave it alone. The new feature makes most sense for lists with a custom look that until now were imitated in code. Whether other browsers support this feature in the same way is not stated in our sources, so have the design made so that it falls back to a plain list where the feature is missing.

On images, the most notable item is the auto value for the sizes attribute of the img element. The WebKit blog describes it as the browser working out the image size by itself for lazy-loaded images, which lightens the burden of writing a sizes value by hand for every image. Scroll anchoring, also from the blog, stops the place where you are reading from shifting when content is loaded above it later.

The list below gathers the items that help when testing your site or when asking your developer. You can measure what image changes do to speed, before and after, with the rabbitclip site speed tool.

• Customisable dropdown list: form fields that match the brand
• The auto value for sizes on img: the browser works out the size of lazy-loaded images
• Scroll anchoring: the page does not jump when content loads above
• The model element: 3D content on iOS, iPadOS and macOS
• Developer-level additions such as the Service Worker static routing API, ReadableStream.from() and maxAge in the Cookie Store API

Quoting the WebKit blog, 9to5Mac reports that Safari 27 includes a local MCP server. When remote automation is switched on in the developer settings, coding agents can use the browser window. MCP is a communication protocol that lets AI agents connect to tools; here the tool is Safari itself.

For a site owner the direct meaning is this: an agent can also browse your site, and if a developer has switched this on for testing on their own machine, it does so with a real browser. Your developer might use it to try your forms automatically; that is a possibility, not a conclusion drawn by the sources. The same source also mentions a packager for Safari web extensions that needs neither a Mac nor Xcode.

The first mistake is putting a new feature on the live site as soon as the news is read. A feature working in Safari 27 does not mean it works for every visitor; some devices stay on older versions. The second is replacing a working dropdown merely because a new one exists, and breaking the mobile form.

The third is testing on desktop alone. The look on an iPhone, keyboard and screen-reader behaviour, and touch targets must be tried separately.

• Putting a new feature live without testing it
• Replacing a working component only because it is new
• Testing only in a desktop browser
• Not thinking about what happens where the feature is unsupported

If your site has no custom-styled form field, no 3D content and no complicated page layout, there is nothing to do because of Safari 27. For a small brochure site the right step is to open the site once on an iPhone and check the form and the images by eye.

Trying the model element for 3D content is not for everyone either. If a 3D view of your product does not help sales, the feature only brings a maintenance burden. Look first at what the visitor wants to do, then choose the feature.