Safari 27.3 beta получил Adaptive Dark Mode: светлые сайты затемняются

Команда WebKit (Apple) объявила в блоге об Adaptive Dark Mode в бета-версии Safari 27.3. Когда пользователь включает режим, Safari адаптирует светлые сайты и показывает их тёмными. Мотивация в посте такая: Safari 12.1 весной 2019 года стал первым браузером с поддержкой тёмного режима в вебе, но не у каждого сайта есть тёмная версия. Почти 40% загрузок веб-страниц приходится на пользователей в тёмном режиме, а поддерживают его только 10% загрузок страниц. Новая функция должна закрыть этот разрыв и дать единообразный тёмный вид по всему вебу.

Как включить: сначала в системе должно быть выбрано тёмное оформление. Затем нужно открыть сайт со светлым фоном: Safari предложит предпросмотр Adaptive Dark Mode, после чего нужно нажать «Try» («Попробовать»).

Как это работает. Сайты, которые сообщают о поддержке тёмной темы через в HTML или color-scheme: light dark в CSS, режим не затрагивает вовсе. Для остальных Safari быстро анализирует страницу, оценивая, преимущественно она светлая или тёмная. Если фон тёмный, а текст светлый, ничего не меняется; светлая страница делается тёмной.

В основе, преобразование цвета. Авторы разработали цветовую матрицу, которая инвертирует яркость цветов, сохраняя оттенок: светлые фоны становятся тёмными, тёмный текст, светлым. Для текста режим стремится к достаточному контрасту по WCAG, то есть к соотношению 4,5:1. Светлые CSS-градиенты тоже затемняются. Safari старается, чтобы кнопки контрастировали с фоном, текст поверх картинок оставался читаемым, а выпадающие при наведении меню, чёткими.

С изображениями режим обращается осторожно: большинство остаётся как есть, но SVG-картинки проверяются и при необходимости перекрашиваются, а у растровых анализируются гистограммы пикселей и инвертируются простые чёрно-белые логотипы. Эффекты вроде масок и mix-blend-mode на элементах с преобразованными цветами в ряде случаев отключаются. Содержимое

Приватность. Safari не даёт сайтам определить, что Adaptive Dark Mode применён: JavaScript, запрашивающий CSS-цвета, получает исходные цвета автора, а изображения, нарисованные на canvas, отображаются в оригинальном виде. Причина в том, что обнаружимость увеличила бы объём данных для отслеживания (fingerprinting, снятия цифрового отпечатка) и ослабила бы защиту от трекеров.

Советы владельцам сайтов. Страница будет хорошо работать с режимом, если следует современным практикам. Для старых сайтов предлагают: заменить растровые логотипы и значки на SVG; использовать в CSS сплошные цвета или градиенты вместо мозаичных фоновых картинок; заменить спрайты современным CSS для скруглений, теней и состояний кнопок; делать картинки контента с прозрачным фоном, а не «запекать» в них цвет страницы; добавлять отступы у контейнеров. Для отдельной части страницы можно применить color-scheme: light dark к нужному элементу и добавить свои тёмные стили. Для полного контроля предлагается собственная тёмная тема на базе meta color-scheme:root { color-scheme: light dark }, @media (prefers-color-scheme: dark), с media по prefers-color-scheme и light-dark(), а также color-mix() и contrast-color(). Поддержку нужно объявлять в HTML head или в CSS на :root либо body, а не вставлять позже через JavaScript.

Отказ от преобразования. Сайт может отказаться через color-scheme: light only (meta-тег или правило CSS, в том числе для отдельных элементов), но ключевое слово only в Safari 27.3 beta 1 пока не поддерживается: в посте обещают, что ситуация изменится по ходу бета-тестирования.

Обратная связь: владельцы сайтов могут написать на web-evangelist@apple.com, а пользователи, нашедшие плохо работающий сайт, просят отправлять отчёт через Feedback Assistant.

Ключевые факты

В Safari 27.3 beta появился Adaptive Dark Mode: по включению пользователем светлые сайты показываются тёмными; нужно тёмное системное оформление, а Safari предлагает предпросмотр с кнопкой «Try».
Сайты, объявившие поддержку тёмной темы через color-scheme (meta-тег или CSS), не затрагиваются; страницы с тёмным фоном и светлым текстом тоже остаются как есть.
Преобразование: цветовая матрица инвертирует яркость и сохраняет оттенок, для текста цель, контраст WCAG 4,5:1; светлые градиенты затемняются, SVG перекрашиваются, простые чёрно-белые растровые логотипы инвертируются, canvas не меняется.
Safari скрывает от сайтов факт применения режима, чтобы не добавлять данных для снятия цифрового отпечатка; JavaScript получает исходные цвета.
Отказ от преобразования через color-scheme: light only пока не работает: ключевое слово only не поддерживается в Safari 27.3 beta 1.

Почему это важно

По данным из поста WebKit, почти 40% загрузок веб-страниц приходится на пользователей тёмного режима, а поддерживают его лишь 10% загрузок. Тёмный режим в вебе Safari ввёл ещё в 2019 году (версия 12.1), но большинство сайтов так и остались светлыми. Теперь сам браузер берёт на себя затемнение таких страниц на уровне движка WebKit, а не силами каждого сайта. Это заметно меняет повседневный опыт тех, кто пользуется тёмным оформлением, и затрагивает вёрстку любого сайта без собственной тёмной темы.

Кому это важно

Пользователям Safari с тёмным системным оформлением, которым надоели ослепляюще белые сайты. Веб-разработчикам и владельцам сайтов, чьи страницы не объявляют поддержку тёмной темы: их внешний вид у части посетителей будет автоматически преобразован. Дизайнерам и командам, отвечающим за логотипы, иконки и фоновые изображения, а также тем, кто опирается на mix-blend-mode и маски.

Как это применить

Пользователю: установить Safari 27.3 beta, выбрать тёмное оформление системы, открыть светлый сайт и в предложенном предпросмотре нажать «Try». Владельцу сайта: проверить страницы в бете; при желании объявить поддержку тёмной темы через meta color-scheme или CSS на :root либо body (не через JavaScript), а для полного контроля сделать свою тёмную тему на prefers-color-scheme и light-dark(). Для лучшего результата в автоматическом режиме: SVG вместо растровых логотипов, сплошные цвета и градиенты вместо мозаичных фонов, прозрачные фоны у картинок контента, отступы у контейнеров. О проблемах можно сообщить через Feedback Assistant или на web-evangelist@apple.com. Цена и сроки выхода финальной версии в источнике не указаны.

Можно ли доверять

Источник первичный: это анонс в блоге WebKit, написанный от первого лица («мы»), автор поста по имени не назван. Описание принципов работы, заявления самих разработчиков; цифры про быстродействие и энергоэффективность даны только качественно, без замеров. Источник цифр «почти 40%» и «10%» (набор данных, период, браузеры) в тексте не указан. Функция пока в бета-версии и может измениться по ходу тестирования.

Риски и подводные камни

Автоматическое преобразование не идеально: в ряде случаев отключаются эффекты масок и mix-blend-mode, canvas не меняется, а растровые картинки с запечённым фоном, мозаичные фоны и спрайты могут выглядеть плохо. Основной способ отказа, color-scheme: light only, пока не работает: ключевое слово only не поддерживается в Safari 27.3 beta 1. Сайты не могут определить, что режим применён, поэтому отладка и аналитика у таких пользователей затруднены: JavaScript видит исходные цвета, а не показанные на экране. Версия бета, итоговое поведение может отличаться.

«Почти 40% загрузок веб-страниц приходится на пользователей в тёмном режиме, и при этом лишь 10% загрузок страниц его поддерживают.»

— блог WebKit, анонс Adaptive Dark Mode