Le simple fait d’appliquer content-visibility: auto améliore les performances en évitant de rendre les éléments invisibles à l’écran.
Quand auto est défini sur un élément, layout, style et paint de la spécification CSS Containment sont appliqués, et lorsque cet élément sort de l’écran, size s’applique aussi.
→ Lorsque l’élément sort de l’écran, ses descendants ne sont plus dessinés du tout.
→ Lorsqu’il revient près de l’écran, size est retiré et le hit-test recommence.
Avec contain-intrinsic-size, il est possible de définir la taille à utiliser par défaut pour le rendu. Si elle n’est pas définie, la valeur est 0.
Si content-visibility: hidden est défini, rien n’est rendu, comme si l’élément était hors écran.
→ L’élément est masqué et l’état de rendu est conservé, mais si des changements ont eu lieu, le rendu sera appliqué lorsqu’il redeviendra visible.
→ display:none : masque l’élément et détruit son état de rendu. Autrement dit, lorsqu’il redevient visible, c’est comme s’il était redessiné depuis zéro.
→ visibility:hidden : masque l’élément tout en conservant son état de rendu. Il n’est pas réellement retiré du document, continue d’occuper sa place et peut même être cliqué. Il est caché, mais le rendu continue d’être effectué.
Aucun commentaire pour le moment.