Contoare care urmează modul întunecat

Un contor este o imagine pe pagina altcuiva. Când acea pagină are un mod întunecat, imaginea nu știe: a fost desenată pe server, cu mult înainte ca preferința de sistem a vizitatorului să existe ca fapt. Rezultatul obișnuit este o insignă albă pe o pagină întunecată, care arată ca o gaură.

Cincisprezece dintre designurile de aici se descurcă totuși. Nu întrebând pagina și nu cu JavaScript — nu este implicat deloc. Imaginea comută singură.

Cum

SVG nu este o poză, este un document, iar un document poate conține o foaie de stil. Așa că serverul desenează designul de două ori, luminos și întunecat, le pune pe amândouă într-un singur fișier și adaugă trei rânduri de CSS:

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

Browserul aplică acea interogare media în interiorul imaginii, chiar și atunci când imaginea este încărcată printr-o simplă etichetă <img> de pe alt domeniu. Treceți sistemul pe modul întunecat și contorul îl urmează — fără reîncărcare, fără ca pagina din jurul lui să fie implicată în vreun fel.

Ce costă

Ambele versiuni se află în fișier, deci fișierul are cam dublul dimensiunii. Măsurat pe un design: 1.029 de octeți în mod normal, 2.041 cu geamănul întunecat. Acesta este prețul cinstit și motivul pentru care nu este varianta implicită: se cere pentru fiecare încorporare în parte, în loc să fie impus tuturor.

Nu există o a doua cerere și nici un al doilea drum dus-întors. Sosește un singur fișier, iar jumătatea care nu este necesară nu este desenată niciodată.

Capcana din mijloc

Gradienții, filtrele și măștile din SVG sunt referite prin id. Ambele versiuni ale unui design sunt generate de același cod, deci ambele aduc gradienți numiți g1, g2, și așa mai departe. Puneți-le pe amândouă într-un singur document și a doua definiție a unui id pur și simplu nu se aplică — versiunea întunecată se afișează pe tăcute în culorile versiunii luminoase.

Nu apare nicio eroare. Fișierul este valid. Doar arată greșit, într-un fel ușor de pus pe seama designului, nu a asamblării.

Așa că, înainte ca cele două jumătăți să fie unite, fiecare id din versiunea întunecată este redenumit cu un prefix, iar fiecare url(#...) care trimite la unul este rescris corespunzător. Este un pas mic, iar omiterea lui produce o eroare pe care o privire rapidă nu o poate explica.

Când refuză

Dacă oricare dintre jumătăți lipsește, dacă vreuna nu reușește să producă un element <svg> sau dacă cele două ies identice octet cu octet — ceea ce înseamnă că designul nu are o variantă întunecată — versiunea luminoasă este returnată neschimbată. O jumătate de SVG asamblat ar fi mai rea decât lipsa totală a modului întunecat, iar un contor care se desenează valorează mai mult decât un contor ingenios.