عرض مصدر CSS/will-change

<noinclude>{{DISPLAYTITLE:الخاصية <code>will-change</code>}}</noinclude>
الخاصية <code>will-change</code> في CSS تسمح للمطورين بأخبار المتصفحات ما هي التغييرات المتوقع إجراؤها على العنصر، لكي يتمكن المتصفح من ضبط تحسينات الأداء قبل حدوث التغيير، وهذه التحسينات ستزيد من استجابة الصفحة عبر القيام بالحسابات اللازمة قبل وقوع التغيير.

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>auto</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للحركة
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.

|}<syntaxhighlight lang="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;

</syntaxhighlight>قد يصعب في بعض الأحيان استخدام هذه الخاصية، لذا هذه بعض الإرشادات العامة:
* لا تُطبِّق هذه الخاصية على عناصر كثيرة، فسيحاول المتصفح جاهدًا تحسين كل شيء، وبعض التحسينات التي ستُفعَّل عبر الخاصية <code>will-change</code> ستستهلك الكثير من موارد الجهاز، وكثرة استخدام هذه الخاصية ستؤدي إلى إبطاء الصفحة أو استهلاك موارد كثيرة.
* استخدم هذه الخاصية باعتدال، فالسلوك الافتراضي لتحسين الأداء الذي يتبعه المتصفح هو إزالة تحسينات الأداء في أقرب وقت والعودة إلى الحالة الطبيعة، لكن إضافة الخاصية <code>will-change</code> في صفحة الأنماط يعني أنَّ العناصر تفصلها لحظات معدودة عن تغيير قيمة خاصياتها، لذا سيُبقي المتصفح على التحسينات لوقتٍ أطول، ولهذا السبب يُفضَّل تفعيل وتعطيل الخاصية <code>will-change</code> باستخدام JavaScript قبل وبعد وقوع التغيير.
* لا تُطبِّق هذه الخاصية لتحسين أداء الصفحات البطيئة، فإذا لم يكن أداء صفحتك جيدًا فلا تستعمل الخاصية <code>will-change</code> لتسريعها، فعليك أن تحاول التعامل مع مشاكل الأداء بطرائق أخرى، واستعمال الخاصية <code>will-change</code> سيزيد الطين بلّةً إذ تؤدي إلى جعل المتصفح يحجز موارد كثيرة مما يبطِّئ الصفحة.
* أعطِ هذه الخاصية وقتًا لتعمل، فهي تسمح للمطورين بإخبار المتصفحات عن الخاصيات التي ستتغير قيمتها قبل وقوع ذلك، فمن المهم إعطاء المتصفح بعض الوقت للقيام بالتحسينات اللازمة، لذا عليك أن تضبط الخاصية <code>will-change</code> قبل ذلك.

== أمثلة ==
المثال الآتي سيُضيف الخاصية <code>will-change</code> مباشرةً في صفحة الأنماط، مما يؤدي إلى زيادة استهلاك الذاكرة لوقتٍ أطول، ورأينا أنَّ علينا تفادي فعل ذلك:<syntaxhighlight lang="css">
.sidebar {
  will-change: transform;
}
</syntaxhighlight>هذا مثالٌ آخر يوضح كيفية تطبيق الخاصية <code>will-change</code> عبر استخدام سكربت، وهذا ما يجب علينا فعله في أغلبية الحالات:<syntaxhighlight lang="javascript">
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';
}
</syntaxhighlight>لكن قد يكون من الملائم تضمين الخاصية <code>will-change</code> في صفحة الأنماط إذا كان تطبيقك يمثِّل عرضًا تقديميًا أو معرض صور:<syntaxhighlight lang="css">
.slide {
  will-change: transform;
}
</syntaxhighlight>

== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|36
|36
|غير مدعومة
|24
|9.1
|}
== البنية العامة ==
تقبل الخاصية <code>will-change</code> القيم التالية.

===  <code>auto</code> ===
لا تؤدي هذه الكلمة المحجوزة إلى أي أثر خاص، وسيُطبِّق المتصفح التحسينات التي يجريها عادةً.

===  <code>scroll-position</code> ===
تُشير إلى أنَّ المُطوِّر يتوقع تحريك أو تغيير موضع التمرير (scroll position) للعنصر في المستقبل القريب.

===  <code>contents</code> ===
تُشير إلى أنَّ المُطوِّر يتوقع تحريك أو تغيير شيءٍ ما في محتوى العنصر في المستقبل القريب.

===  <code>[[CSS/custom-ident|<custom-ident>]]</code> ===
تُشير إلى أنَّ المُطوِّر يتوقع تحريك أو تغيير الخاصية التي مُرِّرَ اسمها في المستقبل القريب، وإذا كانت الخاصية المُمرَّرة مختصرةً (shorthand) فستُشير إلى توقع تغيير أو تحريك جميع الخاصيات التي تختصرها.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
will-change: auto | <animateable-feature>#;
</syntaxhighlight>حيث:<syntaxhighlight lang="css">
<animateable-feature> = scroll-position | contents | <custom-ident>

</syntaxhighlight>

== مصادر ومواصفات ==
* مسودة [https://drafts.csswg.org/css-will-change/#will-change CSS Will Change Module Level 1]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]