**CSS Houdini** هو مجموعة APIs يُتيح للمطورين توسيع CSS وإنشاء خصائص مخصصة مع أنواع بيانات.
**@property:** يُعرِّف CSS Custom Property مع نوع بيانات وقيمة افتراضية، مما يُتيح تحريكها بـ animation وtransition.
```css @property --اسم { syntax: '<نوع>'; /* angle, color, length, number... */ initial-value: قيمة; inherits: true/false; } ```
**accent-color:** يُغيّر اللون المميز لعناصر النموذج الأصلية بشكل موحد: `accent-color: #3b82f6;` يؤثر في: checkbox، radio، progress، range.
**caret-color:** يُغيّر لون مؤشر الكتابة في حقول الإدخال. `caret-color: #3b82f6;`
**color-scheme:** يُخبر المتصفح بمخطط الألوان المدعوم: `color-scheme: light dark;` — يُفعّل الوضع الداكن لعناصر النظام.
**forced-colors:** للمستخدمين الذين يُفعّلون وضع التباين العالي في نظام التشغيل.
| 1 | /* لون موحد لعناصر النموذج */ |
| 2 | :root { accent-color: #3b82f6; } |
| 3 | |
| 4 | /* لون مؤشر الكتابة */ |
| 5 | input, textarea { caret-color: #3b82f6; } |
| 6 | |
| 7 | /* دعم الوضع الداكن لعناصر النظام */ |
| 8 | :root { color-scheme: light dark; } |
مثال 1: تخصيص عناصر النموذج بـ accent-color
| 1 | /* لون موحد لكل عناصر النموذج */ |
| 2 | :root { |
| 3 | accent-color: #8b5cf6; |
| 4 | color-scheme: light dark; |
| 5 | } |
| 6 | |
| 7 | /* تخصيص إضافي */ |
| 8 | input[type="range"] { |
| 9 | accent-color: #3b82f6; |
| 10 | width: 200px; |
| 11 | } |
| 12 | |
| 13 | input[type="checkbox"] { |
| 14 | width: 18px; |
| 15 | height: 18px; |
| 16 | accent-color: #10b981; |
| 17 | } |
| 18 | |
| 19 | input, textarea { |
| 20 | caret-color: #8b5cf6; |
| 21 | } |
مثال 2: @property لمتغير لون متحرك
| 1 | @property --hue { |
| 2 | syntax: '<number>'; |
| 3 | initial-value: 220; |
| 4 | inherits: false; |
| 5 | } |
| 6 | |
| 7 | @keyframes hue-spin { |
| 8 | to { --hue: 580; } /* 220 + 360 */ |
| 9 | } |
| 10 | |
| 11 | .rainbow-border { |
| 12 | border: 3px solid transparent; |
| 13 | animation: hue-spin 4s linear infinite; |
| 14 | background: |
| 15 | linear-gradient(white, white) padding-box, |
| 16 | hsl(var(--hue) 80% 60%) border-box; |
| 17 | } |