Safari 26.5: новые CSS и веб-возможности

Q: Что такое псевдокласс :open в CSS?

Псевдокласс :open предоставляет единый способ стилизации открытого состояния интерактивных элементов таких как <details>, <dialog>, <select> и <input>. Он заменяет селектор атрибута [open], который работал только для <details> и <dialog>, но не для <select> или <input>.

Q: Что изменилось в CSS random() в Safari 26.5?

Именованные случайные значения, такие как random(--size, 100px, 200px), теперь создают глобальный результат вместо того, чтобы быть привязанными к отдельным элементам. Safari 26.5 также добавил ключевое слово element-scoped для случаев, когда нужно поведение для каждого элемента, и удалил устаревшее ключевое слово element-shared.

Q: Поддерживает ли Safari 26.5 color-interpolation для SVG-градиентов?

Да. Safari 26.5 добавляет поддержку свойства color-interpolation в контексте SVG-градиентов, включая значение linearRGB. Это позволяет разработчикам контролировать интерполяцию цветов вдоль SVG-градиентов для более точных и визуально равномерных цветовых переходов.

Q: Что такое ToggleEvent.source в Safari 26.5?

ToggleEvent.source — это новое свойство интерфейса ToggleEvent, которое определяет, какой элемент вызвал переключение popover. Когда несколько кнопок могут открывать один и тот же popover, event.source показывает, какая из них была нажата, устраняя необходимость в data-атрибутах или отслеживании через замыкания.

Q: Сколько исправлений ошибок включает Safari 26.5?

Safari 26.5 включает 63 исправления ошибок, что делает его самым большим майским релизом WebKit. Ключевые области: scroll-driven анимации (5 исправлений), Anchor Positioning (5+ исправлений), CSS Grid и вёрстка (4 исправления), рендеринг при разных уровнях зума и CSS-единицы (4 исправления), шрифты и текст (3 исправления), а также SVG, WebRTC, доступность и сетевые улучшения.

Что нового в Safari 26.5

11 мая 2026 года Apple выпустила Safari 26.5 — последнюю версию своего флагманского браузера. Хотя это не революционный релиз, Safari 26.5 приносит значимые улучшения в CSS, веб-API и общее качество браузера, о которых стоит знать каждому веб-разработчику.

Главные новинки включают псевдокласс :open для стилизации состояний интерактивных элементов, улучшения CSS random() с глобальными именованными значениями и новым ключевым словом element-scoped, поддержку color-interpolation для SVG-градиентов, свойство ToggleEvent.source для Popover API и новый Origin API для работы с источниками (origin). Но главная история — это 63 исправления ошибок, что делает этот релиз самым качественно проработанным майским обновлением в истории WebKit.

CSS

Псевдокласс :open

Единая стилизация открытых <details>, <dialog>, <select> и <input>. Заменяет ограниченный селектор атрибута [open].

CSS

Улучшения random()

Глобальные именованные значения по умолчанию, новое ключевое слово element-scoped для поэлементной случайности.

CSS

SVG color-interpolation

Новое свойство для управления интерполяцией цветов в SVG-градиентах, включая цветовое пространство linearRGB.

JS / API

ToggleEvent.source

Определяет, какой элемент вызвал переключение popover. Упрощает сложные popover-взаимодействия.

JS / API

Origin API

Структурированный API для операций с источником — схема, хост и порт без ручного парсинга URL.

Качество

63 исправления

Scroll-driven анимации, Anchor Positioning, CSS Grid, SVG, WebRTC, рендеринг при зуме и многое другое.

1. Псевдокласс :open — Единый способ стилизации открытых состояний

Псевдокласс :open — самая практически полезная CSS-функция в Safari 26.5. Он предоставляет единый, последовательный способ стилизации открытого состояния нескольких интерактивных элементов, которые ранее имели несовместимые подходы.

До :open — Подход с селектором атрибута [open]

Раньше единственным способом стилизовать открытый <details> или <dialog> был селектор атрибута [open]. Он работал для этих двух элементов, но не действовал на выпадающие списки <select> или пикеры <input> (выбор даты, цвета и т.д.).

/* Старый подход — селектор атрибута, ограниченный охват */
details[open] {
  border: 2px solid #0071e3;
}
dialog[open] {
  border: 2px solid #0071e3;
}
/* НЕ мог стилизовать открытый select или пикеры input */
    

После :open — Современный подход

С :open вы пишете один селектор, который работает для всех четырёх типов элементов:

/* Новый подход — единообразно для всех типов элементов */
:open {
  border-color: #0071e3;
}

/* Специфичные типы */
details:open {
  background: #f0f5ff;
}
details:open summary {
  font-weight: 600;
  color: #0071e3;
}
dialog:open {
  box-shadow: 0 8px 40px rgba(0, 113, 227, 0.15);
}
select:open {
  border: 1px solid skyblue;
}
    

Для <dialog> псевдокласс :open срабатывает независимо от того, открыт ли диалог через showModal() или show(). Для <input> он применяется, когда отображается связанный пикер — выбор даты, цвета и другие нативные контролы.

Это чистое прогрессивное улучшение: браузеры без поддержки :open просто игнорируют правила, а элементы продолжают нормально функционировать. Полифилл не требуется.

2. Улучшения CSS random() — Глобальные именованные значения и element-scoped

Safari стал первым браузером, внедрившим CSS random() в версии 26.2 (декабрь 2025). С тех пор Рабочая группа CSS уточнила спецификацию, и Safari 26.5 реализует изменения, включая новое ключевое слово element-scoped.

Безымянный random() — Уникальные значения для каждого элемента

Без именованного значения random() генерирует новое число каждый раз при вычислении. Каждый элемент получает уникальное значение:

/* Каждый .box получает свои случайные ширину и высоту */
.box {
  width: random(100px, 200px);
  height: random(100px, 200px);
  background: random(var(--blue), var(--green), var(--red));
}
    

Именованный random() — Глобальные результаты (новое поведение в 26.5)

Использование идентификатора пользовательского свойства в качестве первого аргумента создаёт именованное случайное значение. В Safari 26.5 эти имена имеют глобальную область видимости — все экземпляры с одинаковым именем используют один случайный результат для всего документа.

/* Все .box получают одинаковые случайные ширину и высоту */
.box {
  width: random(--box-w, 100px, 200px);
  height: random(--box-h, 100px, 200px);
}
/* Теперь --box-w даёт одно значение для всех боксов на странице */
    

element-scoped — Когда нужна поэлементная случайность

Новое ключевое слово element-scoped восстанавливает поэлементное поведение, когда это необходимо. Устаревшее ключевое слово element-shared было удалено.

/* Каждый элемент получает своё уникальное случайное значение */
.box {
  width: random(element-scoped, 100px, 200px);
  height: random(element-scoped, 100px, 200px);
}
    

3. color-interpolation для SVG-градиентов

Safari 26.5 добавляет поддержку свойства color-interpolation в контексте SVG-градиентов. Это свойство управляет интерполяцией цветов между точками градиента, поддерживая значения auto (по умолчанию) и linearRGB.

Значение linearRGB использует линейное RGB-цветовое пространство, которое обеспечивает более визуально равномерные цветовые переходы по сравнению со стандартной sRGB-интерполяцией. Это особенно заметно в сине-фиолетовых градиентах и других переходах, где sRGB-интерполяция может давать грязные промежуточные оттенки.

<!-- SVG-градиент с линейной RGB-интерполяцией -->
<linearGradient id="smoothGradient"
    x1="0%" y1="0%"
    x2="100%" y2="0%"
    color-interpolation="linearRGB">
  <stop offset="0%" stop-color="#0066ff"/>
  <stop offset="50%" stop-color="#00ccff"/>
  <stop offset="100%" stop-color="#33ff99"/>
</linearGradient>
    

4. Свойство ToggleEvent.source — Улучшенная работа с Popover

Popover API стал революцией в создании оверлеев, подсказок и меню без JavaScript-библиотек. Safari 26.5 добавляет свойство ToggleEvent.source, которое определяет, какой элемент вызвал переключение popover-цели.

// Несколько триггеров для одного popover
const popover = document.getElementById("my-popover");

popover.addEventListener("toggle", (event) => {
  // event.source показывает, какой элемент вызвал переключение
  if (event.newState === "open") {
    console.log("Открыто элементом:", event.source?.id || event.source);
    const button = event.source;
    button?.classList.add("active-source");
  } else if (event.newState === "closed") {
    console.log("Закрыто элементом:", event.source?.id || event.source);
  }
});
    

5. Origin API — Структурированные операции с источником

Safari 26.5 представляет Origin API — новый JavaScript-интерфейс для операций на основе источника (origin). Он предоставляет программный доступ к компонентам источника — схеме, хосту и порту — без ручного парсинга URL.

// Origin API
const origin = new URL("https://example.com:8080/path?q=1").origin;

// Вместо ручного парсинга URL:
const url = new URL("https://example.com:8080/path");
console.log(url.origin);  // "https://example.com:8080"
console.log(url.protocol); // "https:"
console.log(url.host);     // "example.com:8080"
console.log(url.hostname); // "example.com"
console.log(url.port);     // "8080"
    

6. 63 исправления ошибок — Самый масштабный майский релиз

Количество и качество исправлений в Safari 26.5 впечатляет. Джен Симмонс из WebKit назвала его "самым большим майским релизом WebKit", с улучшениями, охватывающими почти все подсистемы:

Scroll-Driven Анимации

Исправлены имена временных шкал, пауза при динамическом состоянии, значения прогресса у границ view timeline и восстановление из bfcache.

Anchor Positioning

Исправлены цепочки из 3+ элементов, fallback anchor() с нулём без единиц, область видимости display:contents и привязка sticky-дочерних элементов.

CSS Grid и Вёрстка

Исправлены sizing subgrid внутри grid-lanes, границы таблиц с rowspan, абсолютное позиционирование внутри block-in-inline и отображение текста с column-count:1.

Zoom и Единицы

Исправлены двойной зум lh/rlh с числовым line-height, aspect-ratio на увеличенных страницах и evaluation-time zoom для несвойственных свойств.

Шрифты и Текст

Исправлены fallback @font-face с разными стилями, обработка hanging-punctuation для кавычек и пробелов.

SVG и WebRTC

Значительные улучшения рендеринга SVG и стабильности WebRTC в различных сценариях.

FAQ

Что такое псевдокласс :open в CSS?

Псевдокласс :open предоставляет единый способ стилизации открытого состояния интерактивных элементов, таких как <details>, <dialog>, <select> и <input>. Он заменяет селектор атрибута [open], который работал только для <details> и <dialog>. Доступен в Safari 26.5+ и реализован как прогрессивное улучшение — браузеры без поддержки просто игнорируют правила.

Что изменилось в CSS random() в Safari 26.5?

Именованные случайные значения, такие как random(--size, 100px, 200px), теперь создают глобальный результат вместо привязки к отдельным элементам. Это соответствует обновлённой спецификации CSS. Safari 26.5 также добавил ключевое слово element-scoped для случаев, когда нужно поэлементное поведение, и удалил устаревшее element-shared.

Поддерживает ли Safari 26.5 color-interpolation для SVG-градиентов?

Да. Safari 26.5 добавляет поддержку свойства color-interpolation в контексте SVG-градиентов, включая значение linearRGB. Это позволяет контролировать интерполяцию цветов для более точных и визуально равномерных переходов, особенно в сине-фиолетовых градиентах, где sRGB-интерполяция может давать грязные промежуточные оттенки.

Что такое ToggleEvent.source в Safari 26.5?

ToggleEvent.source — новое свойство интерфейса ToggleEvent, которое определяет, какой элемент вызвал переключение popover. Когда несколько кнопок могут открывать один и тот же popover, event.source показывает, какая из них была нажата, устраняя необходимость в data-атрибутах или отслеживании через замыкания. Упрощает создание контекстных меню, action sheets и подсказок с несколькими триггерами.

Что такое Origin API в Safari 26.5?

Origin API предоставляет структурированный способ выполнения операций на основе источника (origin) в JavaScript. Он даёт доступ к компонентам источника (схема, хост, порт) через стандартный парсинг URL. Полезен для проверок безопасности (валидация origin сторонних скриптов), скоупинга Service Worker, валидации кросс-доменных запросов и конфигурации на основе источника.

Сколько исправлений ошибок включает Safari 26.5?

Safari 26.5 включает 63 исправления ошибок, что делает его самым большим майским релизом WebKit. Ключевые области: scroll-driven анимации (5 исправлений), Anchor Positioning (5+), CSS Grid и вёрстка (4 исправления), рендеринг при зуме и единицы (4), шрифты (3), а также SVG, WebRTC, доступность и сеть. Среди отдельных исправлений: корректная инвалидация :has(:empty), разрешение цепочек anchor-positioned элементов и исправление двойного зума lh/rlh.

Доступен ли Safari 26.5 на старых версиях macOS?

Да. Safari 26.5 доступен для iOS 26.5, iPadOS 26.5, visionOS 26.5, macOS 26.5, macOS Sequoia 15 и macOS Sonoma 14. Релиз состоялся 11 мая 2026 года. Полный список всех исправлений доступен в примечаниях к релизу Safari 26.5 на Apple Developer.

Стоит ли обновляться?

Safari 26.5 — бесплатное обновление, доступное через macOS Software Update, iOS/iPadOS Settings и visionOS. Для большинства пользователей и разработчиков нет причин не обновляться — новые функции обратно совместимы, а 63 исправления делают повседневную работу и разработку более стабильной.

Псевдокласс :open и улучшения CSS random() — главные достопримечательности для фронтенд-разработчиков. Свойство ToggleEvent.source и поддержка color-interpolation более нишевые, но ценны для интерфейсов с popover и SVG-дизайнов соответственно.

Итог: Safari 26.5 демонстрирует обновлённую приверженность Apple качеству WebKit. Возможно, в нём нет громких функций крупного ежегодного релиза, но совокупный эффект 63 исправлений в scroll-анимациях, anchor positioning, вёрстке и зуме делает веб-платформу заметно более надёжной.

Нужна помощь с кросс-браузерной разработкой?

Отслеживание обновлений браузеров Safari, Chrome и Firefox — это работа на полный день. Если вы создаёте веб-приложение, которое должно надёжно работать во всех современных браузерах — включая новейшие функции Safari — я могу помочь.

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

Safari 26.5: новые CSS и веб-возможности
Полное руководство разработчика

Что нового в Safari 26.5

Псевдокласс :open

Улучшения random()

SVG color-interpolation

ToggleEvent.source

Origin API

63 исправления

1. Псевдокласс :open — Единый способ стилизации открытых состояний

До :open — Подход с селектором атрибута [open]

После :open — Современный подход

2. Улучшения CSS random() — Глобальные именованные значения и element-scoped

Безымянный random() — Уникальные значения для каждого элемента

Именованный random() — Глобальные результаты (новое поведение в 26.5)

element-scoped — Когда нужна поэлементная случайность

3. color-interpolation для SVG-градиентов

4. Свойство ToggleEvent.source — Улучшенная работа с Popover

5. Origin API — Структурированные операции с источником

6. 63 исправления ошибок — Самый масштабный майский релиз

FAQ

Стоит ли обновляться?

Нужна помощь с кросс-браузерной разработкой?

Обсудим ваш проект?

Safari 26.5: новые CSS и веб-возможностиПолное руководство разработчика

Что нового в Safari 26.5

Псевдокласс :open

Улучшения random()

SVG color-interpolation

ToggleEvent.source

Origin API

63 исправления

1. Псевдокласс :open — Единый способ стилизации открытых состояний

До :open — Подход с селектором атрибута [open]

После :open — Современный подход

2. Улучшения CSS random() — Глобальные именованные значения и element-scoped

Безымянный random() — Уникальные значения для каждого элемента

Именованный random() — Глобальные результаты (новое поведение в 26.5)

element-scoped — Когда нужна поэлементная случайность

3. color-interpolation для SVG-градиентов

4. Свойство ToggleEvent.source — Улучшенная работа с Popover

5. Origin API — Структурированные операции с источником

6. 63 исправления ошибок — Самый масштабный майский релиз

FAQ

Стоит ли обновляться?

Нужна помощь с кросс-браузерной разработкой?

Обсудим ваш проект?

Safari 26.5: новые CSS и веб-возможности
Полное руководство разработчика