Le CSS Working Group a récemment publié le CSS Containment Module Level 1 en tant que nouveau standard Web. Ce module CSS spécifie la propriété contain, qui peut être utilisé pour indiquer les éléments dont le sous-arbre est indépendant du reste de la page d'une certaine manière. Cette indépendance peut ensuite être utilisée par les navigateurs pour fournir des optimisations beaucoup plus fortes lors du rendu d'une page, tout en permettant aux auteurs d'être sûrs que leur page ne tombera pas accidentellement dans un chemin de code lent en raison d'un changement inoffensif.
L'objectif principal de la norme CSS Containment est d'améliorer les performances du rendu des pages Web en ignorant certains sous-arbres du document dans certaines parties du processus de rendu de page. Rachel Andrew, rédactrice en chef de Smashing Magazine, explique dans un article consacré au nouveau standard web :
Lorsque le contenu de notre box est modifié, le navigateur doit considérer que l'un des éléments peut avoir changé. Les navigateurs sont généralement assez bons pour gérer cela, car c'est une chose courante. Cela dit, en tant que développeur, vous saurez si chacun des composants est indépendant, et qu'un changement à l'un n'affecte pas les autres, donc ce serait bien si vous pouviez le faire savoir au navigateur via votre CSS. C'est ce que la propriété CSS
containvous donnent.
La spécification du module spécifie une propriété contain pour permettre une isolation prévisible d'un sous-arbre du reste de la page. La propriété contain indique qu'un élément et son contenu sont indépendants du reste de l'arborescence du document d'une manière qui est spécifiée en choisissant l'une des cinq valeurs : strict, content, size, layout et paint.
La valeur layout de la propriété contain indique que la disposition interne de l'élément n'est affectée par rien en dehors de l'élément et que le contenu de l'élément ne peut avoir aucun effet sur les ancêtres. La valeur paint indique que les descendants de l'élément ne peuvent pas être affichés en dehors de ses limites et que rien ne débordera de cet élément (ou s'il le fait, il ne sera pas visible). La valeur size signifie que les dimensions de l'élément sont indépendantes du contenu de l'élément. Cela signifie que la taille de la zone de l'élément peut être calculée indépendamment des enfants de l'élément. La valeur content est un raccourci pour contain: layout paint, tandis que la valeur strict est un raccourci pour layout paint size.
La propriété contain permet au navigateur de recalculer la disposition, le style, le rendu, la taille ou toute combinaison de ceux-ci pour une zone limitée du DOM et non pour la page entière, ce qui entraîne des avantages évidents de refusion et de rafraichissement, surtout dans les longues pages. Les gains de performances sont suffisamment importants pour que Bloomberg puisse prendre en charge les travaux d'Igalia sur la mise en œuvre du CSS Containment dans Chromium. Manuel Rego Casasnovas a fourni dans son discours à CSSconf EU 2019 un exemple d'interface utilisateur avec plus de 10 000 cellules dont le contenu du texte change constamment et qui pourraient être rendues 4x plus rapidement. Manuel Rego Casasnovas a expliqué la motivation de Bloomberg :
Bloomberg possède des interfaces utilisateur assez complexes et [elles tirent] des avantages de l'utilisation de CSS Containment pour certaines d'entre elles.
Paul Lewis a décrit aux développeurs soucieux des performances quelles parties du processus de rendu sont affectées par les modifications de la propriété DOM. Le site csstriggers rassemble en outre les propriétés qui déclenchent une mise en page, selon le navigateur utilisé.
CSS Containment est implémenté dans les navigateurs modernes à l'exception de Safari.