Brojači koji prate tamni način rada

Brojač je slika na tuđoj stranici. Kada ta stranica ima tamni način rada, slika to ne zna: iscrtana je na poslužitelju mnogo prije nego što je postavka sustava posjetitelja postojala kao činjenica. Uobičajen je rezultat bijela značka na tamnoj stranici, a izgleda kao rupa.

Petnaest ovdašnjih dizajna ipak se prilagođava. Bez upita stranici i bez jezika JavaScript — on uopće ne sudjeluje. Slika se sama prebacuje.

Kako

SVG nije slika, nego dokument, a dokument može sadržavati stilsku tablicu. Zato poslužitelj dvaput iscrtava dizajn, svijetli i tamni, stavlja oba u jednu datoteku i dodaje tri retka CSS-a:

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

Preglednik primjenjuje taj medijski upit unutar slike, čak i kada se slika učitava običnom oznakom <img> s druge domene. Prebacite sustav na tamni način i brojač ga prati — bez ponovnog učitavanja, bez ikakva sudjelovanja stranice koja ga okružuje.

Koliko to košta

Obje su verzije u datoteci, pa je ona otprilike dvostruko veća. Izmjereno na jednom dizajnu: 1.029 bajtova uobičajeno, 2.041 s tamnim dvojnikom. To je iskrena cijena i razlog zašto to nije zadano: traži se za pojedinu ugradnju umjesto da se nameće svima.

Nema drugog zahtjeva ni drugog povratnog putovanja. Stiže jedna datoteka, a polovica koja nije potrebna nikada se ne iscrtava.

Zamka usred svega

Gradijenti, filtri i maske u formatu SVG povezuju se putem identifikatora id. Obje verzije dizajna generira isti kod pa obje donose gradijente nazvane g1, g2, i tako dalje. Stavite oba u jedan dokument i druga se definicija identifikatora id jednostavno ne primjenjuje — tamna verzija neprimjetno se iscrtava bojama svijetle.

Nema pogreške. Datoteka je valjana. Samo izgleda pogrešno, na način zbog kojeg je lako okriviti dizajn umjesto sastavljanja.

Zato se prije spajanja dviju polovica svaki id u tamnoj verziji preimenuje uz prefiks, a svaki url(#...) koji na njega upućuje prepiše se da odgovara. To je mali korak, a preskakanjem nastaje pogreška koju brz pogled ne može objasniti.

Kada odbija

Ako bilo koja polovica nedostaje, ako bilo koja ne proizvede element <svg> ili ako obje ispadnu identične bajt po bajt — što znači da dizajn nema tamnu varijantu — svijetla verzija vraća se nepromijenjena. Napola sastavljen SVG bio bi gori od potpunog izostanka tamnog načina rada, a brojač koji se iscrtava vrijedi više od brojača koji je domišljat.