Numërues që ndjekin modalitetin e errët

Numëruesi është figurë në faqen e dikujt tjetër. Kur ajo faqe ka modalitet të errët, figura nuk e di: u vizatua në server shumë përpara se preferenca e sistemit të vizitorit të dihej si fakt. Zakonisht rezultati është një stemë e bardhë në faqe të errët dhe duket si vrimë.

Pesëmbëdhjetë dizajne këtu e trajtojnë gjithsesi. Jo duke pyetur faqen dhe jo me JavaScript — nuk përfshihet fare. Figura kalon vetë.

Si

SVG nuk është thjesht figurë, është dokument dhe dokumenti mund të përmbajë fletë stili. Prandaj serveri e vizaton dizajnin dy herë, në të çelët e të errët, i vendos në një skedar dhe shton tre rreshta CSS:

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

Shfletuesi e zbaton kushtin mediatik brenda figurës edhe kur ajo ngarkohet përmes një etikete të thjeshtë <img> nga një domen tjetër. Kalojeni sistemin në të errët dhe numëruesi e ndjek — pa ringarkim, pa u përfshirë fare faqja përreth.

Çfarë kushton

Të dy versionet janë në skedar, prandaj ai është afërsisht dyfish më i madh. E matur në një dizajn: 1 029 bajte normalisht, 2 041 me binjakun e errët. Ky është çmimi i ndershëm dhe arsyeja pse nuk është parazgjedhje: kërkohet për çdo integrim, nuk u imponohet të gjithëve.

Nuk ka kërkesë të dytë apo udhëtim të dytë vajtje-ardhje. Mbërrin një skedar dhe gjysma që nuk nevojitet nuk vizatohet.

Gracka në mes

Gradientët, filtrat dhe maskat në SVG referohen me id. Të dy versionet gjenerohen nga i njëjti kod, prandaj të dy sjellin gradientë të quajtur g1, g2, e kështu me radhë. Nëse vendosen në një dokument, përkufizimi i dytë i një id-je thjesht nuk zbatohet — versioni i errët vizatohet në heshtje me ngjyrat e të çelëtit.

Asgjë nuk jep gabim. Skedari është i vlefshëm. Thjesht duket gabim në një mënyrë që ia faturon lehtë dizajnit dhe jo bashkimit.

Prandaj përpara bashkimit, çdo id në versionin e errët riemërtohet me prefiks dhe çdo url(#...) që i referohet njërit rishkruhet që të përputhet. Është hap i vogël dhe kapërcimi i tij prodhon një gabim që një vështrim i shpejtë nuk e shpjegon.

Kur refuzon

Nëse mungon njëra gjysmë, nëse ndonjëra nuk prodhon element <svg> ose nëse të dyja dalin identike bajt për bajt — pra dizajni nuk ka variant të errët — kthehet versioni i çelët pa ndryshim. Gjysma e një SVG-je të montuar do të ishte më keq se mungesa e modalitetit të errët dhe numëruesi që vizaton vlen më shumë se ai që është i zgjuar.