Element : évènement contentvisibilityautostatechange
Baseline
2024
Nouvellement disponible
Depuis September 2024, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
L'évènement contentvisibilityautostatechange se déclenche sur tout élément ayant content-visibility: auto défini lorsqu'il commence ou cesse d'être pertinent pour l'utilisateur·ice et de passer son contenu.
Tant que l'élément n'est pas pertinent (entre les évènements de début et de fin), l'agent utilisateur ignore le rendu de l'élément, y compris la mise en page et le dessin, ce qui peut améliorer considérablement la vitesse de rendu de la page.
L'évènement contentvisibilityautostatechange fournit un moyen pour le code d'une application de démarrer ou d'arrêter également les processus de rendu (par exemple, le dessin sur un <canvas>) lorsqu'ils ne sont pas nécessaires, économisant ainsi de la puissance de traitement.
Notez que même lorsqu'ils sont cachés à la vue, le contenu des éléments reste sémantiquement pertinent (par exemple, pour les utilisateur·ice·s de technologies d'assistance), il ne faut donc pas utiliser ce signal pour ignorer des mises à jour DOM sémantiquement significatives.
Syntaxe
Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènement.
addEventListener("contentvisibilityautostatechange", (event) => { })
oncontentvisibilityautostatechange = (event) => { }
Type d'évènement
Un objet ContentVisibilityAutoStateChangeEvent.
Exemples
const elementCanvas = document.querySelector("canvas");
elementCanvas.addEventListener("contentvisibilityautostatechange", changerEtat);
elementCanvas.style.contentVisibility = "auto";
function changerEtat(event) {
if (event.skipped) {
arreterChangerCanvas(elementCanvas);
} else {
demarrerChangerCanvas(elementCanvas);
}
}
// Appeler ceci lorsque les mises à jour du canvas doivent commencer.
function demarrerChangerCanvas(canvas) {
// …
}
// Appeler ceci lorsque les mises à jour du canvas doivent s'arrêter.
function arreterChangerCanvas(canvas) {
// …
}
Spécifications
| Spécification |
|---|
| CSS Containment Module Level 2 # content-visibility-auto-state-change |
Compatibilité des navigateurs
Voir aussi
- L'interface
ContentVisibilityAutoStateChangeEvent - La compartimentation CSS
- La propriété
content-visibility - La propriété
contain