Safari 27 и iOS 27: что изменилось для вашего сайта

Часть ваших посетителей заходит на сайт через Safari, и их долю можно увидеть в вашей собственной аналитике. Поэтому каждая новая версия Safari важна для вопроса о том, заработает ли новая возможность CSS или HTML у настоящих посетителей. В бета-записи блога WebKit для Safari 27 приведён длинный список: настраиваемый select, позиционирование якоря с учётом трансформаций, привязка прокрутки, псевдокласс :heading, revert-rule, ключевое слово stretch и другое.

Как бы ни был длинен список, знать его целиком вам не нужно. Большинство возможностей облегчает жизнь тому, кто пишет код сайта; посетитель их напрямую не видит и лишь замечает, что страницы реже ломаются. Как владелец, спросите себя, какой части вашего сайта нужна любая из них. Ответ обычно один и тот же: формы заявок и области, где много изображений.

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

Это не обязательное требование. Если ваш нынешний список работает, не трогайте его и не переписывайте без необходимости. Новая возможность больше всего смысла имеет для списков с особым видом, которые до сих пор имитировали кодом. Поддерживают ли другие браузеры эту возможность так же, в наших источниках не сказано, поэтому закажите дизайн так, чтобы там, где возможности нет, он возвращался к обычному списку.

Среди изображений заметнее всего значение auto для атрибута sizes элемента img. Блог WebKit описывает его так: для изображений с отложенной загрузкой браузер сам вычисляет размер, и это снимает нагрузку писать значение sizes вручную для каждой картинки. Привязка прокрутки, тоже из блога, не даёт месту, где вы читаете, сместиться, когда выше позже подгружается содержимое.

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

• Настраиваемый выпадающий список: поля форм в стиле бренда
• Значение auto для sizes у img: браузер сам вычисляет размер изображений с отложенной загрузкой
• Привязка прокрутки: страница не прыгает, когда выше подгружается содержимое
• Элемент model: 3D-контент на iOS, iPadOS и macOS
• Дополнения для разработчиков, например API статической маршрутизации Service Worker, ReadableStream.from() и maxAge в Cookie Store API

Ссылаясь на блог WebKit, 9to5Mac сообщает, что в Safari 27 есть локальный MCP-сервер. Когда в настройках разработчика включена удалённая автоматизация, агенты для написания кода могут пользоваться окном браузера. MCP представляет собой протокол связи, который позволяет ИИ-агентам подключаться к различным инструментам; в данном случае таким инструментом выступает сам браузер Safari.

Для владельца сайта прямой смысл такой: агент может зайти и на ваш сайт, а если разработчик включил это для проверок на своём компьютере, он делает это в настоящем браузере. Ваш разработчик мог бы использовать это, чтобы автоматически проверять работу ваших форм на сайте; это возможность, а не вывод, сделанный источниками. Тот же источник упоминает и упаковщик веб-расширений Safari, которому не нужны ни Mac, ни Xcode.

Первая ошибка: выложить новую возможность на рабочий сайт сразу же, едва прочитав новость о ней. То, что возможность работает в Safari 27, не значит, что она работает у каждого посетителя; часть устройств остаётся на старых версиях. Вторая: заменить работающий выпадающий список лишь потому, что появился новый, и в итоге сломать форму в мобильной версии сайта.

Третья: проверять только на компьютере. Вид на iPhone, поведение клавиатуры и экранного диктора, а также размер областей нажатия нужно проверять отдельно, потому что на компьютере все они выглядят иначе.

• Выложить новую возможность на сайт без проверки
• Заменить работающий компонент только потому, что он новый
• Проверять только в браузере для компьютера
• Не подумать о том, что произойдёт там, где возможность не поддерживается

Если на вашем сайте нет поля формы с особым оформлением, 3D-контента и сложной вёрстки страниц, из-за Safari 27 делать ничего не нужно. Для небольшого сайта-визитки правильный шаг такой: один раз открыть сайт на iPhone и проверить форму и изображения на глаз, ничего не переписывая заранее.

Пробовать элемент model для 3D-контента тоже нужно не всем. Если 3D-вид вашего товара не помогает продажам, возможность принесёт лишь нагрузку по сопровождению. Сначала посмотрите, что на самом деле хочет сделать посетитель вашего сайта, и только потом выбирайте возможность.