What's new in WebKit for Safari 27

Highlight

The WebKit team fixed more than 1,100 underlying issues over the past year, while Safari 27 adds CSS Grid Lanes for masonry layouts, deeply customizable <select> elements, the cross-platform <model> 3D model element, and Safari Web Extension packaging tools that do not require Xcode.

Core Ideas

From chasing new features to paying down technical debt

Every frontend developer has seen this situation: code works perfectly in Chrome, then breaks in Safari. Maybe an SVG gradient is rendered in the wrong position, emoji input becomes garbled, or the min() function does not work in the sizes attribute.

This year, the WebKit team shifted focus from “stacking up new features” to “fixing old problems.” (01:06) They fixed more than 1,100 feature improvements and bugs, setting a team record.

A typical example is garbled emoji input. (02:05) Older websites process keyboard input with String.fromCharCode(), which can only handle Unicode code points within 16 bits. Many emoji require 17 bits, so truncation turns them into entirely different characters. WebKit’s solution is pragmatic: when the user enters a character beyond 16 bits, the engine stops sending a numeric code point and passes the text directly instead. The site code does not need to change, and the problem is fixed.

Rewriting block-in-inline layout

Block-level elements nested inside inline elements appear everywhere on the web, and the code that handled this layout had not been touched for more than twenty years, making it hard to maintain. (03:54) The team rewrote it from scratch with a new architecture and fixed a batch of long-standing layout issues. For developers, the most visible result is that some typography cases that previously required hacks now work correctly.

Moving SVG 2 standardization forward

The SVG specification had long lacked maintenance, and different browsers interpreted the same attributes differently. (04:48) WebKit engineers directly participated in reviving and leading the SVG working group, pushing the SVG 2 specification toward clarity. For example, browsers previously disagreed on the default values of the fx and fy attributes for radial gradients. The spec now defines them explicitly, and Safari 27 updates its behavior accordingly. So far, there have been more than 75 SVG-related improvements.

Details

CSS Grid Lanes: pure-CSS masonry layout

Building Pinterest-style masonry layouts used to require JavaScript height calculations for each column or a third-party library. (09:06) CSS Grid Lanes turns this into a few lines of CSS.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  gap: 16px;
}

Key points:

• grid-template-rows: masonry enables masonry mode, with elements automatically arranged by column
• Both horizontal and vertical directions are supported
• flow-tolerance can fine-tune tolerance during item flow and improve keyboard Tab navigation
• Safari 26.4 has implemented it; other browsers have not yet shipped support

The WebKit team built an interactive demo site, gridlanes.webkit.org, where you can adjust parameters online and see results in real time.

Customizable Select: native dropdowns can finally be styled

The poor customizability of the <select> element has long been a pain point for the frontend community. (10:06) To build attractive UI, developers often abandoned native controls and simulated them with divs, losing accessibility support and native mobile behavior in the process.

Safari 27 introduces appearance: base-select, opening visual customization while preserving native control behavior:

select {
  appearance: base-select;
}

select::picker {
  appearance: base-select;
}

Key points:

• appearance: base-select lets <select> inherit more CSS properties, including font, text color, and background color
• The ::picker pseudo-element controls the dropdown panel style
• ::checkmark and ::picker-icon control the selected marker and expansion icon
• Extra HTML can be added inside <option>, such as subtitles and images
• The dropdown menu itself can be laid out freely with Grid or Flexbox

<select>
  <option>
    <img src="icon-red.png" alt="">
    <span>Red</span>
    <span class="sub">#FF0000</span>
  </option>
</select>

The core trade-off is this: keep the native control’s interaction logic and accessibility tree, and open only the visual layer for customization. You do not need to implement keyboard navigation or screen reader support yourself, and mobile can still invoke the native picker.

The <model> element: 3D models become first-class citizens

The <model> element debuted with visionOS last year. This year, Safari 27 brings it to iOS, iPadOS, and macOS. (11:24) Like <img>, <video>, and <audio>, it is a native HTML element for handling media files.

<model src="product.usdz" alt="3D product model">
  <img src="product.jpg" alt="Product image">
</model>

Key points:

• Supports <source> tags to provide multiple format fallbacks
• The environmentmap attribute can specify custom environment lighting
• The stagemode attribute sets default interaction behavior
• JavaScript can control the model, such as rotation and scaling
• On iOS and iPadOS, wrapping <model> in <a rel="ar"> lets users project the model into real space

Immersive API: websites can enter visionOS immersive spaces directly

visionOS 27 further expands <model> capabilities with immersive website environments. (12:50) A user can visit your website, click a button, and enter a 3D environment you provide.

const model = document.getElementById('theater-model');

// Designed like the Fullscreen API
await model.requestImmersive();

Key points:

• The API design matches the Fullscreen API, so the learning curve is low
• It must be triggered by a user gesture
• Good fits include game previews, virtual home tours, theater seat previews, and product showcases
• It only works in Safari on visionOS 27

Safari Web Extension Packager: cross-platform packaging

Building Safari extensions used to require Xcode on a Mac. (13:41) With Safari Web Extension Packager, any operating system and any browser can package extensions and distribute them to Safari users through App Store Connect.

# No Xcode or Mac required
# Package the extension with the packager tool on any platform
# Upload it to App Store Connect

Key points:

• The extension itself remains standard HTML/CSS/JavaScript, with one codebase across browsers
• Packaging and distribution no longer depend on Apple ecosystem tools
• Debugging Safari-specific APIs still requires Mac plus Safari Technology Preview

Key Takeaways

1. Replace JS masonry with CSS Grid Lanes

What to do: Move masonry layouts in existing projects from JavaScript calculations to pure CSS.

Why it is worth doing: It reduces runtime computation, lets the browser engine handle layout, improves performance, and simplifies code. flow-tolerance can also improve keyboard navigation.

How to start: In scenarios that target Safari 26.4+, add grid-template-rows: masonry to display: grid, and use @supports for fallback.

2. Replace custom dropdown components with appearance: base-select

What to do: Change dropdown selectors simulated with divs back to native <select> elements.

Why it is worth doing: You regain native accessibility support, native mobile pickers, and less JavaScript code. The visual customization is now sufficient for most design needs.

How to start: Add appearance: base-select to <select> and ::picker, then use ::checkmark and ::picker-icon to refine details.

3. Embed 3D product previews in ecommerce sites

What to do: Add a <model> tag to product detail pages to display 3D models.

Why it is worth doing: Users can rotate and inspect products directly on the web, and on iOS/iPadOS they can project them into real space with one tap. You do not need to introduce a heavy library like Three.js.

How to start: Prepare a 3D model in USDZ format, embed it with <model src="product.usdz">, and provide a 2D image as fallback.

4. Build immersive web experiences for visionOS users

What to do: Add the Immersive API to websites that support 3D presentation, allowing visionOS users to enter a fully immersive environment.

Why it is worth doing: This is currently the lightest bridge from the web into 3D immersion. The API design is simple and does not require WebXR’s complex setup.

How to start: Bind a click event to the <model> element, call requestImmersive(), and implement feature detection and fallback.

5. Bring browser extensions to Safari

What to do: If you already have a Chrome or Firefox extension, you can now add Safari support at almost no cost.

Why it is worth doing: Safari has a large user base, but the Xcode requirement previously kept many teams away. The packaging flow is now fully cross-platform.

How to start: Package your existing extension with Safari Web Extension Packager and submit it through App Store Connect.

Related Sessions

• Rediscover the HTML Select Element — A deep dive into the full usage and best practices for appearance: base-select
• Get started with HTML Model Element — Creating and optimizing 3D models, plus JavaScript control
• Explore immersive website environments in visionOS — A complete implementation guide for the Immersive API
• Create web extensions for Safari — Build Safari extensions from scratch and distribute them through App Store Connect
• Learn CSS Grid Lanes — A complete tutorial and advanced guide to CSS Grid Lanes