Počítadlá, ktoré sledujú tmavý režim

Počítadlo je obrázok na cudzej stránke. Keď tá stránka má tmavý režim, obrázok o tom nevie: bol vykreslený na serveri dávno predtým, než preferencia systému návštevníka existovala ako fakt. Bežným výsledkom je biely odznak na tmavej stránke a vyzerá ako diera.

Pätnásť tunajších dizajnov to napriek tomu zvláda. Nie opýtaním sa stránky ani pomocou jazyka JavaScript — ten sa vôbec nepoužíva. Obrázok sa prepína sám.

Ako

SVG nie je obrázok, ale dokument a dokument môže niesť štýlopis. Server preto vykreslí dizajn dvakrát, svetlý a tmavý, vloží oba do jedného súboru a pridá tri riadky CSS:

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

Prehliadač uplatní toto mediálne pravidlo vnútri obrázka aj vtedy, keď je obrázok načítaný cez obyčajnú značku <img> z inej domény. Prepnite systém do tmavého režimu a počítadlo ho nasleduje — bez opätovného načítania a bez akejkoľvek účasti okolitej stránky.

Čo to stojí

Obe verzie sú v súbore, takže súbor je približne dvojnásobný. Zmerané na jednom dizajne: bežne 1 029 bajtov, 2 041 s tmavým dvojčaťom. To je poctivá cena a dôvod, prečo to nie je predvolené: žiada sa to pre konkrétne vloženie namiesto vnucovania všetkým.

Nie je tu druhá požiadavka ani druhá cesta tam a späť. Dorazí jeden súbor a polovica, ktorá nie je potrebná, sa nikdy nevykreslí.

Pasca uprostred

Na prechody, filtre a masky v SVG sa odkazuje pomocou id. Obe verzie dizajnu generuje ten istý kód, takže obe prinášajú prechody s názvami g1, g2, a podobne. Vložte obe do jedného dokumentu a druhá definícia id sa jednoducho neuplatní — tmavá verzia sa potichu vykreslí vo farbách svetlej verzie.

Nič nehlási chybu. Súbor je platný. Len vyzerá nesprávne spôsobom, ktorý sa ľahko pripíše dizajnu namiesto zostavenia.

Pred spojením oboch polovíc sa preto každé id v tmavej verzii premenuje s prefixom a každé url(#...) odkazujúce na niektoré z nich sa prepíše podľa neho. Je to malý krok a jeho vynechanie vytvára chybu, ktorú rýchly pohľad nevysvetlí.

Keď to odmietne

Ak niektorá polovica chýba, ak niektorá nevytvorí prvok <svg> alebo ak sú obe totožné bajt po bajte — čo znamená, že dizajn nemá tmavý variant — svetlá verzia sa vráti nezmenená. Napoly zostavené SVG by bolo horšie než vôbec žiadny tmavý režim a počítadlo, ktoré sa vykreslí, má väčšiu hodnotu než dôvtipné počítadlo.