Räknare som följer med i mörkt läge

En räknare är en bild på någon annans sida. När den sidan har ett mörkt läge vet bilden ingenting om det: den ritades på servern, långt innan besökarens systeminställning fanns som ett faktum. Resultatet blir oftast en vit bricka på en mörk sida, och den ser ut som ett hål.

Femton av designerna här klarar det ändå. Inte genom att fråga sidan, och inte med JavaScript — något sådant är inte inblandat. Bilden växlar av sig själv.

Hur det går till

SVG är ingen bild, det är ett dokument, och ett dokument kan bära en stilmall. Servern ritar därför designen två gånger, ljus och mörk, lägger båda i en och samma fil och lägger till tre rader CSS:

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

Webbläsaren tillämpar mediefrågan inuti bilden, även när bilden laddas med taggen <img> från en annan domän. Växla systemet till mörkt läge så följer räknaren med — utan omladdning och utan att sidan runt omkring är inblandad över huvud taget.

Vad det kostar

Båda versionerna finns i filen, så filen blir ungefär dubbelt så stor. Uppmätt på en design: 1 029 byte normalt, 2 041 med den mörka tvillingen. Det är det ärliga priset och skälet till att det inte är standard: det begärs per inbäddning i stället för att påtvingas alla.

Det blir ingen andra förfrågan och ingen extra tur och retur. En fil kommer fram, och den halva som inte behövs målas aldrig upp.

Fällan i mitten

Gradienter, filter och masker i SVG refereras via id. Båda versionerna av en design genereras av samma kod, så båda har med sig gradienter som heter g1, g2, och så vidare. Lägg båda i ett dokument, så gäller den andra definitionen av ett id helt enkelt inte — den mörka versionen ritas i tysthet i den ljusa versionens färger.

Inget felmeddelande. Filen är giltig. Den ser bara fel ut, på ett sätt som är lätt att skylla på designen snarare än på hopsättningen.

Innan de två halvorna sätts ihop får därför varje id i den mörka versionen ett prefix, och varje url(#...) som pekar på ett sådant id skrivs om så att det stämmer. Det är ett litet steg, och hoppar man över det får man en bugg som en snabb titt inte kan förklara.

När den vägrar

Om någon av halvorna saknas, om någon av dem inte ger något element av typen <svg> eller om de två blir byte för byte identiska — vilket betyder att designen saknar mörk variant — returneras den ljusa versionen oförändrad. En halvt hopsatt SVG vore sämre än inget mörkt läge alls, och en räknare som ritas är värd mer än en räknare som är finurlig.