content-visibility
Permet au navigateur d’ignorer le rendu du contenu qui n’est pas visible, et accélère ainsi les pages longues.
- Valeur initiale
visible- Héritée
- Non
- Animable
- de façon abrupte, par ex. avec transition-behavior: allow-discrete
- S’applique à
- éléments pour lesquels le confinement de taille fonctionne (hors éléments en ligne ordinaires et éléments internes de tableau)
- JavaScript
element.style.contentVisibility = "auto"
Exemple
#.comment {
content-visibility: auto;
contain-intrinsic-size: auto 44px;
}<style>
.comment { padding: 10px 12px; border-radius: 12px; background: #18181b; font-size: 14px; }
.comment + .comment { margin-top: 8px; }
.comment strong { display: block; }
.comment p { margin: 0; color: #a1a1aa; }
</style>
<article class="comment"><strong>Léa</strong><p>Grid a enfin commencé à devenir clair pour moi.</p></article>
<article class="comment"><strong>Lucas</strong><p>Les zones de grille sont la meilleure partie du module.</p></article>
<article class="comment"><strong>Emma</strong><p>Ce serait bien d’avoir plus d’exemples avec auto-fill.</p></article>
<article class="comment"><strong>Hugo</strong><p>C’est fait, place à l’exercice de synthèse.</p></article>Dans un fil aussi court, l’effet ne se voit pas, car tous les commentaires tiennent à l’écran. Dans une longue discussion, le navigateur ne rend que les commentaires proches de la zone visible, et attribue aux autres 44px de hauteur de contenu, jusqu’à ce qu’il connaisse la vraie.
Définition et utilisation
#La propriété content-visibility décide si le navigateur doit même disposer et dessiner le contenu d’un élément. La valeur auto ignore le travail sur les fragments très éloignés de l’écran, et y revient quand l’utilisateur s’en approche en faisant défiler. Sur les pages longues avec de nombreuses sections, par exemple des articles, de la documentation ou des listes de commentaires, cela peut nettement raccourcir le premier rendu.
Un élément ignoré ne connaît pas sa propre hauteur, donc sans indication il ferait zéro pixel, et la barre de défilement sauterait pendant le défilement. C’est pourquoi auto se combine avec contain-intrinsic-size, qui fournit une taille de remplacement. L’écriture contain-intrinsic-size: auto 500px signifie : partez de 500px au départ, puis retenez la taille réelle après le premier rendu. Une seule valeur s’applique aux deux dimensions, deux valeurs désignent la largeur et la hauteur.
La valeur hidden ignore toujours le contenu, comme display: none sur les enfants, mais laisse l’élément lui-même avec sa bordure et son padding, et le navigateur peut conserver les résultats du rendu précédent, donc le réafficher est plus rapide. Elle convient aux cartes et panneaux que l’on masque et affiche souvent. Le contenu masqué par hidden n’est accessible ni aux lecteurs d’écran ni à la recherche sur la page, alors qu’avec auto il reste accessible.
La valeur auto active toujours le confinement de la disposition, du style et du rendu, comme contain: content. En pratique, les descendants qui dépassent de l’élément sont découpés, et l’élément devient un bloc englobant pour les enfants positionnés en absolu.
Syntaxe
#content-visibility: visible | hidden | auto;
contain-intrinsic-size: none | [ auto? <longueur> ]{1,2};Valeurs
#- Rendu normal. Le badge dépasse du coin de la carte. C’est la valeur par défaut.
- La carte est à l’écran, donc elle se rend normalement, mais regardez le coin : le badge a été coupé, car
autoactive toujours le confinement du rendu. Hors écran, le navigateur aurait ignoré tout le contenu. - Le contenu n’est pas rendu. Il ne reste que la carte avec son padding et sa bordure, qui n’a pas de hauteur sans contenu.
hidden + contain-intrinsic-size
avec une taille de remplacement
La taille de remplacement maintient la hauteur de la carte vide, ce qui évite que rien ne saute autour d’elle.
Valeurs en pratique
#visible
.demo { content-visibility: visible; }auto
auto active toujours le confinement du rendu. Hors écran, le navigateur aurait ignoré tout le contenu..demo { content-visibility: auto; }Compatibilité des navigateurs
#Nouveau dans les navigateurs · depuis 2024
Fonctionne dans les versions actuelles de tous les grands navigateurs. Les anciennes versions peuvent ne pas le prendre en charge.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Utilisez
content-visibility: autosur des blocs répétitifs au contenu conséquent, comme des sections d’article ou des commentaires dans un long fil, et non sur de petits éléments isolés. Le gain vient du fait d’ignorer plusieurs blocs à la fois. - Ajoutez toujours
contain-intrinsic-size: autoavec une taille estimée, pour que la barre de défilement ne saute pas. Le motautoretiendra la taille réelle après le premier rendu. - N’utilisez pas
autosur des éléments dont quelque chose doit dépasser, comme des menus déroulants ou des bulles. Le confinement du rendu les découperait.
Entrées associées
#- containPromet au navigateur que l’intérieur d’un élément n’affecte pas le reste de la page, afin qu’il puisse limiter le recalcul de la mise en page et le rendu.
- displayDétermine comment un élément se comporte dans la mise en page de la page et comment il organise ses enfants.
- visibilityMasque un élément, mais laisse l’espace vide qu’il occupait.
- container-typeTransforme un élément en conteneur dont les règles @container peuvent interroger la taille. Couvre aussi container-name et le raccourci container.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.