content-visibility

Definition

Propriété CSS qui permet au navigateur de sauter le rendu des éléments hors viewport. content-visibility: auto diffère le layout et le painting, améliorant drastiquement le temps de rendu initial.

Analogie

Comme un théâtre qui ne monte le décor d'une scène que quand les acteurs y arrivent.

Exemple de code

.article-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}
/* Le navigateur saute le rendu des sections
   hors viewport et réserve 500px d'espace */

Cas d'usage

Pages longues avec beaucoup de contenu (blog, feed, documentation) pour réduire le temps de rendu initial.

Anti-pattern

Termes lies