Résumé
La nouvelle propriété de confinement CSS permet aux développeurs de limiter le champ d'application des styles, de la mise en page et du rendu du navigateur.
![Structuration CSS. Avant: la mise en page prend 59,6 ms. Après: la mise en page prend 0,05 ms](https://developer.chrome.com/static/blog/css-containment/image/css-containment-before-dd44d7d4075ef.jpg?authuser=6&hl=fr)
Elle comporte quelques valeurs, ce qui rend sa syntaxe suivante:
contain: none | strict | content | [ size || layout || style || paint ]
Il est disponible à partir de la version 52 de Chrome et de la version 40 ou ultérieure (et la compatibilité publique avec Firefox). N'hésitez pas à l'essayer et à nous donner votre avis !
Propriété "contains"
Lors de la conception d'une application Web, voire d'un site complexe, l'une des principales difficultés liées aux performances consiste à limiter les effets des styles, de la mise en page et de la peinture. Souvent, l'intégralité du DOM est considérée comme "dans le champ d'application" du calcul. Cela peut signifier qu'essayer d'obtenir une "vue" autonome dans une application Web peut s'avérer délicat: les modifications apportées à une partie du DOM peuvent affecter d'autres parties, et il n'y a aucun moyen d'indiquer au navigateur ce qui doit être inclus ou hors du champ d'application.
Par exemple, supposons qu'une partie de votre DOM se présente comme suit:
<section class="view">
Home
</section>
<section class="view">
About
</section>
<section class="view">
Contact
</section>
Vous ajoutez ensuite un nouvel élément à une vue, ce qui déclenchera des styles, une mise en page et un effet de peinture:
<section class="view">
Home
</section>
<section class="view">
About
<div class="newly-added-element">Check me out!</div>
</section>
<section class="view">
Contact
</section>
Dans ce cas, cependant, l'ensemble du DOM est compris dans la portée, ce qui signifie que les calculs de style, de mise en page et de peinture devront prendre en compte tous les éléments, qu'ils aient été modifiés ou non. Plus le DOM est grand, plus il y a de travail de calcul à effectuer, ce qui signifie que votre application risque de ne plus répondre aux entrées utilisateur.
La bonne nouvelle, c'est que les navigateurs récents sont de plus en plus intelligents pour limiter automatiquement la portée des tâches de style, de mise en page et de peinture. Cela permet d'accélérer le processus sans que vous ayez à intervenir.
La meilleure nouvelle est cependant une nouvelle propriété CSS qui transmet les commandes de contrôle aux développeurs: le confinement.
La structuration CSS est une nouvelle propriété, avec le mot clé "contains", qui accepte quatre valeurs:
layout
paint
size
style
Chacune de ces valeurs vous permet de limiter le travail d'affichage que le navigateur doit effectuer. Examinons chacune d'elles plus en détail.
Mise en page (contain: layout)
Le confinement de la mise en page est probablement le plus grand avantage de celui-ci, avec contain: paint
.
La mise en page est normalement définie à l'échelle du document, ce qui la met à l'échelle proportionnellement à la taille de votre DOM. Par conséquent, si vous modifiez la propriété left
d'un élément, il peut être nécessaire de vérifier chaque élément du DOM.
En activant le confinement ici, vous pouvez potentiellement réduire le nombre d'éléments à une poignée d'éléments, plutôt que l'ensemble du document. Le navigateur ne sera ainsi pas obligé d'effectuer d'opérations inutiles et d'améliorer considérablement les performances.
Peinture (contient: peinture)
La peinture de cadrage est un autre avantage incroyablement utile du confinement. Le confinement de la peinture rogne essentiellement l'élément en question, mais il a également d'autres effets secondaires:
- Il agit comme un bloc conteneur pour les éléments positionnés de manière absolue et fixe. Cela signifie que tous les enfants sont positionnés en fonction de l'élément comportant
contain: paint
et non d'un autre élément parent comme, par exemple, le document. - Il s'agit d'un contexte d'empilement. Cela signifie que des éléments comme
z-index
auront un effet sur l'élément, et que les éléments enfants seront empilés en fonction du nouveau contexte. - Il s'agit d'un nouveau contexte de mise en forme. Cela signifie que si vous avez, par exemple, un élément au niveau du bloc avec un conteneur de peinture, il sera traité comme un nouvel environnement de mise en page indépendant. Cela signifie que la mise en page à l'extérieur de l'élément n'affecte généralement pas les enfants de l'élément conteneur.
Taille (contain: size)
contain: size
signifie que les enfants de l'élément n'affectent pas la taille du parent, et que les dimensions déduites ou déclarées seront utilisées. Par conséquent, si vous définissez contain: size
sans spécifier les dimensions de l'élément (soit directement, soit via des propriétés Flex), le rendu s'affiche à 0 x 0 px.
Le confinement de la taille est en fait une mesure à l'aide de ceintures et d'orifices permettant de s'assurer que vous n'utilisez pas d'éléments enfants pour la taille, mais en soi, il n'offre pas beaucoup d'avantages en termes de performances.
Style (contain: style)
Il peut être difficile de prévoir quels effets, sur l'arborescence DOM, de la modification des styles d'un élément seront remontés dans l'arborescence. C'est par exemple le cas des compteurs CSS, où le changement d'un compteur dans un élément enfant peut affecter les valeurs de compteur du même nom utilisées ailleurs dans le document. Lorsque contain: style
est défini, les modifications de style ne sont pas répercutées au-delà de l'élément conteneur.
Pour être tout à fait clair, ce que contain: style
ne fournit pas correspond à un style de champ d'application que vous obtiendrez avec Shadow DOM. Ici, la structuration consiste uniquement à limiter les parties de l'arborescence qui sont prises en compte lorsque des styles sont modifiés, pas lorsqu'ils sont déclarés.
Strict et confinement du contenu
Vous pouvez également combiner des mots clés, comme contain: layout paint
, qui n'appliqueront que ces comportements à un élément. Mais contient également deux valeurs supplémentaires:
contain: strict
signifie identique àcontain: size layout paint
contain: content
signifie identique àcontain: layout paint
L'utilisation d'un confinement strict est idéale lorsque vous connaissez à l'avance la taille de l'élément (ou que vous souhaitez réserver ses dimensions). Toutefois, n'oubliez pas que si vous déclarez un confinement strict sans dimensions, en raison du confinement de taille implicite, l'élément peut s'afficher sous la forme d'une case de 0 x 0 px.
Le confinement du contenu, en revanche, offre des améliorations significatives de la portée, mais ne nécessite pas que vous connaissiez ou spécifiez les dimensions de l’élément à l’avance.
Parmi les deux, contain: content
est celui que vous devriez utiliser par défaut. Vous devez considérer le confinement strict comme une sorte de porte de secours lorsque contain: content
n'est pas assez puissant pour vos besoins.
Dites-nous comment vous vous en sortez
La structuration est un excellent moyen de commencer à indiquer au navigateur ce que vous souhaitez isoler dans votre page. Essayez cette fonctionnalité dans Chrome 52 ou une version ultérieure, et donnez-nous votre avis !