Un widget de compteur en temps réel, affiché dans la barre latérale d’un article, change de taille plusieurs fois par minute selon le nombre de caractères affichés. Chaque changement déclenche, par défaut, un recalcul de mise en page qui peut se propager à des portions de la page bien au-delà du widget lui-même, si le navigateur ne peut pas garantir que ce changement reste local.
La propriété CSS contain permet précisément de donner cette garantie au navigateur : elle indique qu’un élément et son contenu forment une unité isolée du reste de la page pour certains aspects du rendu, ce qui autorise le moteur à limiter la portée de ses recalculs à cet élément seul.
Les quatre valeurs principales
contain: layout;isole la mise en page de l’élément : ses dimensions internes n’affectent pas la position des éléments extérieurs, et réciproquement.contain: paint;indique que rien à l’intérieur de l’élément ne dépasse visuellement sa boîte, permettant au navigateur d’ignorer cet élément lors du calcul de zones à repeindre situées ailleurs.contain: size;fixe les dimensions de l’élément indépendamment de son contenu, ce qui nécessite presque toujours une taille explicite définie par ailleurs.contain: strict;combine layout, paint et size en une seule déclaration, la forme la plus stricte disponible.
Application concrète sur le widget de compteur
.widget-compteur {
contain: layout paint;
/* Le widget garde une largeur fixe, sa hauteur seule peut varier
sans que ce changement ne se propage au reste de la colonne */
}
Ce que le navigateur peut alors ignorer
Avec cette déclaration, quand le contenu du compteur change de taille, le moteur de rendu sait qu’il n’a pas besoin de revérifier la position des éléments situés en dehors de ce widget : la barre latérale complète, l’article principal, le pied de page. Sur une page avec plusieurs widgets dynamiques actifs simultanément, cette isolation réduit sensiblement le travail cumulé de recalcul de mise en page.
La différence avec un simple overflow hidden
Une déclaration overflow: hidden masque visuellement un débordement, mais ne donne aucune garantie au navigateur sur l’indépendance du calcul de mise en page : le moteur doit malgré tout vérifier si un changement interne affecte l’extérieur, avant de décider s’il doit tronquer l’affichage. contain: paint apporte une garantie structurelle plus forte, exploitable pour optimiser le calcul, pas seulement le rendu visuel final.
Où éviter cette propriété
Un élément dont le contenu doit naturellement influencer la mise en page de ses voisins, comme une carte de contenu dans une grille dont la hauteur régule celle des cartes adjacentes via un alignement CSS Grid, ne doit pas recevoir contain: layout : cela casserait précisément le comportement recherché d’alignement mutuel.
Mesurer l’effet avec les outils de développement
L’onglet Performance d’un navigateur basé sur Chromium permet de comparer la durée cumulée des événements Layout déclenchés pendant l’actualisation du compteur, avant et après l’ajout de la propriété. Sur ce projet, la durée cumulée sur une minute d’observation est passée d’environ 45 millisecondes à moins de 8 millisecondes après isolation du widget.
Repérer les bons candidats sur un thème existant
Plutôt que d’ajouter contain de façon systématique, la méthode retenue sur ce projet a consisté à lister d’abord tous les composants dont le contenu change après le chargement initial de la page sans intervention de l’utilisateur : compteurs, widgets météo, blocs de notification, carrousels à défilement automatique. Chacun de ces candidats a ensuite été testé individuellement avec contain: layout paint, en vérifiant dans les outils de développement que son comportement visuel restait identique après l’ajout de la propriété.
Un composant qui a nécessité un ajustement
Un widget d’alerte, censé grandir légèrement pour afficher un message plus long, se retrouvait tronqué visuellement après l’ajout de contain: paint, ce dernier empêchant tout débordement visuel hors de la boîte initiale du widget. Il a fallu retirer la composante paint pour ne garder que contain: layout sur ce composant précis, un rappel utile que chaque valeur de la propriété a un effet distinct qu’il faut vérifier séparément plutôt que d’appliquer strict par réflexe.
En résumé
La propriété contain donne au navigateur une information structurelle qu’il ne peut pas déduire seul : la garantie qu’un composant n’affecte pas le reste de la page. Utilisée avec discernement sur les composants réellement dynamiques et visuellement autonomes d’un thème WordPress, elle réduit le coût cumulé des recalculs de mise en page sans nécessiter la moindre ligne de JavaScript.
