Koyu moda uyum sağlayan sayaçlar

Sayaç, başka birinin sayfasındaki bir görseldir. O sayfanın bir koyu modu olduğunda görselin bundan haberi olmaz: ziyaretçinin sistem tercihi henüz bir olgu olarak ortada yokken, çok önceden sunucuda çizilmiştir. Olağan sonuç, koyu bir sayfada beyaz bir rozettir ve bu bir delik gibi görünür.

Buradaki tasarımlardan on beşi yine de bununla başa çıkıyor. Sayfaya sorarak değil, JavaScript ile de değil — işin içinde hiç JavaScript yok. Görsel kendiliğinden değişiyor.

Nasıl çalışıyor

SVG bir resim değil, bir belgedir ve bir belge bir stil sayfası taşıyabilir. Bu yüzden sunucu tasarımı açık ve koyu olmak üzere iki kez çizer, ikisini tek bir dosyaya koyar ve üç satır CSS ekler:

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

Tarayıcı bu medya sorgusunu, görsel başka bir alan adından sade bir <img> etiketiyle yüklense bile görselin içinde uygular. Sistemi koyu moda alın, sayaç da ona uyar — sayfa yeniden yüklenmeden ve çevresindeki sayfa hiç devreye girmeden.

Bedeli

Dosyada iki sürüm de bulunduğu için dosya yaklaşık iki kat büyüktür. Bir tasarımda ölçülen değerler: normalde 1.029 bayt, koyu ikiziyle 2.041 bayt. Dürüst bedel budur ve varsayılan olmamasının nedeni de bu: herkese dayatılmaz, her yerleştirme kodunda ayrıca istenir.

İkinci bir istek de ikinci bir gidiş dönüş de yoktur. Tek bir dosya gelir ve gerekmeyen yarısı hiç çizilmez.

Ortadaki tuzak

SVG'de gradyanlara, filtrelere ve maskelere id ile başvurulur. Bir tasarımın iki sürümü de aynı kodla üretildiği için ikisi de g1, g2… adlı gradyanlar getirir. İkisini tek bir belgeye koyduğunuzda, aynı id ile yapılan ikinci tanım basitçe uygulanmaz — koyu sürüm, sessizce açık sürümün renkleriyle çizilir.

Hiçbir hata oluşmaz. Dosya geçerlidir. Yalnızca yanlış görünür; üstelik bunun suçunu birleştirme işlemine değil, tasarıma yüklemek çok kolaydır.

Bu yüzden iki yarı birleştirilmeden önce koyu sürümdeki her id bir önekle yeniden adlandırılır ve bunlardan birine işaret eden her url(#...) başvurusu da buna uygun biçimde yeniden yazılır. Küçük bir adımdır, ama atlanırsa hızlı bir bakışın açıklayamayacağı bir hata ortaya çıkar.

Reddettiği durumlar

Yarılardan biri eksikse, ikisinden biri bir <svg> öğesi üretemezse ya da ikisi bayt bayt aynı çıkarsa — bu, tasarımın koyu bir çeşidi olmadığı anlamına gelir — açık sürüm değiştirilmeden döndürülür. Yarım birleştirilmiş bir SVG, hiç koyu mod olmamasından daha kötü olurdu; çizilebilen bir sayaç, zekice kurgulanmış bir sayaçtan daha değerlidir.