Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété will-change

Description de la propriété will-change.

will-change prévient le navigateur que l'élément risque d'être modifié, soit son contenu, soit sa position, soit n'importe laquelle de ses propriétés. L'idée est que le navigateur puisse optimiser son traitement en fonction de cette modification prévue.

L'utilisation de cette propriété est délicate. Le mieux est de ne s'en servir que sur les pages qui présentent des lenteurs, et de tester si elle améliore effectivement les choses. En effet un usage trop intensif, ou inapproprié de will-change peut avoir l'effet inverse de celui recherché, c'est à dire une dégradation des performances.

De plus, la propriété peut avoir des effets de bord indésirables. En particulier elle peut changer l'ordre d'empilement des éléments, ce qui fait que des éléments qui étaient en dessous peuvent se retrouver au dessus.

Syntaxes pour will-change.

  • will-change: auto;

    Valeur par défaut. Aucune évolution n'est prévue pour cet élément : le navigateur applique son traitement habituel.

  • will-change: scroll-position;

    La position de l'élément est susceptible d'être modifiée ou animée.

  • will-change: contents;

    Le contenu de l'élément est susceptible de changer.

  • will-change: margin-left, width;

    Les propriétés énumérées sont susceptibles d'être modifiées ou animées.

  • will-change: initial;

    La valeur initiale est auto.

  • will-change: unset; will-change: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

Ce simulateur met en évidence un des effets secondaires de will-change : l'élément vert est normalement au dessus de l'élément bleu (il vient après dans le code HTML). will-change appliqué à l'élément bleu met ce dernier au premier plan, en vue d'une transformation future.

will-change :

Prise en charge par les navigateurs (compatibilité).

Afficher les versions antérieures   Afficher la version à venir