2.1 CSS Grid Lanes — Native Masonry Layout#

This is the CSS new feature that drew the most attention from front-end developers at this WWDC. Grid Lanes gives the Web platform native support for Pinterest-style masonry layout—no JavaScript required, achievable with just a few lines of CSS.

Pain points of traditional solutions

Before this, there were only two ways to implement masonry layout:

The Grid Lanes solution

Grid Lanes introduces the new syntax grid-template-columns lanes(), allowing elements to flow naturally between columns:

1
.masonry {
2
  display: grid;
3
  grid-template-columns: lanes(300px, 300px, 300px);
4
  gap: 16px;
5
}
6

7
/* Responsive with auto-fill */
8
.masonry-responsive {
9
  display: grid;
10
  grid-template-columns: lanes(auto-fill, minmax(280px, 1fr));
11
  gap: 16px;
12
}

Unlike the previously abandoned masonry keyword, Grid Lanes is designed to be more general—it not only supports masonry, but also any custom grid arrangement algorithm, making it a much bigger concept than “masonry layout.”

Core characteristics:

• Pure CSS implementation, zero JavaScript, browser-native rendering optimization
• Adaptive, responsive when combined with auto-fill, minmax()
• Controllable ordering, supports arrangement strategies such as grid-lane-order: column | row | shortest-column

In WebKit’s demo, for a masonry page with 200 images, after switching from the JS solution to Grid Lanes, layout computation time dropped from ~120ms to ~4ms.

2.2 Fully Customizable <select> Element#

The war between front-end developers and the <select> element has lasted for more than twenty years. Safari 27 finally provides a native solution: appearance: base-select + a brand-new pseudo-element system.

New pseudo-element system

1
/* Enable the new stylable select */
2
select {
3
  appearance: base-select;
4
}
5

6
/* Dropdown trigger (replaces the browser's default arrow) */
7
select::picker(select) {
8
  border-radius: 12px;
9
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
10
  backdrop-filter: blur(20px);
11
}
12

13
/* Option list */
14
select::picker(select) option {
15
  padding: 12px 16px;
16
  font-size: 15px;
17
  display: flex;
18
  align-items: center;
19
  gap: 8px;
20
}
21

22
/* Selected marker */
23
select::checkmark {
24
  color: var(--accent-color);
25
  margin-left: auto;
26
}
27

28
/* Selected state */
29
select::picker(select) option:checked {
30
  background: var(--accent-color-light);
31
}

Key capabilities

This means we can finally abandon those custom select libraries that weigh tens of KB (such as Choices.js, Select2, react-select, etc.) and implement design-spec-level dropdown selectors with pure native CSS.

2.3 <model> Element — Embedding 3D Models in Web Pages#

Safari 27 adds the <model> HTML element, allowing interactive 3D models to be embedded directly in web pages without any JavaScript library or WebGL code.

Basic usage

1
<model
2
  src="airpods.usdz"
3
  width="600"
4
  height="400"
5
  camera-controls
6
  auto-rotate
7
  ar
8
>
9
  <p>Your browser does not support 3D model display, please upgrade to Safari 27</p>
10
</model>

Supported features

JavaScript API

The <model> element exposes a complete JavaScript control interface:

1
const model = document.querySelector('model');
2

3
// Play built-in animations
4
model.playAnimation('idle');
5

6
// Listen to loading state
7
model.addEventListener('load', () => {
8
  console.log('Model loaded, triangle count:', model.triangleCount);
9
});
10

11
// Programmatically control the camera
12
model.camera.orbit(0, 45, 2);  // theta, phi, radius

The <model> element first hinted at this back when previewing USDZ files in Quick Look on iOS, and now it has officially entered the Web standard. For e-commerce, education, and product showcase websites, this is an important tool.

2.4 visionOS Immersive Website Environments#

This is the most futuristic capability of this WWDC. Safari 27 supports spatial web experiences on visionOS 27: websites can declare themselves “immersive,” and thus be presented in a spatial way on Apple Vision Pro.

Declaring an immersive experience

1
<meta name="apple-immersive" content="full">
2
<meta name="apple-immersive-environment" content="starry-night">

The browser renders the page as a panel floating in the user’s space, while also supporting WebXR standard spatial interaction:

1
// Detect immersive web support
2
if ('xr' in navigator) {
3
  const session = await navigator.xr.requestSession('immersive-vr', {
4
    requiredFeatures: ['hand-tracking'],
5
  });
6

7
  // Use the WebXR API to create spatialized UI panels
8
  const layer = new XRWebGLLayer(session, gl);
9
  session.updateRenderState({ baseLayer: layer });
10
}

The WebKit team emphasizes that this is not creating a new “visionOS-only” standard, but rather an extended implementation on top of the existing WebXR Device API standard. This means the same WebXR page can also run on devices such as Meta Quest and Pico.

Practical application scenarios:

• Product showcase: Furniture brands let users view furniture in space
• Data visualization: 3D charts and data dashboards
• Online education: Three-dimensional teaching such as anatomical models and molecular structures
• Art exhibitions: Spatial web art experiences

2.5 Cross-Browser Web Extensions Packaging#

Safari 27 greatly simplifies the development and distribution process for Safari extensions.

Main changes

New packaging approach

1
# Package directly with command-line tools, no Xcode needed
2
safari-web-extension build ./my-extension
3

4
# Submit via the App Store Connect API
5
xcrun altool --upload-app \
6
  -f my-extension.zip \
7
  -t osx \
8
  --apiKey YOUR_KEY \
9
  --apiIssuer YOUR_ISSUER

This is especially friendly to independent developers and open-source projects—previously, maintaining an extension for Safari required a Mac and an Apple Developer account, but now submission can be completed through CI/CD.