Лічильник, який іде за сторінкою в темну тему

Лічильник — це картинка на чужій сторінці. Коли в цієї сторінки є темна тема, картинка про це не знає: її намалювали на сервері задовго до того, як системне налаштування відвідувача взагалі стало фактом. Білий значок на темній сторінці — звичний підсумок, і виглядає він як дірка.

П’ятнадцять тутешніх оформлень дають раду попри це. Не питаючи сторінку й без JavaScript — його тут немає зовсім. Картинка перемикається сама.

Як

SVG — не картинка, а документ, а документ може нести таблицю стилів. Тому сервер малює оформлення двічі, світлим і темним, кладе обидва в один файл і додає три рядки CSS:

.s4uD{display:none} @media(prefers-color-scheme:dark){.s4uL{display:none}.s4uD{display:inline}}

Браузер застосовує цей медіазапит усередині картинки, навіть коли картинку завантажено простим тегом <img> з іншого домену. Переведіть систему в темний режим — і лічильник піде слідом, без перезавантаження й без жодної участі навколишньої сторінки.

Чого це коштує

Обидві версії лежать у файлі, тож файл приблизно вдвічі більший. Виміряно на одному оформленні: 1 029 байтів звичайно, 2 041 з темним близнюком. Це чесна ціна й причина, чому це не усталене значення: про це просять під час вставки, а не нав’язують усім.

Другого запиту й другого обігу немає. Приходить один файл, а половина, яка не потрібна, ніколи не малюється.

Пастка посередині

Градієнти, фільтри й маски в SVG вказуються через id. Обидві версії оформлення народжує той самий код, отже обидві несуть градієнти з іменами g1, g2 і так далі. Покладіть обидва в один документ — і друге визначення id просто не діє: темна версія мовчки малюється кольорами світлої.

Ніщо не повідомляє про помилку. Файл правильний. Він лише виглядає хибно, і так, що це легко списати на оформлення, а не на збирання.

Тому перш ніж половини з’єднаються, кожен id темної версії перейменовують із приставкою, а кожен url(#...), що на нього вказує, переписують слідом. Малий крок, і пропустити його означає дістати дефект, якого побіжний погляд пояснити не може.

Коли він відмовляється

Якщо однієї з половин немає, якщо якась не дає елемента <svg>, або якщо обидві виходять однаковими байт у байт — тобто в оформлення немає темного варіанта — повертається світла версія без змін. Наполовину зібраний SVG був би гірший, ніж відсутність темної теми, а лічильник, який малюється, вартий більше, ніж лічильник, який розумний.