الخاصية will-change
الخاصية will-change في CSS تسمح للمطورين بأخبار المتصفحات ما هي التغييرات المتوقع إجراؤها على العنصر، لكي يتمكن المتصفح من ضبط تحسينات الأداء قبل حدوث التغيير، وهذه التحسينات ستزيد من استجابة الصفحة عبر القيام بالحسابات اللازمة قبل وقوع التغيير.
/* كلمات محجوزة */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /* <custom-ident> */
will-change: opacity; /* <custom-ident> */
will-change: left, top; /* <animateable-feature> */
/* القيم العامة */
will-change: inherit;
will-change: initial;
will-change: unset;
قد يصعب في بعض الأحيان استخدام هذه الخاصية، لذا هذه بعض الإرشادات العامة:
- لا تُطبِّق هذه الخاصية على عناصر كثيرة، فسيحاول المتصفح جاهدًا تحسين كل شيء، وبعض التحسينات التي ستُفعَّل عبر الخاصية
will-changeستستهلك الكثير من موارد الجهاز، وكثرة استخدام هذه الخاصية ستؤدي إلى إبطاء الصفحة أو استهلاك موارد كثيرة. - استخدم هذه الخاصية باعتدال، فالسلوك الافتراضي لتحسين الأداء الذي يتبعه المتصفح هو إزالة تحسينات الأداء في أقرب وقت والعودة إلى الحالة الطبيعة، لكن إضافة الخاصية
will-changeفي صفحة الأنماط يعني أنَّ العناصر تفصلها لحظات معدودة عن تغيير قيمة خاصياتها، لذا سيُبقي المتصفح على التحسينات لوقتٍ أطول، ولهذا السبب يُفضَّل تفعيل وتعطيل الخاصيةwill-changeباستخدام JavaScript قبل وبعد وقوع التغيير. - لا تُطبِّق هذه الخاصية لتحسين أداء الصفحات البطيئة، فإذا لم يكن أداء صفحتك جيدًا فلا تستعمل الخاصية
will-changeلتسريعها، فعليك أن تحاول التعامل مع مشاكل الأداء بطرائق أخرى، واستعمال الخاصيةwill-changeسيزيد الطين بلّةً إذ تؤدي إلى جعل المتصفح يحجز موارد كثيرة مما يبطِّئ الصفحة. - أعطِ هذه الخاصية وقتًا لتعمل، فهي تسمح للمطورين بإخبار المتصفحات عن الخاصيات التي ستتغير قيمتها قبل وقوع ذلك، فمن المهم إعطاء المتصفح بعض الوقت للقيام بالتحسينات اللازمة، لذا عليك أن تضبط الخاصية
will-changeقبل ذلك.
| القيمة الابتدائية | auto
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للحركة | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
أمثلة
المثال الآتي سيُضيف الخاصية will-change مباشرةً في صفحة الأنماط، مما يؤدي إلى زيادة استهلاك الذاكرة لوقتٍ أطول، ورأينا أنَّ علينا تفادي فعل ذلك:
.sidebar {
will-change: transform;
}
هذا مثالٌ آخر يوضح كيفية تطبيق الخاصية will-change عبر استخدام سكربت، وهذا ما يجب علينا فعله في أغلبية الحالات:
var el = document.getElementById('element');
// ضبط الخاصية عند مرور الفأرة فوق العنصر
el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);
function hintBrowser() {
// ما هي الخاصيات التي سيحاول المتصفح تحسينها
this.style.willChange = 'transform, opacity';
}
function removeHint() {
this.style.willChange = 'auto';
}
لكن قد يكون من الملائم تضمين الخاصية will-change في صفحة الأنماط إذا كان تطبيقك يمثِّل عرضًا تقديميًا أو معرض صور:
.slide {
will-change: transform;
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 36 | 36 | غير مدعومة | 24 | 9.1 |
البنية العامة
تقبل الخاصية will-change القيم التالية.
القيمة auto
لا تؤدي هذه الكلمة المحجوزة إلى أي أثر خاص، وسيُطبِّق المتصفح التحسينات التي يجريها عادةً.
القيمة scroll-position
تُشير إلى أنَّ المُطوِّر يتوقع تحريك أو تغيير موضع التمرير (scroll position) للعنصر في المستقبل القريب.
القيمة contents
تُشير إلى أنَّ المُطوِّر يتوقع تحريك أو تغيير شيءٍ ما في محتوى العنصر في المستقبل القريب.
القيمة <custom-ident>
تُشير إلى أنَّ المُطوِّر يتوقع تحريك أو تغيير الخاصية التي مُرِّرَ اسمها في المستقبل القريب، وإذا كانت الخاصية المُمرَّرة مختصرةً (shorthand) فستُشير إلى توقع تغيير أو تحريك جميع الخاصيات التي تختصرها.
البنية الرسمية
will-change: auto | <animateable-feature>#;
حيث:
<animateable-feature> = scroll-position | contents | <custom-ident>