Cambierà - Trucchi CSS | CSS Almanac 2025

La will-changeproprietà in CSS ottimizza le animazioni consentendo al browser di sapere quali proprietà ed elementi stanno per essere manipolati, aumentando potenzialmente le prestazioni di quella particolare operazione.

Questa proprietà ha quattro valori:

auto: verranno applicate le ottimizzazioni standard del browser.
scroll-position: indica che la posizione di scorrimento dell'elemento verrà animata in un prossimo futuro in modo che il browser si preparerà per il contenuto che non è visibile nella finestra di scorrimento di un elemento.
contents: il contenuto di un elemento dovrebbe cambiare, quindi il browser non memorizzerà nella cache il contenuto di questo elemento.
: qualsiasi proprietà definita dall'utente come transformo a opacitycui vogliamo will-changeessere applicati.

Possiamo informare il browser che sta per avvenire una modifica alla transformproprietà in questo modo:

.element ( will-change: transform; )

Oppure, se vogliamo dichiarare più valori, possiamo usare un elenco separato da virgole come:

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

È importante non abusare della will-changeproprietà, tuttavia, poiché potrebbe, in effetti, rendere la pagina meno performante (notare che non esiste un allvalore per questa proprietà per una buona ragione). Di conseguenza, MDN consiglia di utilizzare la proprietà come ultima risorsa per i problemi di prestazioni esistenti piuttosto che per quelli che si prevede possano verificarsi. E, quando lo si utilizza, si consiglia di attivare / disattivare will-changeappena prima che un elemento o una proprietà cambi e quindi disattivarlo di nuovo poco dopo il termine del processo.

Supporto del browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.