CSS/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>

مصادر ومواصفات

• مسودة CSS Will Change Module Level 1.