Brojači koji prate tamni režim

Brojač je slika na tuđoj stranici. Kada ta stranica ima tamni režim, slika to ne zna: nacrtana je na serveru, mnogo pre nego što je sistemsko podešavanje posetioca postala činjenica. Uobičajeni rezultat je bela značka na tamnoj stranici, koja izgleda kao rupa.

Petnaest dizajna ovde to ipak rešava. Ne tako što pita stranicu i ne pomoću JavaScripta — njega tu nema. Slika se prebacuje sama.

Kako

SVG nije slika nego dokument, a dokument može da nosi stilski list. Zato server crta dizajn dvaput, svetao i taman, stavlja oba u jednu datoteku i dodaje tri reda CSS-a:

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

Pregledač primenjuje taj media query unutar slike, čak i kada se slika učitava običnom oznakom <img> sa drugog domena. Prebacite sistem na tamni režim i brojač ga prati — bez ponovnog učitavanja i bez ikakvog učešća stranice oko njega.

Šta to košta

Obe verzije su u datoteci, pa je ona otprilike dvostruko veća. Izmereno na jednom dizajnu: 1.029 bajtova uobičajeno, 2.041 sa tamnim blizancem. To je poštena cena i razlog zašto nije podrazumevano: traži se po ugradnji, a ne nameće svima.

Nema drugog zahteva ni drugog obilaska mreže. Stigne jedna datoteka, a polovina koja nije potrebna nikada se ne iscrta.

Zamka u sredini

Gradijenti, filteri i maske u SVG-u referenciraju se preko id-a. Obe verzije dizajna pravi isti kôd, pa obe donose gradijente pod imenima g1, g2, i tako dalje. Stavite oba u jedan dokument i druga definicija nekog id-a jednostavno ne važi — tamna verzija se tiho iscrtava u bojama svetle.

Nema nikakve greške. Datoteka je ispravna. Samo izgleda pogrešno, na način koji je lako pripisati dizajnu umesto sastavljanju.

Zato se pre spajanja dve polovine svaki id u tamnoj verziji preimenuje prefiksom, a svaki url(#...) koji pokazuje na neki od njih prepisuje se da se poklapa. To je mali korak, a ako se preskoči, nastaje greška koju brz pogled ne može da objasni.

Kada odbija

Ako bilo koja polovina nedostaje, ako bilo koja ne proizvede <svg> element, ili ako su obe bajt po bajt identične — što znači da dizajn nema tamnu varijantu — vraća se svetla verzija nepromenjena. Napola sastavljen SVG bio bi gori od potpuno odsutnog tamnog režima, a brojač koji se iscrtava vredi više od brojača koji je pametan.