خصائص CSS لتحسين أداء العرض في المتصفح:
**will-change:** يُخبر المتصفح مسبقاً بالخصائص التي ستتغير، لتهيئة موارد GPU مقدماً. `will-change: transform, opacity;` ⚠️ استخدمه فقط عند وجود مشكلة أداء حقيقية — كثير منه يُسبب استهلاك ذاكرة.
**contain:** يُخبر المتصفح أن العنصر مُعزول عن بقية الصفحة، مما يُقلل عمليات إعادة الحساب. - `layout` — التغييرات الداخلية لا تؤثر على التخطيط الخارجي - `paint` — لا ترسم خارج حدود العنصر - `size` — الأبناء لا يؤثرون في حجم العنصر - `content` = layout + paint
**content-visibility:** يؤجل رسم العناصر البعيدة عن نافذة العرض. `content-visibility: auto;` — المتصفح يُقرر ماذا يرسم. `contain-intrinsic-size` — يُحدد الحجم الاحتياطي قبل الرسم لمنع القفز.
**@property:** لتعريف متغيرات CSS قابلة للتحريك مع نوع بيانات محدد (CSS Houdini).
| 1 | /* تحسين أداء الأنيميشن */ |
| 2 | .animated-card { |
| 3 | will-change: transform, opacity; |
| 4 | transition: transform 0.3s ease; |
| 5 | } |
| 6 | |
| 7 | /* تأجيل رسم البطاقات البعيدة */ |
| 8 | .article-card { |
| 9 | content-visibility: auto; |
| 10 | contain-intrinsic-size: 0 300px; /* ارتفاع احتياطي */ |
| 11 | } |
مثال 1: @property: متغير CSS قابل للأنيميشن
| 1 | /* تعريف متغير بنوع محدد */ |
| 2 | @property --gradient-angle { |
| 3 | syntax: '<angle>'; |
| 4 | initial-value: 0deg; |
| 5 | inherits: false; |
| 6 | } |
| 7 | |
| 8 | /* تحريك المتغير */ |
| 9 | @keyframes rotate-gradient { |
| 10 | to { --gradient-angle: 360deg; } |
| 11 | } |
| 12 | |
| 13 | .animated-border { |
| 14 | background: conic-gradient( |
| 15 | from var(--gradient-angle), |
| 16 | #3b82f6, #8b5cf6, #ec4899, #3b82f6 |
| 17 | ); |
| 18 | animation: rotate-gradient 3s linear infinite; |
| 19 | border-radius: 12px; |
| 20 | padding: 3px; |
| 21 | } |
| 22 | |
| 23 | .animated-border .inner { |
| 24 | background: white; |
| 25 | border-radius: 10px; |
| 26 | padding: 20px; |
| 27 | } |
مثال 2: contain لتحسين الأداء
| 1 | /* ويدجيت مُعزول */ |
| 2 | .widget { |
| 3 | contain: layout paint; |
| 4 | /* التغييرات الداخلية لا تُعيد حساب باقي الصفحة */ |
| 5 | } |
| 6 | |
| 7 | /* قائمة طويلة */ |
| 8 | .virtual-list-item { |
| 9 | content-visibility: auto; |
| 10 | contain-intrinsic-size: 0 64px; |
| 11 | } |