متغيرات CSS: مذكرة اللون التي تنتشر

الخلاصة

بدأت أول مسودة علنية لمتغيرات CSS نشرها W3C في 10 أبريل 2012 من مشكلة تكرار القيم في ملفات التنسيق. كتبت الأسماء حينئذ مثل var-color واستدعتها بصيغة var(color)، مع احتفاظ الشلال بقرار القيمة التي تصل إلى كل عنصر.
استخدم النص المرشح في 3 ديسمبر 2015 --main-color وvar(--main-color). وفصل نص 16 يونيو 2022 المرشح القيم البديلة والمراجع الغائبة أو الدائرية. قد يصل اللون العام إلى الفروع، ثم يختار مكوّن محلي لوناً آخر.

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

وصفت أول مسودة عمل علنية لمتغيرات CSS نشرها W3C في 10 أبريل 2012 هذا العبء مباشرة. تتكرر الألوان والأرقام في ملفات تنسيق كبيرة، والبحث والاستبدال قد يغير ما لا يتبع الموضوع أو يترك نسخة في ملف آخر. سمحت المسودة للكاتب بتعريف خاصية تحمل اسماً من اختياره، ثم استخدام قيمتها داخل خصائص CSS المعتادة. وضع المثال لوناً عند جذر المستند وترك للأبناء تلقيه وفق قواعد الشلال. إنه توزيع إلى عناوين محددة، لا استبدال أعمى لكل حروف متشابهة.

لصيغة 2012 طابعها التاريخي. كتبت المسودة var-color وقرأت var(color). أظهرت قيمة عند الجذر، وأخرى على عنصر div، وثالثة في تنبيه. الاسم نفسه لا يلزم أن يعطي النتيجة نفسها في كل مكان؛ موقع العنصر والقاعدة المحلية يغيرانها. الإدارة ترسل مذكرة عامة، لكن القسم المحلي يستطيع تعليق تعديل على بابه. القدرة على التوريث والتجاوز المحلي جعلت الاسم أنفع من ورقة ألوان مركزية جامدة.

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

في توصية W3C المرشحة في 3 ديسمبر 2015 ظهرت الكتابة المعروفة الآن: --main-color لتعريف خاصية مخصصة، وvar(--main-color) لقراءتها. وضع المثال لوناً رئيسياً عند الجذر واستخدمه في قواعد أخرى وخلفية مشتقة منه. إذا تغيرت القيمة المسماة، تغيرت المواضع التي تعتمد عليها. استطاعت هيئة التحرير إرسال تعديل واحد بدلاً من تفتيش كل زر كما لو كان درجاً منفصلاً.

لكن الشلال يحدد المستلمين. إذا عرف مكوّن خاصيته --main-color بنفسه، تلقى أبناؤه القيمة المحلية. يبقى الموقع خمرياً وتصبح لوحة الاشتراك زرقاء مخضرة. أمام زر ظهر بلون مفاجئ، أول نتيجة بحث عن الاسم ليست الحكم النهائي. يجب معرفة أي تصريح فاز لهذا العنصر بعد التوريث وقواعد الاختيار والتجاوز. اسم واحد لا يلغي اختلاف العنوان الذي وصلت إليه الرسالة.

شرح النص المرشح الصادر عن W3C في 16 يونيو 2022 ما يفعله المكوّن حين لا تصله قيمة. في var(--header-color, blue) يقدم الوسيط الثاني لوناً بديلاً. يمكن لمكوّن قابل لإعادة الاستخدام أن يحمل لونه الافتراضي ويقبل في الوقت نفسه لون التطبيق المضيف. وتوضح المواصفة أن البديل قد يحتوي فواصل؛ كل ما يلي أول فاصلة فاصلة بين الوسيطين يدخل في القيمة البديلة. يحضر الضيف معطفه، لكنه يستطيع ارتداء معطف البيت.

يظهر غياب القيمة أو دوران المراجع وقت حساب النتيجة. قد يقرأ المتصفح تصريحاً فيه var() قبل أن يعرف ما سيضعه مكانها. إذا كانت القيمة المطلوبة غائبة أو غير صالحة ولم يتوفر بديل صالح، فلن ينتج التصريح المعتمد اللون المقصود. في مراجعة الصفحة، اسأل عن هذا الزر تحديداً: هل ورث لون الجذر، أم أخذ تجاوزاً محلياً، أم استخدم البديل، أم فقد تصريحاً؟ الجواب في النمط المحسوب للعنصر، وليس في أول سطر تعثر عليه أداة البحث.

تكشف الوثائق الثلاث تغير اللغة أيضاً. مسودة 2012 قالت var-color وvar(color)؛ نص 2015 المرشح استعمل --main-color وvar(--main-color)؛ ونص 2022 المرشح شرح البدائل والقيم غير الصالحة بمزيد من الدقة. صورة قديمة للكتابة لا تصلح وحدها دليلاً لصياغة جديدة. الفكرة التي بقيت هي تسمية القيمة، وتمريرها عبر شلال CSS، وترك المجال لفرع أن يرد بقيمته الخاصة.

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