عدادات تتبع الوضع الداكن

العداد صورة على صفحة شخص آخر. وعندما يكون لتلك الصفحة وضع داكن، لا تعلم الصورة بذلك: فقد رُسمت على الخادم قبل وقت طويل من أن يصبح تفضيل نظام الزائر أمرًا واقعًا. والنتيجة المعتادة شارة بيضاء على صفحة داكنة، تبدو كأنها ثقب.

ومع ذلك يتعامل خمسة عشر تصميمًا هنا مع هذه المشكلة. لا بسؤال الصفحة، ولا باستخدام JavaScript — فلا وجود له هنا. الصورة تتبدّل من تلقاء نفسها.

كيف

ملف SVG ليس صورة، بل مستند، والمستند يمكن أن يحمل ورقة أنماط. لذا يرسم الخادم التصميم مرتين، فاتحًا وداكنًا، ويضع الاثنين في ملف واحد، ويضيف ثلاثة أسطر من CSS:

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

يطبّق المتصفح استعلام الوسائط هذا داخل الصورة، حتى عندما تُحمَّل الصورة عبر وسم <img> عادي من نطاق آخر. حوّل النظام إلى الوضع الداكن فيتبعه العداد — من دون إعادة تحميل، ومن دون أن يكون للصفحة المحيطة به أي دور.

ما تكلفته

النسختان كلتاهما في الملف، لذا يصبح حجمه نحو الضعف. وبالقياس على تصميم واحد: 1,029 بايت في الحالة العادية، و2,041 مع التوأم الداكن. هذا هو الثمن الحقيقي، وهو سبب عدم جعله الخيار الافتراضي: فهو يُطلب لكل تضمين على حدة بدلًا من أن يُفرض على الجميع.

لا يوجد طلب ثانٍ ولا رحلة ذهاب وإياب ثانية. يصل ملف واحد، والنصف غير المطلوب لا يُرسم أبدًا.

الفخ في المنتصف

يُشار إلى التدرجات والمرشحات والأقنعة في SVG بواسطة id. ونسختا التصميم يولّدهما الكود نفسه، لذا تأتي كلتاهما بتدرجات أسماؤها g1، g2، وهكذا. ضع النسختين في مستند واحد، وسيُهمَل التعريف الثاني لأي id ببساطة — فتُعرض النسخة الداكنة بصمت بألوان النسخة الفاتحة.

لا يظهر أي خطأ. والملف صالح. لكنه يبدو خاطئًا بطريقة يسهل معها إلقاء اللوم على التصميم بدلًا من عملية الدمج.

لذلك، قبل دمج النصفين، تُعاد تسمية كل id في النسخة الداكنة ببادئة، وتُعاد كتابة كل url(#...) يشير إلى أحدها بحيث يطابقه. إنها خطوة صغيرة، وتخطيها ينتج خللًا لا تستطيع نظرة سريعة تفسيره.

متى يرفض

إذا غاب أحد النصفين، أو لم يُنتج أيٌّ منهما العنصر <svg> المطلوب، أو إذا خرج النصفان متطابقين بايتًا ببايت — ما يعني أن التصميم لا نسخة داكنة له — تُعاد النسخة الفاتحة دون تغيير. فنصف ملف SVG مُجمَّع أسوأ من غياب الوضع الداكن كليًا، والعداد الذي يُرسَم أثمن من العداد البارع.