Confinement CSS dans Chrome 52

Paul Lewis

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.

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)

Remarque:Cette valeur active le confinement de la mise en page pour l'élément. Cela garantit que l'élément conteneur est totalement opaque pour la mise en page ; rien à l'extérieur ne peut affecter sa mise en page interne, et inversement. Spécifications de confinement

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)

Remarque:Cette valeur active le périmètre de peinture pour l'élément. Cela garantit que les descendants de l'élément conteneur ne s'affichent pas en dehors de ses limites. Ainsi, si un élément est hors écran ou n'est pas visible, il est également garanti que ses descendants ne soient pas visibles. Spécifications de confinement

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)

Remarque:La valeur active la structuration de taille pour l'élément. Cela garantit que l'élément conteneur peut être disposé sans qu'il soit nécessaire d'examiner ses descendants. Spécifications de confinement

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)

Remarque:Cette valeur active le confinement de style pour l'élément. Ainsi, pour les propriétés pouvant avoir des effets sur plus qu'un élément et ses descendants, ces effets n'échappent pas à l'élément conteneur. Spécifications de confinement

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 !

Liens utiles

• Spécification de confinement CSS
• Confinement de l'état de Chrome