Safari 27 для разработчиков:
CSS Grid Lanes, кастомный Select и 3D

Введение

Ключевая презентация WWDC26 8 июня 2026 года принесла значительные обновления для веб-разработчиков, использующих Safari. Наряду с иммерсивными окружениями visionOS 27 и новым упаковщиком веб-расширений Safari (без Xcode!), Safari 27 представляет три функции, решающие давние проблемы веб-разработки: нативную CSS-masonry, полностью кастомизируемые элементы форм и первоклассный HTML-элемент для 3D-контента.

Это не инкрементальные улучшения. Grid Lanes устраняют необходимость в JavaScript-библиотеках masonry, которые были обходным решением более десятилетия. Кастомизируемый Select решает одну из старейших проблем стилизации форм — нативные <select>, которые ранее требовали сложных JavaScript-замен. А элемент <model> приносит интерактивную 3D-графику на веб-платформу без необходимости в WebGL или тяжёлых библиотеках.

1. CSS Grid Lanes — нативная masonry-сетка

Masonry-макеты (каскадные сетки в стиле Pinterest, где элементы занимают разное количество вертикального пространства) остаются популярным паттерном дизайна уже более десяти лет. До сих пор их реализация требовала JavaScript-библиотек вроде Masonry.js или Isotope, либо сложных CSS-обходных путей с CSS Columns, создающих проблемы с порядком чтения.

Grid Lanes — это реализация Apple предложения CSS Grid masonry, представленная в Safari 27. Синтаксис расширяет существующее свойство grid-template-rows ключевым словом masonry и вводит свойство flow-tolerance, контролирующее сохранение порядка элементов в DOM — критически важная функция для доступности.

Базовый синтаксис Grid Lanes

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

/* Элементы автоматически находят позицию по высоте */
.masonry-gallery-item {
  break-inside: avoid;
}

/* Отдельные элементы могут занимать несколько колонок */
.masonry-gallery-item.featured {
  grid-column: span 2;
}

Объявление grid-template-rows: masonry указывает сетке размещать элементы по колонкам, а не по строкам. Каждый новый элемент попадает в колонку с наибольшим свободным пространством, создавая характерное каскадное расположение. Это принципиально отличается от CSS Columns, где элементы располагаются сверху вниз, затем слева направо — что создаёт запутанный порядок чтения.

Flow Tolerance — контроль доступности

Один из самых продуманных аспектов Grid Lanes — свойство flow-tolerance. Оно решает проблему доступности: masonry-сетки могут создавать нелогичный порядок чтения, когда элементы размещаются исключительно по доступному пространству.

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

/* flow-tolerance: 0 — элементы размещаются только по доступному пространству
   (максимальная плотность, потенциально нелогичный порядок чтения)
   flow-tolerance: 200px — элементы предпочитают порядок в DOM,
   отклоняются только если разрыв превышает 200px */

flow-tolerance принимает значение длины, определяющее «порог» для отклонения от исходного порядка. Значение 0 размещает элементы строго по доступному пространству (максимальная плотность, минимальное сохранение порядка). Большие значения (100px, 200px) заставляют элементы предпочитать свой порядок в DOM, перемещаясь только для заполнения слишком больших разрывов.

Это значительное улучшение доступности. Скринридеры и навигация с клавиатуры следуют порядку DOM, а не визуальному расположению. flow-tolerance позволяет балансировать между визуальной плотностью и логическим порядком чтения — то, что не предоставляет нативно ни одна JavaScript-библиотека masonry.

Сравнение с существующими решениями

До появления Grid Lanes у разработчиков было три варианта masonry-сеток, каждый со значительными компромиссами:

• Masonry.js / Isotope: JavaScript-библиотеки, измеряющие высоту элементов и позиционирующие их абсолютно. Требуют JavaScript, могут вызывать смещение макета при загрузке и ломаются при динамическом контенте без реинициализации.
• CSS Columns: Элементы располагаются сверху вниз, затем слева направо — запутанный порядок чтения. Элементы могут обрезаться или разрываться между колонками.
• CSS Grid с явными spans: Требует знания высоты всех элементов заранее, что непрактично для динамического контента.

Grid Lanes сочетают визуальную плотность JavaScript-masonry с производительностью и семантикой нативного CSS. Никакого JavaScript, никакого смещения макета, никаких компромиссов с порядком чтения при правильной настройке flow-tolerance.

2. Кастомизируемый Select — appearance: base-select

HTML-элемент <select> печально известен сложностью стилизации. appearance: none существует уже много лет, но он фактически лишает элемент нативного поведения — выпадающего списка, клавиатурного взаимодействия и платформенных соглашений, заставляя разработчиков пересоздавать всё с нуля на JavaScript.

Safari 27 представляет appearance: base-select — новое значение, сохраняющее нативное поведение и открывающее CSS-стилизацию каждого визуального компонента select: кнопки, выпадающего меню, индикатора выбора и даже содержимого опций.

Базовое использование

<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;
}

/* Стилизация выпадающего списка */
.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);
}

/* Стилизация стрелки */
.styled-select::picker-icon {
  color: #666;
  width: 20px;
  height: 20px;
}

/* Стилизация галочки на выбранном элементе */
.styled-select option:checked {
  ::checkmark {
    color: #0f766e;
  }
}

Ключевое отличие: appearance: base-select не удаляет нативное поведение — он предоставляет базовый уровень настраиваемости, сохраняя функциональность стандартного <select>. Клавиатурная навигация (стрелки, поиск по тексту, Enter/Space для открытия/закрытия) работает «из коробки». Скринридеры корректно объявляют опции.

Богатое HTML-содержимое в опциях

Одна из самых востребованных функций — поддержка форматированного содержимого внутри <option>:

<select class="rich-select">
  <option value="react">
    <img src="react-icon.svg" alt="" width="16" height="16">
    React — библиотека UI
  </option>
  <option value="vue">
    <img src="vue-icon.svg" alt="" width="16" height="16">
    Vue.js — прогрессивный фреймворк
  </option>
</select>

Это устраняет необходимость в библиотеках кастомных select (Choices.js, Select2, Headless UI Listbox) для большинства сценариев. Нативный подход по умолчанию доступнее, легче и не требует кода инициализации на JavaScript.

3. Элемент <model> — интерактивные 3D-модели

Safari 27 вводит новый HTML-элемент: <model>. Он позволяет встраивать интерактивные 3D-модели прямо на веб-страницы — без знаний WebGL, без Three.js, без настройки canvas. Это первоклассный примитив веб-платформы для 3D-контента, спроектированный по той же философии, что <video> и <audio>.

Базовое использование

<model
  src="chair.usdz"
  alt="3D-модель эргономичного офисного кресла"
  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>Ваш браузер не поддерживает 3D-модели.</p>
</model>

Элемент <model> поддерживает несколько форматов через дочерние <source> — аналогично <picture> для изображений. Браузер выбирает первый поддерживаемый формат:

• USDZ (model/vnd.usdz+zip) — нативный формат Apple, широко поддерживается на iOS и iPadOS. Лучший выбор для AR Quick Look.
• glTF Binary (model/gltf-binary) — стандартный веб-формат 3D, поддерживается большинством инструментов и платформ.
• Сцены Reality Composer Pro — формат Apple для сложных интерактивных сцен с анимациями и поведением.

Ключевые атрибуты

• environmentmap — управляет окружением отражений. Значения "studio", "outdoor", "indoor" или URL HDR-изображения.
• stagemode — режим взаимодействия. "orbit" — вращение, "pan" — панорамирование для больших моделей, "zoom" — только масштабирование.
• camera-controls — показывает нативный интерфейс управления камерой.
• interaction — "auto" медленно вращает модель при загрузке, "off" — статичный старт.

JavaScript API

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

// Управление камерой
model.rotateTo({ x: 45, y: 30, z: 0 }); // анимация поворота
model.resetCamera();                      // сброс камеры
model.zoomTo(1.5);                        // масштабирование

// Управление анимациями
const animations = model.animations;      // список анимаций
model.playAnimation('spin');              // воспроизведение
model.pauseAnimations();                  // пауза
model.stopAnimations();                   // остановка

4. Поддержка браузерами и стратегия внедрения

Все три основные функции доступны только в Safari 27 на данный момент. Рекомендуется использовать прогрессивное улучшение:

Прогрессивное улучшение для Grid Lanes

/* Базовая сетка: стандартный CSS Grid */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

/* Улучшенная сетка: Grid Lanes в Safari 27+ */
@supports (grid-template-rows: masonry) {
  .photo-grid {
    grid-template-rows: masonry;
  }
}

5. Практические выводы

Safari 27 — значительный шаг вперёд для трёх областей веб-разработки, которые годами полагались на JavaScript-обходные пути:

• Grid Lanes приносят нативную CSS-masonry с дизайном, ориентированным на доступность. flow-tolerance — действительно новое решение проблемы порядка чтения в плотных визуальных макетах.
• Кастомизируемый Select решает одну из старейших проблем стилизации форм. Богатые HTML-опции и полный CSS-контроль через псевдоэлементы устраняют главную причину использования JavaScript-замен.
• Элемент <model> — платформенный примитив для 3D-контента, следующий философии <video> и <audio>. Для e-commerce, образования и творческих портфолио это устраняет значительные технические барьеры.

Все три функции следуют одной философии: дать разработчикам нативные возможности платформы, которые раньше требовали JavaScript-библиотек. Результат — более быстрые страницы, лучшая доступность и более простой код.

FAQ

Начните изучать Safari 27 сегодня

Разработческая бета Safari 27 доступна через Apple Developer Program. Если вы создаёте веб-приложения для платформ Apple — особенно если работаете с насыщенными изображениями макетами, сложными формами или 3D-визуализацией продуктов — эти три функции стоит изучить немедленно.

Я — full-stack веб-разработчик с опытом в современных CSS, браузерных API и стратегиях прогрессивного улучшения. Если вы планируете веб-проект и хотите получить консультацию по безопасному внедрению новых функций браузеров, свяжитесь со мной.