Safari 27 Web Features:
Grid Lanes, Custom Select & 3D

Introduction

Apple's WWDC26 keynote on June 8, 2026 delivered significant updates for web developers using Safari. Alongside visionOS 27's immersive website environments and a new Safari web extension packager (no Xcode required), Safari 27 introduces three features that solve long-standing developer pain points: native CSS masonry layout, fully customizable form controls, and a first-class HTML element for 3D content.

These aren't incremental improvements. Grid Lanes eliminate the need for JavaScript masonry libraries that have been a workaround for over a decade. Customizable Select solves one of the oldest pain points in form styling — native <select> elements that previously required elaborate JavaScript-rendered replacements. And the <model> element brings interactive 3D to the web platform without requiring WebGL knowledge or heavy libraries.

Let's dive into each feature with code examples, browser support notes, and practical strategies for adopting them today.

1. CSS Grid Lanes — Native Masonry Layout

Masonry layouts (Pinterest-style waterfall grids where items occupy varying amounts of vertical space while fitting into a fixed column grid) have been a popular design pattern for over a decade. Until now, implementing them required JavaScript libraries like Masonry.js, isotope, or complex CSS workarounds involving CSS columns with their own ordering limitations.

Grid Lanes are Apple's implementation of the CSS Grid masonry proposal, introduced in Safari 27. The syntax extends the existing grid-template-rows property with the masonry keyword, and introduces a flow-tolerance property that controls how strictly source order is preserved — a critical feature for accessibility.

Basic Grid Lanes Syntax

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

/* Items automatically find their position based on height */
.masonry-gallery-item {
  break-inside: avoid;
}

/* Individual items can span multiple lanes */
.masonry-gallery-item.featured {
  grid-column: span 2;
}

The grid-template-rows: masonry declaration tells the grid to place items column-by-column rather than row-by-row. Items flow into the column with the most available space, producing the characteristic waterfall arrangement. This is fundamentally different from the CSS Columns approach, which forces items to flow top-to-bottom then left-to-right, creating confusing reading order.

Flow Tolerance for Accessibility

One of the most thoughtful aspects of Grid Lanes is the flow-tolerance property. It addresses the accessibility concern that masonry layouts can create illogical reading orders when items are placed purely by available space.

.masonry-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  flow-tolerance: 100px;
  gap: 1rem;
}

/* With flow-tolerance: 0 — items placed purely by available space
   (faster layout, potentially awkward reading order)
   With flow-tolerance: 200px — items prefer source order,
   only deviate if the gap exceeds 200px */

flow-tolerance accepts a length value that defines the "threshold" for position drift. A value of 0 means items are placed purely by available space (maximum density, potentially poor source order preservation). Higher values (e.g., 100px or 200px) make items prefer their source order position, only moving to fill gaps when the offset would exceed the threshold.

This is a meaningful accessibility improvement. Screen readers and keyboard navigation follow DOM order, not visual position. flow-tolerance lets you balance visual density against logical reading order, which no JavaScript masonry library provides natively.

Comparison with Existing Solutions

Before Grid Lanes, developers had three options for masonry layouts, each with significant trade-offs:

• Masonry.js / Isotope: JavaScript libraries that measure item heights and position elements absolutely. They work but require JavaScript, can cause layout shifts during load, and break on dynamic content without re-initialization.
• CSS Columns: Items flow top-to-bottom then left-to-right, creating confusing reading order. Items can also get clipped or split across columns.
• CSS Grid with explicit spans: Requires knowing all item heights in advance, which is impractical for dynamic content.

Grid Lanes combine the visual density of JavaScript masonry with the performance and semantics of native CSS. No JavaScript, no layout shift, no reading order compromises when flow-tolerance is configured correctly.

2. Customizable Select — appearance: base-select

The HTML <select> element has been notoriously difficult to style. While appearance: none has existed for years, it effectively strips the element of all native behavior — dropdown popup, keyboard interaction, and platform conventions — requiring developers to rebuild everything from scratch with JavaScript.

Safari 27 introduces appearance: base-select, a new value that preserves native behavior while unlocking CSS styling of every visual component of the select element: the dropdown button, the popup menu, the selected state indicator, and even the option contents.

Basic Usage

<select class="styled-select">
  <option value="react">React</option>
  <option value="vue">Vue.js</option>
  <option value="angular">Angular</option>
</select>

.styled-select {
  appearance: base-select;
  padding: 0.75rem 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  background: white;
  cursor: pointer;
  width: 100%;
  max-width: 300px;
}

/* Style the dropdown popup */
.styled-select::picker(select) {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 0.25rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Style the arrow indicator */
.styled-select::picker-icon {
  color: #666;
  width: 20px;
  height: 20px;
}

/* Style the checkmark on the selected item */
.styled-select option:checked {
  ::checkmark {
    color: #0f766e;
  }
}

The key insight is that appearance: base-select does not strip native behavior — it offers a base level of customisability while keeping the dropdown functionally identical to a standard <select>. Keyboard navigation (arrow keys, type-ahead, Enter/Space to open/close) works out of the box. Screen readers can still announce options correctly.

Rich HTML Inside Options

One of the most requested features is now supported: rich content inside <option> elements. You can include images, icons, and styled text within individual options:

<select class="rich-select">
  <option value="react">
    <img src="react-icon.svg" alt="" width="16" height="16">
    React — UI Library
  </option>
  <option value="vue">
    <img src="vue-icon.svg" alt="" width="16" height="16">
    Vue.js — Progressive Framework
  </option>
  <option value="angular">
    <img src="angular-icon.svg" alt="" width="16" height="16">
    Angular — Full Platform
  </option>
</select>

This eliminates the need for custom-select libraries like Choices.js, Select2, or Headless UI Listbox for most use cases. The native approach is inherently more accessible, smaller in file size, and requires no JavaScript initialization code.

Comparison with Custom JavaScript Dropdowns

The custom dropdown landscape has been fragmented for years. Every major UI framework has its own select implementation, and each one has accessibility gaps:

• ARIA compliance — Native appearance: base-select has correct ARIA roles, states, and keyboard handlers built in. Custom implementations frequently miss aria-expanded, aria-activedescendant, or proper focus management.
• Size — A typical custom select library adds 5-15 KB of JavaScript. The native approach adds zero.
• Form integration — Native elements participate in form submission, validation, and auto-fill without extra wiring.
• Cross-platform — The native dropdown renders with platform-appropriate behavior (touch-friendly on iOS, keyboard-friendly on desktop).

3. The <model> Element — Interactive 3D in HTML

Safari 27 introduces a brand new HTML element: <model>. It lets developers embed interactive 3D models directly in web pages — no WebGL knowledge required, no Three.js bundle, no canvas setup. This is a first-class web platform primitive for 3D content, designed with the same philosophy as <video> and <audio>.

Basic Usage

<model
  src="chair.usdz"
  alt="3D model of an ergonomic office chair"
  environmentmap="studio"
  stagemode="orbit"
  camera-controls
  interaction="auto"
  style="width: 100%; height: 400px;"
>
  <source src="chair.glb" type="model/gltf-binary">
  <source src="chair.usdz" type="model/vnd.usdz+zip">
  <p>Your browser does not support 3D models.</p>
</model>

The <model> element supports multiple 3D file formats through <source> children — similar to how <picture> handles image formats. The browser selects the first format it supports:

• USDZ (model/vnd.usdz+zip) — Apple's native 3D format, widely supported on iOS and iPadOS. Best for AR Quick Look integration.
• glTF Binary (model/gltf-binary) — The standard web 3D format, supported across the widest range of tools and platforms.
• Reality Composer Pro scenes — Apple's authoring format for complex interactive scenes with animations and behaviors.

Key Attributes

The <model> element comes with a rich set of attributes that control rendering and interaction:

• environmentmap — Controls the reflection environment. Values like "studio", "outdoor", "indoor", or a custom HDR image URL produce different lighting looks.
• stagemode — Sets the interaction mode. "orbit" lets users rotate the model freely. "pan" enables two-finger pan for large models. "zoom" restricts interaction to zoom only.
• camera-controls — A boolean attribute that shows the native camera control UI (rotate, zoom, reset buttons). Without it, users interact directly with gestures.
• interaction — Controls auto-interaction. "auto" slowly rotates the model on page load. "off" starts static.
• src — Direct URL to a single 3D file. Use with <source> children for format fallbacks.

JavaScript API

The <model> element exposes a full JavaScript API for programmatic control, including animation playback, camera manipulation, and model interaction:

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

// Camera control
model.rotateTo({ x: 45, y: 30, z: 0 }); // animate to specific angles
model.resetCamera();                      // reset to default view
model.zoomTo(1.5);                        // zoom to 1.5x

// Animation control
const animations = model.animations;      // list available animations
model.playAnimation('spin');              // play a named animation
model.pauseAnimations();                  // pause all
model.stopAnimations();                   // stop and reset

// Events
model.addEventListener('load', () => {
  console.log('Model loaded:', model.duration);
});
model.addEventListener('error', (e) => {
  console.error('Model failed to load:', e.detail);
});

The animation system is particularly powerful for e-commerce: models can include pre-authored animations (e.g., a chair reclining, a laptop opening) that play on user interaction.

Comparison with Existing 3D Solutions

Before <model>, embedding 3D content on the web required:

• Three.js / Babylon.js: Full WebGL frameworks. Powerful but require expert knowledge, hefty bundles (200-500 KB minified), and manual camera/orbital control implementation.
• Model Viewer: A web component from Google built on Three.js. Good but still requires JavaScript, adds ~100 KB, and has limited iOS integration compared to native.
• AR Quick Look: Apple's native viewer via <a href rel="ar"> links. Works well on iOS but exits the browser entirely, breaking the user's flow.

The native <model> element requires zero JavaScript, zero WebGL code, and zero library dependencies. On iOS/iPadOS it renders natively with Metal, matching the performance of AR Quick Look. It's also significantly smaller in page weight — just the HTML element and your model file.

4. Secondary Safari 27 Updates

Immersive Website Environments (visionOS 27)

visionOS 27 introduces immersive website environments — the ability for websites to create full-screen 3D environments in Apple Vision Pro. Using WebXR and the new immersive-web-environment API (also available in Safari 27 on macOS for compatibility testing), developers can build virtual spaces that respond to user presence, gaze, and hand gestures.

This is separate from the <model> element — environments are full 360° spaces with lighting, spatial audio, and interactive elements, while <model> is for individual 3D objects within a standard web page.

Safari Web Extension Packager

A new developer tool that packages Safari web extensions without requiring Xcode. Extensions can be built, signed, and submitted entirely from the command line or a new Safari Extensions Manager in macOS Settings. This lowers the barrier for web developers who want to distribute extensions but don't have macOS development experience.

5. Browser Support and Adoption Strategy

All three headline features are Safari 27-only at launch. Here's the current support picture and how to adopt safely:

Progressive Enhancement for Grid Lanes

/* Baseline: standard CSS Grid with equal-height columns */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

/* Enhanced: Grid Lanes masonry in Safari 27+ */
@supports (grid-template-rows: masonry) {
  .photo-grid {
    grid-template-rows: masonry;
  }
}

The @supports approach ensures that non-supporting browsers get a functional (if less visually dense) layout. The baseline grid is perfectly usable; Safari 27 users get the enhanced masonry experience. This is the safest adoption pattern for all three features.

For appearance: base-select, the fallback is simpler: all browsers render the standard <select> when the CSS rule doesn't apply. Your custom styles just won't activate — the element remains fully functional.

6. Practical Takeaways

Safari 27 represents a meaningful step forward for three areas of web development that have relied on JavaScript workarounds for years:

• Grid Lanes bring native CSS masonry layout with an accessibility-first design. The flow-tolerance property is a genuinely novel contribution that addresses a real accessibility gap in dense visual layouts.
• Customizable Select solves one of the oldest form-styling problems on the web. Rich HTML options and full CSS control via pseudo-elements eliminate the primary reason developers reach for JavaScript dropdown replacements.
• The <model> element is a platform-level primitive for 3D content that mirrors how <video> and <audio> handled rich media. For e-commerce, education, and creative portfolios, this removes significant technical barriers to adding 3D content.

All three features follow the same philosophy: give developers native platform capabilities that previously required JavaScript libraries. The result is faster pages, better accessibility, and simpler code. I'll be adopting Grid Lanes and Customizable Select in my projects with progressive enhancement from day one.

For a broader look at how browser capabilities are evolving across all vendors, check out my Chrome 150 CSS features overview and the Google I/O 2026 web developer recap, which covered the growing trend of browsers absorbing JavaScript functionality into native platform APIs.

FAQ

Start Exploring Safari 27 Today

The developer beta of Safari 27 is available now through the Apple Developer Program. If you're building web applications that target Apple platforms — especially if you work with image-heavy layouts, complex forms, or 3D product visualisation — these three features are worth exploring immediately.

I'm a full-stack web developer with extensive experience in modern CSS, browser APIs, and progressive enhancement strategies. If you're planning a web project and want guidance on how to adopt new browser features like Safari 27's web technologies safely and effectively, let's talk.