Content-visibility - Propriété CSS
Résumé des caractéristiques de la propriété content-visibility
visible | auto | hiddenvisiblecontent-visibility ne peut pas être animée.Schéma de la syntaxe de content-visibility.
content-visibility.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Description de la propriété content-visibility.
La propriété content-visibility indique au navigateur si la mise en page d'un élément doit être calculée dès le chargement initial alors que cet élément
n'est pas encore visible dans la fenêtre d'affichage. L'objectif étant bien sûr d'optimiser les calculs dans le cas de pages très lourdes.
Si des éléments tels que des images, des vidéos, etc. sont des enfants de cet élément, les navigateurs peuvent même décider de ne même pas les charger.
Valeurs pour content-visibility.
- content-visibility: visible;
La propriété est sans effet. : la mise en page du contenu de l'élément est calculée même si ce dernier n'est pas visible.
- content-visibility: auto;
La mise en page du contenu de l'élément n'est pas réalisée mais le contenu participe aux recherches,
- content-visibility: initial; (
visible) content-visibility: inherit; content-visibility: revert; content-visibility: revertLayer; content-visibility: unset;Consultez les pages suivantes pour plus de détails :
initial,inherit,revert,revert-layer,unset.
Événement Javascript.
Lorsqu'un élément a sa propriété content-visibility fixée à auto, il déclenche un événement au moment où il devient visible.
Il déclenche également l'événement lorsqu'il devient invisible, ou lorsque sa propriété content-visibility passe à auto.
Cet événement s'appelle contentvisibilityautostatechange (Content Visibility Auto State Change).
const el = document.getElementById("...");
el.addEventListener("contentvisibilityautostatechange", stateChange);
function stateChange(event) {
alert(event.skipped);
}
Exemple interactif avec la propriété content-visibility.
Le simulateur vous permet surtout de tester l'événement contentvisibilityautostatechange, déclenché par l'élément qui contient le logo de
Firefox 
.
Cliquez tout d'abord sur auto et faites défiler le contenu vers le bas.
Lorsque la deuxième image apparaît l'élément est déclenché et la fonction doit afficher false, c'est à dire que l'image n'est plus cachée.
Elle affiche true dans le cas contraire, ou lorsque vous choisissez auto.
Compatibilité des navigateurs avec content-visibility.
Les navigateurs reconnaissent bien la propriété content-visibility et l'événement en rapport.
content-visibility qui évite le rendu des éléments qui ne sont pas dans le viewport.contentvisibilityautostatechangeevent (changement d'état d'un élément dont la propriété content-visibility est à auto).content-visibilitycontentvisibilityautostatechangeeventNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Samsung Internet
Firefox
Safari
Safari sur IOS
Chrome
Opéra
Edge
Chrome pour Androïd
Firefox pour Androïd
Androïd Brower
KaiOS Browser
Opéra mini
Histoire de la propriété content-visibility.
-
Module CSS - Confinement - Niveau 2
Concernantcontent-visibility. Introduction de la propriétécontent-visibility.
15 Octobre 2019Document de travail.
-
Module CSS - Confinement - Niveau 3
Concernantcontent-visibility. Pas de changement concernant la propriétécontent-visibility.21 Décembre 2021Document de travail.
Voir aussi, au sujet du confinement (containment).
La spécification CSS relative aux techniques de confinement est dénommée Module CSS - Confinement.
La propriété content-visibility est décrite dans ce module de la norme, ainsi que les termes suivants :