Számlálók, amelyek követik a sötét módot

A számláló egy kép valaki más oldalán. Ha az oldalnak van sötét módja, a kép erről nem tud: a szerveren rajzolták meg, jóval azelőtt, hogy a látogató rendszerbeállítása tényként létezett volna. A szokásos eredmény egy fehér jelvény a sötét oldalon, és úgy néz ki, mint egy lyuk.

Az itteni dizájnok közül tizenöt ennek ellenére megoldja. Nem úgy, hogy megkérdezi az oldalt, és nem is JavaScripttel — az egyáltalán nem vesz részt benne. A kép magától vált.

Hogyan

Az SVG nem kép, hanem dokumentum, egy dokumentum pedig stíluslapot is hordozhat. A szerver ezért kétszer rajzolja meg a dizájnt, világosban és sötétben, mindkettőt egy fájlba teszi, és hozzáad három sor CSS-t:

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

A böngésző a képen belül is alkalmazza ezt a médialekérdezést, akkor is, ha a kép egy másik domainről, egy egyszerű <img> elemmel töltődik be. Állítsa a rendszert sötétre, és a számláló követi — újratöltés nélkül, anélkül, hogy a körülötte lévő oldalnak bármi köze lenne hozzá.

Mibe kerül

Mindkét változat benne van a fájlban, így a fájl nagyjából kétszer akkora. Egy dizájnon mérve: normálisan 1 029 bájt, a sötét ikerpárral 2 041. Ez az őszinte ár, és ezért nem ez az alapértelmezés: beágyazásonként lehet kérni, nem kényszerítjük mindenkire.

Nincs második kérés és nincs második oda-vissza út. Egyetlen fájl érkezik, és a nem szükséges fele soha nem rajzolódik ki.

Csapda félúton

Az SVG-ben a színátmenetekre, szűrőkre és maszkokra azonosítóval (id) hivatkozunk. Egy dizájn mindkét változatát ugyanaz a kód állítja elő, így mindkettő ilyen nevű színátmeneteket hoz magával: g1, g2, és így tovább. Ha mindkettőt egy dokumentumba tesszük, egy azonosító második definíciója egyszerűen nem érvényesül — a sötét változat szó nélkül a világos változat színeivel jelenik meg.

Semmi sem ad hibát. A fájl érvényes. Csak éppen rosszul néz ki, méghozzá úgy, hogy könnyű a dizájnt hibáztatni az összeállítás helyett.

Ezért a két fél összeillesztése előtt a sötét változat minden azonosítóját előtaggal átnevezzük, és minden rá mutató url(#...) hivatkozást ennek megfelelően átírunk. Kis lépés, de ha kimarad, olyan hibát okoz, amelyet egy gyors pillantás nem magyaráz meg.

Amikor nem vállalja

Ha bármelyik fél hiányzik, ha bármelyikből nem jön létre <svg> elem, vagy ha a kettő bájtra azonos lesz — ami azt jelenti, hogy a dizájnnak nincs sötét változata —, akkor változatlanul a világos változat kerül vissza. Egy félig összerakott SVG rosszabb volna, mint a sötét mód teljes hiánya, és egy számláló, amely megjelenik, többet ér, mint egy számláló, amely okos.