Safari 27 делает нативный select настраиваемым

Safari 27.0 вышел 16 сентября 2026 года. В примечаниях к выпуску Apple указана сборка 27.0 (20625.1.29) для iOS 27, iPadOS 27, visionOS 27, macOS 27, macOS 26 и macOS Sequoia. Обзор Web Standards, опубликованный 17 сентября, насчитывает 83 новые возможности.

Выпуск широкий, а не глубокий: переписанный загрузчик модулей ES, встроенная вёрстка с субпиксельной точностью, привязка прокрутки, которую не нужно включать, API статической маршрутизации service worker и длинный список исправлений доступности. Две из 83 возможностей определяют, на что может рассчитывать форма, встроенная на чужую страницу: нативный select, который можно стилизовать, и способ объявить сообщение без live-региона.

Нативный select теперь можно стилизовать

Элемент select был элементом управления, который меньше всего стилизовали и чаще всего заменяли. Настраиваемый select меняет этот расклад. Свойство appearance: base-select переключает элемент на новые стили по умолчанию от браузера и открывает остальную часть возможности.

select,
select::picker(select) {
  appearance: base-select;
}

• ::picker(select) нацелен на сам выпадающий список, а ::picker-icon — на его стрелку.

• ::checkmark нацелен на отметку в выбранной строке.

• selectedcontent решает, что закрытый элемент управления показывает для текущего варианта, поэтому сводкой может быть разметка, а не копия подписи.

• option теперь может содержать HTML, поэтому вариант может нести иконку или подпись в две строки.

Ничто из этого не заменяет сам элемент. Это по-прежнему настоящий элемент формы: навигация с клавиатуры, семантика для скринридеров, отправка формы, проверка ограничений и событие change продолжают работать. Выпадающий список, пересобранный из div, выбрасывает всё это, а затем собирает худшую версию. Выбор base-select — нет.

ariaNotify() без live-региона

Примечания к выпуску Apple добавляют поддержку API ariaNotify, который ставит текст в очередь, чтобы скринридер объявил его без live-региона ARIA. Для формы это закрывает конкретный пробел. Live-регион говорит, когда меняется его содержимое, поэтому сводка ошибок, повторяющая одну и ту же фразу, не даёт ни изменения, ни объявления. ariaNotify() ставит в очередь само сообщение.

Риск — в объёме. Объявление не является сообщением о проверке. Если встроенная форма объявляет каждое изменение поля, пользователь скринридера слышит непрерывный комментарий и уходит со страницы. Объявляйте то, с чем человеку нужно что-то сделать: первое недопустимое поле после «Отправить», отправку, которая не прошла, шаг, который только что открылся.

Что проверить во встроенной форме

• Закрытый select с длинным списком вариантов, в светлой и тёмной теме.

• Select внутри собственной вёрстки сгенерированного компонента, на ширине 320px.

• Сводка ошибок объявляется один раз, а не два.

• Режим forced-colors, потому что base-select приносит собственные стили по умолчанию.

Сгенерированный компонент FormFlow выводит нативные элементы форм HTML, поэтому новые стили Safari по умолчанию могут дойти до встроенной формы без каких-либо изменений с нашей стороны. В этой статье мы не проверяли сгенерированный компонент на Safari 27 и не будем намекать, что проверяли. Если вы встраиваете форму, отрисуйте её в тех версиях Safari, которые вы поддерживаете, прежде чем полагаться на внешний вид по умолчанию.

Чего это не решает

То, что Safari выпускает настраиваемый select, не делает его интероперабельным. В обзоре Web Standards сказано, что новый дизайн по умолчанию передан в рабочую группу CSS для дальнейшей доработки, а идентичная отправная точка зависит от того, обновят ли другие браузеры свои реализации. Стиль, который выглядит правильно в Safari 27, в тот же день может выглядеть неправильно в другом движке.

ariaNotify() — дополнение браузера, а не стандарт форм. Оно не решает, какие объявления уместны, и не заменяет подпись, fieldset с legend или видимую ошибку рядом с полем.

Здесь нет заявления FormFlow о поддержке Safari 27, и ничто здесь не меняет поведение встроенной формы в версии Safari, где этих возможностей нет. О контракте POST, на который отправляет встроенная форма, читайте справочник API.