Akan berubah - Trik CSS | CSS Almanak 2024

The will-changeproperti di CSS mengoptimalkan animasi dengan membiarkan know peramban yang sifat dan unsur-unsur baru saja akan dimanipulasi, berpotensi meningkatkan kinerja bahwa operasi tertentu.

Properti ini memiliki empat nilai:

auto: pengoptimalan browser standar akan diterapkan.
scroll-position: menunjukkan bahwa posisi gulir elemen akan dianimasikan dalam waktu dekat sehingga browser akan mempersiapkan konten yang tidak terlihat di jendela gulir elemen.
contents: konten elemen diharapkan berubah sehingga browser tidak akan menyimpan konten elemen ini ke dalam cache.
: properti apa pun yang ditentukan pengguna seperti transformatau opacityyang ingin kita will-changeterapkan.

Kami dapat memberi tahu browser bahwa perubahan akan terjadi pada transformproperti seperti ini:

.element ( will-change: transform; )

Atau jika kita ingin mendeklarasikan beberapa nilai kita bisa menggunakan daftar yang dipisahkan koma seperti:

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

Namun, penting untuk tidak menggunakan will-changeproperti secara berlebihan karena pada kenyataannya dapat menyebabkan halaman menjadi kurang berkinerja (perhatikan bahwa tidak ada allnilai untuk properti ini karena alasan yang baik). Akibatnya, MDN merekomendasikan agar properti tersebut digunakan sebagai upaya terakhir untuk masalah kinerja yang ada daripada yang Anda antisipasi bisa terjadi. Dan, saat menggunakannya, disarankan untuk beralih will-changetepat sebelum elemen atau properti berubah dan kemudian menonaktifkannya lagi segera setelah proses selesai.

Dukungan browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.