الخلاصة

  • اقترحت أول مسودة علنية لـW3C في يونيو 2016 تسجيل خاصية مخصصة عبر JavaScript مع نوع وقيمة ابتدائية وسلوك توريث؛ واستخدم مثالها لوناً في تدرج متحرك.
  • أضافت مسودة 2019 قاعدة CSS المسماة @property. وشرحت مسودة 2024 فحص النوع عند حساب القيمة وأثر اشتراك المستند كله في معنى الاسم المسجل.

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

أول مسودة علنية بتاريخ 7 يونيو 2016 اقترحت تسجيل هذه المعلومات. وسّعت نظام متغيرات CSS بحيث يعلن المؤلف نوع القيمة وقيمتها الابتدائية وهل تنتقل إلى العناصر الأبناء. كانت الوسيلة آنذاك CSS.registerProperty() في JavaScript. سجّل المثال --stop-color بالنوع <color>، وبداية شفافة، وinherits: false، ثم بدّل قيمته عند مرور المؤشر. عندما يعلم المتصفح أنه يحسب ألواناً، يستطيع إيجاد الألوان الواقعة بين الأحمر والأخضر. الاسم وحده لم يعطِه تلك القدرة.

تابعت مسودة 9 نوفمبر 2017 تطوير التسجيل والحركة ذات النوع المعروف. بقيت طريقة التسجيل في النص المحفوظ من تلك المرحلة داخل JavaScript. قاعدة @property المألوفة اليوم جاءت لاحقاً. وهذا التسلسل مهم: بدأ العمل بسؤال عمّا ينبغي أن يعرفه المتصفح عن القيمة، ثم اتسع إلى سؤال عن مكان كتابة هذا الاتفاق في CSS نفسها.

في مسودة 25 أكتوبر 2019 صارت هناك بوابتان: CSS.registerProperty() في السكربت و@property في ورقة الأنماط. تستطيع القاعدة وصف syntax وinherits وinitial-value. حين يرى المطور --radius بجوار دائرة مرسومة، يستطيع أن يعرف في المكان نفسه أنه طول، يبدأ من الصفر، ولا ينتقل افتراضياً إلى الأبناء. أصبحت بطاقة التعريف بجوار الأداة التي تستخدمها بدلاً من أن تختبئ في ملف سكربت بعيد.

أبقت مسودة 13 أكتوبر 2020 الطريقتين وأمثلة الحركة. المكسب يظهر في كل إطار: اللون يمر بألوان أخرى، والطول يمر بأحجام أخرى. إذا سُجل --radius بالنوع <length>، يمكن للدائرة أن تكبر من عشرة بكسلات إلى خمسين عبر كل الأحجام الواقعة بينهما. صار لدى المتصفح مقدار يحسبه، لا ورقتان مكتوب عليهما «صغير» و«كبير».

تفصل مسودة 26 مارس 2024 شروط البطاقة. تحتاج قاعدة @property إلى syntax وinherits. وإذا حدّد النوع قيمة معينة بدلاً من الرمز العام *، تحتاج كذلك إلى initial-value صالح يمكن حسابه بصورة مستقلة. تجيب هذه الحقول عن ثلاثة أسئلة: ماذا تقبل الخاصية، من أين تبدأ، وهل يرثها الأبناء؟ إن غاب حقل مطلوب تُهمل قاعدة التسجيل كلها. لا يستطيع المتصفح قبول عقد نصفه فراغ ثم أداء حركة دقيقة باسمه.

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

أما الاسم المسجل فيتجاوز حدود المكون الصغير. تصف مسودة 2024 خريطة تسجيل مشتركة للمستند كله، بما في ذلك القواعد المكتوبة داخل Shadow DOM. بين قواعد @property الصالحة ذات الاسم الواحد تفوز الأخيرة في ترتيب أوراق الأنماط؛ ويسبق التسجيل بواسطة JavaScript هذه القواعد. قد يعدّ مكونان --radius ملكاً خاصاً لكل منهما، لكن المتصفح يحتاج معنى واحداً للاسم. يوضح النص سبب التوتر: يريد المكون مساحة محلية، وتريد الصفحة الخارجية إرسال قيمة يفهم نوعها الطرفان.

يضع سجل نشر W3C مراحل 2016 و2017 و2019 و2020 و2024 في ترتيبها. خرجت الخاصية من المقابلة ومعها النوع والبداية وقاعدة الوراثة. صار بوسع التدرج أن يمشي من الأحمر إلى الأخضر من دون أن يقفز فوق الطريق كله.