{"id":"l-css-1-4","courseId":"css-mastery","lang":"ar","kind":"lesson","summary":"استخدم الـ custom properties كواجهة عامة للـ component، وافهم متى يفشل الاستبدال في var()، وسجّل خصائص ذات نوع محدّد بـ @property لتُفحص صحّتها وتتحرّك بسلاسة.","html":"

تأتي بطاقات الجلسات في Waypoint في أربعة مسارات (Design وPerformance وAccessibility وPlatform)، ولكل مسار لونه الخاص للحدّ الجانبي والشارة وحالة المرور فوق العنوان. النسخة الأولى كانت فيها قاعدة لكل مسار لكل عنصر: اثنتا عشرة قاعدة، وثالثة عشرة تُضاف كلما أضاف فريق التسويق مسارًا.

\n

الـ custom properties (الخصائص المخصّصة، أو «متغيّرات CSS») تحوّل ذلك إلى قاعدة واحدة لكل مسار، وبطاقة تقرأ لونها من مقبض واحد.

\n

component بمقبض واحد

\n
session-card.css
.session-card {\n  border-inline-start: 6px solid var(--track-color, #64748b);\n}\n.session-card .badge {\n  background: var(--track-color, #64748b);\n  color: white;\n}\n\n.track-design { --track-color: #db2777; }\n.track-perf   { --track-color: #0891b2; }
\n
HTML
<article class=\"session-card track-design\">…</article>
\n

أمران يجعلان هذا يعمل. الأول أن الـ custom properties موروثة: ضبط --track-color على البطاقة يجعلها مرئية للشارة داخلها. والثاني أن var() تُحسم عند العنصر الذي يستخدمها، في وقت حساب القيمة، فتستبدل كل بطاقة قيمتها الخاصة. والوسيط الثاني في var() هو القيمة البديلة، ولا تُستخدم إلا حين لا تكون الخاصية مضبوطة إطلاقًا.

\n

المكان الذي تضبط فيه الـ custom property مهم. الـ design tokens العامة (ألوان العلامة التجارية وسلّم المسافات ومجموعات الخطوط) مكانها :root، ليرثها كل عنصر. أما tokens الـ component مثل --track-color فمكانها الـ component نفسه، لتبقى محلية وتستطيع بطاقة أن تختلف عن جارتها. وتغيير خاصية على :root من JavaScript يجبر المتصفّح على إعادة حساب الأنماط للشجرة كلها التي تستخدمها، لذا فإن ما يتغيّر كثيرًا، مثل موضع المؤشّر، اضبطه على أصغر عنصر يحتاج إليه.

\n

فكّر في --track-color على أنها الواجهة العامة (API) للبطاقة. أيّ شخص يستطيع تغيير ثيم البطاقة من الخارج، في قالب CMS أو صفحة حملة لمرة واحدة، دون أن يعرف تفاصيلها الداخلية.

\n

حين يسوء الاستبدال

\n

الـ custom properties غير المسجّلة مجرد سلاسل من الرموز. المتصفّح لا يعرف أن --track-color يُفترض أن تكون لونًا، لذا فإن --track-color: 12px تصريح صالح تمامًا. المشكلة تظهر لاحقًا، حين تُسقط var() القيمة 12px في لون border-inline-start.

\n\n

وهكذا أطلقت Waypoint بطاقة بلا حدّ للمسار إطلاقًا وبشارة شفّافة: كتب الـ CMS القيمة 12px في حقل اللون، ولم يعترض شيء.

\n

سجّل الخاصية بـ @property

\n

تخبر @property المتصفّح بماهية الـ custom property:

\n
CSS
@property --track-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #64748b;\n}
\n

الآن تتغيّر ثلاثة أشياء:

\n
    \n
  1. فحص الصحة. القيمة التي ليست <color> تجعل الخاصية تسقط إلى بديل آمن: تتصرّف كأنها غير مضبوطة، فتأخذ الخاصية الموروثة قيمة العنصر الأب، وتنتهي السلسلة عند initial-value إن لم يضبطها أحد. فتحصل البطاقة المعطوبة على حدّ رمادي مائل إلى الزرقة بدل ألّا يكون لها حدّ.
    2. \n
  2. القيم المحسوبة لها نوع. getComputedStyle(card).getPropertyValue('--track-color') تُرجع rgb(219, 39, 119)، لا النص الخام الذي كتبته.
    3. \n
  3. الانتقال التدريجي. المتصفّح يعرف كيف يمزج بين لونين، فيمكن للخاصية أن تدخل في transition.
    4. \n
\n

يقبل الواصف syntax أنواعًا مثل <color> و<length> و<length-percentage> و<number> و<percentage> و<angle> و<time> و<integer>، إضافةً إلى "*" لأيّ شيء. وinitial-value مطلوبة ما لم تكن الصيغة "*"، ويجب أن تكون مستقلة حسابيًا: 10px مقبولة، أما 2em فلا.

\n

تحريك ما كان يقفز

\n

هذا تأثير مرور لا يمكن تحقيقه إلا بالتسجيل. الحافة العلوية للبطاقة تدرّج لوني زاويته custom property:

\n
CSS
@property --sheen-angle {\n  syntax: \"<angle>\";\n  inherits: false;\n  initial-value: 90deg;\n}\n\n.session-card {\n  background: linear-gradient(var(--sheen-angle), #f5f3ff, white 60%);\n  transition: --sheen-angle 400ms ease;\n}\n.session-card:hover {\n  --sheen-angle: 160deg;\n}
\n

دون @property لا يستطيع المتصفّح الانتقال تدريجيًا بين سلاسل رموز، فيقفز التدرّج من زاوية إلى أخرى. ومعها تتحرّك الزاوية بسلاسة. وinherits: false هي الصواب هنا: الزاوية تخصّ خلفية هذه البطاقة، ولا ينبغي أن تصل إلى العناصر الأبناء.

\n\n\n

دورك الآن

\n

يعيد التمرين إنتاج خطأ الـ CMS: قيمة --track-color في إحدى البطاقات هي 12px. سجّل الخاصية لتسقط القيم الخاطئة إلى الرمادي المائل إلى الزرقة (slate)، وتأكّد من أن ألوان المسارات الحقيقية ما زالت تظهر. ويواصل الدرس التالي العمل على هذه البطاقات بالـ nesting الأصلي و:has()، الذي يتيح للبطاقة أن تتفاعل مع ما بداخلها.

\n","toc":[{"id":"sec-1","text":"component بمقبض واحد","level":2},{"id":"sec-2","text":"حين يسوء الاستبدال","level":2},{"id":"sec-3","text":"سجّل الخاصية بـ @property","level":2},{"id":"sec-4","text":"تحريك ما كان يقفز","level":2},{"id":"sec-5","text":"دورك الآن","level":2}],"takeaways":["الـ custom properties موروثة افتراضيًا وتُستبدل حيث تُستخدم var()، لذا فإن ضبط واحدة منها على العنصر الأب يغيّر ثيم كل عنصر داخله يقرؤها.","إذا أنتجت var() قيمة غير صالحة تصبح الخاصية غير صالحة في وقت حساب القيمة؛ فيستخدم المتصفّح القيمة الموروثة أو الابتدائية، لا تصريحك السابق.","الـ custom property غير المسجّلة سلسلة من الرموز بلا نوع، لذا لا يستطيع المتصفّح فحص صحّتها ولا الانتقال بين قيمها تدريجيًا في transition.","@property تعطي الـ custom property صيغةً وقيمةً ابتدائية وعلامةً للوراثة، فتسقط القيم الخاطئة إلى بديل آمن، وتصبح الخاصية قابلة للتحريك."],"further":[{"title":"Using CSS custom properties (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties"},{"title":"@property (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@property"},{"title":"@property: giving superpowers to CSS variables (web.dev)","url":"https://web.dev/articles/at-property"}],"quiz":[{"q":"

ما الـ padding الذي يأخذه .card؟

\n
CSS
.card {\n  --space: blue;\n  padding: 24px;\n  padding: var(--space);\n}
\n","options":[{"text":"24px، لأن المتصفّح يرجع إلى التصريح الصالح السابق.","why":"الرجوع إلى التصريح السابق لا يحدث إلا مع القيم غير الصالحة وقت التحليل. أما var() فتُفحص لاحقًا، بعد أن يكون الـ cascade قد اختار التصريح الأخير."},{"text":"0، القيمة الابتدائية لـ padding.","why":"صحيح. padding: var(--space) يفوز في الـ cascade، ثم يتبيّن أنه غير صالح وقت حساب القيمة، فيرجع الـ padding إلى قيمته الابتدائية."},{"text":"يتجاهل المتصفّح --space ويستخدم القيمة البديلة في var()، وهي فارغة.","why":"لا توجد قيمة بديلة في var(--space)، والقيم البديلة لا تُستخدم إلا حين تكون الخاصية غير موجودة (غير صالحة حتمًا)، لا حين تكون قيمتها من نوع خاطئ."}],"answer":1},{"q":"

سجّلت @property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }. ما الذي يعطيك إيّاه هذا ولا تعطيه --angle غير المسجّلة؟

","options":[{"text":"القدرة على استخدام --angle داخل var().","why":"الـ custom properties غير المسجّلة تعمل داخل var() أيضًا؛ التسجيل ليس شرطًا للاستبدال."},{"text":"رسمًا أسرع، لأن الخصائص ذات النوع تتخطّى الـ cascade.","why":"الخصائص المسجّلة تمرّ عبر الـ cascade كغيرها؛ التسجيل يغيّر التحليل وفحص الصحة والانتقال التدريجي، لا تكلفة الـ cascade."},{"text":"transitions وحركات سلسة لـ --angle، لأن المتصفّح يعرف كيف ينتقل بين الزوايا تدريجيًا.","why":"صحيح. الخاصية بلا نوع لا تتغيّر إلا قفزًا؛ أما ذات النوع فتنتقل تدريجيًا، فيمكن لتدرّج لوني يقوده --angle أن يدور بسلاسة."}],"answer":2},{"q":"

أين يجب ضبط لون التمييز في بطاقة جلسة بحيث تستخدم بطاقة .track-design وكل ما بداخلها اللون الوردي؟

","options":[{"text":".track-design { --accent: #db2777; }، مع قواعد البطاقة التي تقرأ var(--accent).","why":"صحيح. الـ custom properties موروثة، فتلتقط البطاقة وعنوانها وشارتها وحدّها القيمة كلها."},{"text":":root { --accent: #db2777; } داخل media query خاص بـ .track-design.","why":"الـ media queries تختبر الـ viewport لا العنصر، و:root سيعيد تلوين كل بطاقة في الصفحة."},{"text":"على كل عنصر ابن بمفرده، لأن الـ custom properties لا تُورَث.","why":"الـ custom properties غير المسجّلة موروثة دائمًا، والمسجّلة موروثة ما لم تضبط inherits: false."}],"answer":0},{"q":"

خاصية مسجّلة لها syntax: '<color>'; inherits: true; initial-value: gray، وبطاقة تضبط --accent: 12px، والعنصر الأب لا يضبط --accent. ما القيمة التي تنتهي إليها البطاقة؟

","options":[{"text":"12px، لأن الـ custom properties تقبل أيّ رمز.","why":"هذا صحيح فقط في الخصائص غير المسجّلة. التسجيل يجعل المتصفّح يفحص القيمة مقابل <color>."},{"text":"gray، موروثة من العنصر الأب الذي يحمل القيمة الابتدائية.","why":"صحيح. القيمة غير الصالحة تجعل الخاصية تتصرّف كأنها غير مضبوطة، وهذا يعني في الخاصية الموروثة أن ترث، والعنصر الأب يحمل القيمة الابتدائية."},{"text":"لا شيء؛ تُسقَط قاعدة البطاقة كلها.","why":"التصريح غير الصالح وحده هو المتأثّر، ويتعافى المتصفّح بمعاملته كأنه غير مضبوط."}],"answer":1}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"
\n
\n

Designing in oklch()

\n Design\n
\n
\n

The Cost of a Frame

\n Performance\n
\n
\n

Lightning Talks

\n Misc\n
\n
","css":"/* Register --track-color here */\n\n.session-card {\n color: #1f2937;\n margin-block-end: 12px;\n padding: 12px 16px;\n border-inline-start: 6px solid var(--track-color, #64748b);\n}\n.session-card h2 { margin: 0 0 8px; font-size: 1.1rem; }\n.badge {\n display: inline-block;\n padding: 0.1em 0.6em;\n border-radius: 999px;\n color: white;\n background: var(--track-color, #64748b);\n}\n\n.track-design { --track-color: #db2777; }\n.track-perf { --track-color: #0891b2; }\n/* Written by the CMS: someone typed a size into the color field */\n.track-cms { --track-color: 12px; }\n"},"solution":{"html":"
\n
\n

Designing in oklch()

\n Design\n
\n
\n

The Cost of a Frame

\n Performance\n
\n
\n

Lightning Talks

\n Misc\n
\n
","css":"@property --track-color {\n syntax: \"\";\n inherits: true;\n initial-value: #64748b;\n}\n\n.session-card {\n color: #1f2937;\n margin-block-end: 12px;\n padding: 12px 16px;\n border-inline-start: 6px solid var(--track-color, #64748b);\n}\n.session-card h2 { margin: 0 0 8px; font-size: 1.1rem; }\n.badge {\n display: inline-block;\n padding: 0.1em 0.6em;\n border-radius: 999px;\n color: white;\n background: var(--track-color, #64748b);\n}\n\n.track-design { --track-color: #db2777; }\n.track-perf { --track-color: #0891b2; }\n/* Written by the CMS: someone typed a size into the color field */\n.track-cms { --track-color: 12px; }\n"},"checks":[{"id":"design-pink","test":"return style('#s1', 'border-left-color') === 'rgb(219, 39, 119)' && style('#s1 .badge', 'background-color') === 'rgb(219, 39, 119)';"},{"id":"perf-cyan","test":"return style('#s2', 'border-left-color') === 'rgb(8, 145, 178)';"},{"id":"bad-value-falls-back","test":"return style('#s3', 'border-left-color') === 'rgb(100, 116, 139)' && style('#s3 .badge', 'background-color') === 'rgb(100, 116, 139)';"},{"id":"registered-color","test":"return style('#s1', '--track-color').trim() === 'rgb(219, 39, 119)';"}],"title":"سجّل لون المسار","prompt":"

كتب الـ CMS القيمة 12px في --track-color الخاصة ببطاقة Lightning Talks، ففقد حدّها وشارتها لونهما. سجّل --track-color بـ @property على أنها <color> موروثة وقيمتها الابتدائية #64748b (رمادي مائل إلى الزرقة). يجب أن تحتفظ بطاقتا Design (#db2777) وPerformance (#0891b2) بلونيهما، وأن تسقط البطاقة المعطوبة إلى الرمادي المائل إلى الزرقة.

\n","hints":["تأخذ @property ثلاثة واصفات: syntax وinherits وinitial-value.","صيغة اللون هي السلسلة "<color>" مع علامتي التنصيص.","@property --track-color { syntax: “”; inherits: true; initial-value: #64748b; }"],"explanation":"

بمجرد تسجيل --track-color على أنها <color>، يفحص المتصفّح كل قيمة مقابل هذا النوع. القيمة 12px تفشل، فتتصرّف الخاصية في بطاقة Lightning Talks كأنها غير مضبوطة؛ ولأنها موروثة تأخذ قيمة العنصر الأب، والعنصر الأب لا يحمل إلا القيمة الابتدائية #64748b. ألوان المسارات الصالحة تمرّ وتُخزَّن الآن كألوان حقيقية، ولهذا تُرجع getComputedStyle القيمة rgb(219, 39, 119) بدل النص #db2777. ودون التسجيل كانت 12px تُستبدل داخل الخاصية المختصرة border-inline-start، فيصبح التصريح كله غير صالح في وقت حساب القيمة؛ وتعود كل خاصية فرعية إلى قيمتها الابتدائية، ومنها border-style: none، فيختفي الحدّ.

\n","checkLabels":{"design-pink":"بطاقة Design وردية","perf-cyan":"بطاقة Performance سماوية (cyan)","bad-value-falls-back":"البطاقة ذات القيمة الخاطئة تسقط إلى الرمادي المائل إلى الزرقة","registered-color":"–track-color مسجّلة على أنها لون"}},"words":701,"readMinutes":4}