Safari 27.3 Beta додає адаптивний темний режим для світлих вебсайтів

WebKit анонсував адаптивний темний режим у Safari 27.3 beta. Safari 12.1 став першим браузером, що підтримав темний режим у вебі навесні 2019 року, але не кожен сайт має темну версію. Адаптивний темний режим пристосовує світлі сайти для користувачів темного режиму, залишаючи без змін сайти, що оголошують підтримку темного режиму.

Як працює адаптивний темний режим

Майже 40% завантажень сторінок надходять від користувачів темного режиму, але лише 10% сторінок його підтримують. Адаптивний темний режим створено для закриття цього розриву. Спочатку він перевіряє, чи сигналізує сайт про підтримку темного режиму через метатег color-scheme зі значенням content light dark в HTML або color-scheme: light dark у CSS. Якщо так, функція не змінює сторінку. Для інших сайтів Safari аналізує кольори та оцінює, чи сторінка переважно світла чи темна. Сторінка із загалом темним тлом і світлим текстом залишається без змін, а світла сторінка адаптується до темного режиму.

Функція перетворює колір, інвертуючи яскравість і зберігаючи відтінок. Вона прагне забезпечити достатній контраст тексту за WCAG (4.5:1). Світлі CSS-градієнти перетворюються, а Safari ухвалює рішення, щоб кнопки, текст поверх зображень і меню, які розкриваються при наведенні, залишалися зручними. Більшість зображень залишаються без змін, але кольори SVG можуть перетворюватися за потреби, а растрові зображення можуть мати інвертовані прості чорно-білі логотипи після аналізу гістограми. Ефекти на кшталт масок і mix-blend-mode у деяких випадках можуть вимикатися, тоді як вміст canvas залишається без змін.

Поради для вебсайтів

WebKit каже, що сторінки загалом працюють добре, якщо дотримуються сучасних практик веброзробки. Серед оновлень: заміна растрових логотипів і піктограм на SVG, використання суцільних або градієнтних CSS-кольорів замість мозаїчних фонових зображень, заміна спрайтів зображень сучасним CSS і створення контентних зображень із прозорим тлом. Додавання внутрішніх відступів до контейнерів може запобігти тісноті. Для темного вигляду частини сторінки розробники можуть застосувати color-scheme: light dark до елемента й додати власні темні стилі.

Для повного контролю сайти можуть оголосити повну підтримку темного режиму через широко доступні вебтехнології: метатег color-scheme, :root { color-scheme: light dark }, медіазапити prefers-color-scheme, елементи picture source і light-dark(). Новіші CSS-функції, як-от color-mix() і contrast-color(), а також техніки CSS-змінних, надають більше можливостей. WebKit радить оголошувати підтримку в HTML або CSS, а не додавати її пізніше через JavaScript.

Сайти, що мають залишатися лише світлими, можуть використовувати color-scheme: light only через HTML-метатег або CSS. Ключове слово only не підтримується в Safari 27.3 beta 1. WebKit каже перевіряти знову, оскільки функція розвиватиметься в процесі бета-тестування.

Конфіденційність і відгуки

WebKit каже, що Safari не дозволяє сайтам визначати, коли застосовано адаптивний темний режим, бо це додало б дані для фінґерпринтингу. JavaScript, що запитує CSS-кольори, отримує початкові авторські кольори, а зображення в canvas відтворюються у початковому вигляді. Розробники із запитаннями можуть звертатися на [email protected], а користувачі, які знайшли сайт, що працює не дуже добре, можуть надіслати звіт через Feedback Assistant.

Джерела: webkit.org