Gregory's Server
Наткнулся на пост от Kyle Simpson о том, как можно использовать клиентские подсказки для отображения темной или светлой темы. Но сожалению, этот способ сломали Веб-стандарты, возможно когда-нибудь это изменится и мы получим офигенную возможность для улучшения веба.
Сейчас самый популярный способ определения нужной темы — это "prefers-color-scheme". При первоначальном рендере браузер определяет предпочтения пользователя по световой теме на основе настроек браузера или ОС.
Однако этот метод имеет несколько проблем:
- Вы отправляете CSS для обеих тем, это может увеличить объём CSS и, следовательно, время загрузки страницы.
- При первоначальном рендере страница может кратковременно отобразиться в режиме по умолчанию, пока загружается CSS, что ухудшает UX.
Было бы здорово, если бы сервер мог определить тему пользователя при первом же запросе HTML. Для этого существуют клиентские подсказки (Client Hints), например, "Sec-CH-Prefers-Color-Scheme".
С помощью этого заголовка браузер может отправить серверу при первоначальном запросе значение "light" или "dark", и сервер использует это, чтобы вставить в HTML нужный CSS.
Преимущества такого подхода:
- Меньший объем данных при первоначальной загрузке, что улучшает быстродействие.
- Нет эффекта мерцания при загрузке, что улучшает UX.
Однако есть одна большая проблема. Те, кто занимаются стандартизацией, решили, что клиентские подсказки могут способствовать утечке конфиденциальных данных через "цифровой отпечаток". Поэтому они НЕ разрешают отправлять эти подсказки при первоначальном запросе HTML от браузера к серверу.
Вместо этого сервер должен отправить заголовок "Accept-CH", чтобы запросить у браузера эти подсказки. Если браузер поддерживает их и пользователь не отключил их в настройках, тогда браузер согласится отправить клиентские подсказки.
С помощью этого заголовка браузер может отправить серверу при первоначальном запросе значение "light" или "dark", и сервер использует это, чтобы вставить в HTML нужный CSS.
Преимущества такого подхода:
- Меньший объем данных при первоначальной загрузке, что улучшает быстродействие.
- Нет эффекта мерцания при загрузке, что улучшает UX.