Değişecek - CSS Hileleri | CSS Almanak 2025

CSS'deki will-changeözellik, tarayıcının hangi özelliklerin ve öğelerin tam olarak manipüle edilmek üzere olduğunu bilmesini sağlayarak animasyonları optimize eder ve potansiyel olarak söz konusu işlemin performansını artırır.

Bu özelliğin dört değeri vardır:

auto: standart tarayıcı optimizasyonları uygulanacaktır.
scroll-position: öğenin kaydırma konumunun yakın gelecekte bir ara canlandırılacağını, böylece tarayıcının bir öğenin kaydırma penceresinde görünmeyen içeriğe hazırlanacağını belirtir.
contents: bir elemanın içeriğinin değişmesi beklenir, bu yüzden tarayıcı bu elemanın içeriğini önbelleğe almayacaktır.
: transformveya uygulanmasını opacityistediğimiz gibi kullanıcı tanımlı mülkler will-change.

Tarayıcıya, transformmülkte aşağıdaki gibi bir değişikliğin gerçekleşmek üzere olduğunu bildirebiliriz :

.element ( will-change: transform; )

Veya birden çok değer bildirmek istiyorsak, aşağıdaki gibi virgülle ayrılmış bir liste kullanabiliriz:

.element ( will-change: transform, opacity; )

will-changeMülkün aşırı kullanılmaması önemlidir, çünkü bu aslında sayfanın daha az performanslı olmasına neden olabilir ( allbu özelliğin iyi bir nedenden ötürü bir değeri olmadığını unutmayın ). Sonuç olarak MDN, mülkün olmasını beklediğiniz sorunlar yerine mevcut performans sorunları için son çare olarak kullanılmasını önerir. Ve bunu kullanırken, will-changebir öğe veya özellik değişmeden hemen önce geçiş yapmanız ve ardından işlem bittikten kısa bir süre sonra tekrar kapatmanız önerilir .

Tarayıcı desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.