Utiliser la compartimentation CSS

Exemple simple

Les pages web contiennent souvent plusieurs sections qui sont, logiquement, indpendantes les unes des autres. La compartimentation CSS permet de les traiter de manire rellement indpendante les unes des autres en ce qui concerne le rendu.

Par exemple, les blogs contiennent gnralement plusieurs articles, chacun contenant un titre et un contenu, comme dans le balisage ci-dessous.

<h1>Mon blog</h1>
<article>
  <h2>Titre d'un bel article</h2>
  <p>Contenu ici.</p>
</article>
<article>
  <h2>Titre d'un autre article</h2>
  <p>Autre contenu ici.</p>
</article>

Avec CSS, nous appliquons la proprit contain avec une valeur de content chaque article. La valeur content est un raccourci pour contain: layout paint style :

article {
  contain: content;
}

En toute logique, chaque article est indpendant des autres articles de la page. Cette information est gnralement connue, mme vidente, pour lela dveloppeureuse web qui cre la page. Cependant, les navigateurs ne connaissent pas l'intention derrire votre contenu et ne peuvent pas supposer qu'un article ou toute autre section de contenu est entirement autonome.

Cette proprit permet d'expliquer cela au navigateur et de lui donner l'autorisation explicite de procder des optimisations de performances. Elle indique au navigateur que la mise en page interne de l'lment est totalement distincte du reste de la page, et que tout ce qui concerne cet lment est affich l'intrieur de ses limites. Rien ne peut dborder de manire visible.

En dfinissant contain: content sur chaque lment <article>, nous avons indiqu ceci ; nous avons signal au navigateur que chaque article est indpendant. Le navigateur peut alors utiliser cette information pour dcider de la manire de rendre chaque lment <article> de contenu. Par exemple, il peut ne pas afficher les articles situs en dehors de la zone visible.

Lorsque des lments supplmentaires sont ajouts la fin de la page, le navigateur n'a pas besoin de recalculer la mise en page ni de rafrachir l'affichage du contenu prcdent ; il n'a pas non plus besoin d'intervenir sur une zone situe en dehors de la sous-arborescence de l'lment conteneur. En revanche, si les proprits du modle de bote sont dpendantes, le navigateur doit recalculer la mise en page et rafrachir l'affichage. Par exemple, si un <article> est mis en forme de telle sorte que sa taille dpende de son contenu (par exemple, avec height: auto), le navigateur doit alors tenir compte de ce changement de taille.

Concepts cls et terminologie

Valeurs de contain

Il existe quatre types de compartimentation : mise en page, peinture, taille et style. Utilisez la proprit contain pour dfinir le ou les types que vous souhaitez appliquer un lment en incluant n'importe quelle combinaison de ces types.

Compartimentation de la mise en page

article {
  contain: layout;
}

La mise en page est normalement limite l'ensemble du document, ce qui signifie que si vous dplacez un lment, l'ensemble du document doit tre trait comme si les choses pouvaient se dplacer n'importe o. En utilisant contain: layout, vous pouvez indiquer au navigateur qu'il n'a besoin de vrifier que cet lment tout ce qui se trouve l'intrieur de l'lment est limit cet lment et n'affecte pas le reste de la page, la bote contenant tablissant un contexte de formatage indpendant.

En outre :

• La mise en page avec float est effectue indpendamment l'intrieur de l'lment dfini.
• Les marges ne se chevauchent pas travers une limite de compartimentation de la mise en page.
• Le conteneur de mise en page est un bloc contenant pour les descendants positionns en absolute et fixed.
• La bote contenant cre un contexte d'empilement, donc z-index peut tre utilis.

Compartimentation de la peinture

article {
  contain: paint;
}

La compartimentation de la peinture dcoupe essentiellement la bote jusqu'au bord de remplissage de la bote principale. Il ne peut y avoir aucun dbordement visible. Les mmes notes supplmentaires sont vraies pour la compartimentation de la peinture que pour la compartimentation de la mise en page (voir ci-dessus).

Un autre avantage est que si l'lment avec la compartimentation applique est hors cran, le navigateur n'a pas besoin de peindre ses lments enfants ceux-ci sont galement hors cran, car ils sont compltement contenus par cette bote.

Compartimentation de la taille

article {
  contain: size;
}

La compartimentation de taille n'apporte pas grand-chose en termes d'optimisation des performances lorsqu'elle est utilise seule. Cependant, la compartimentation de taille signifie que la taille des enfants de l'lment dont la taille est compartimente ne peuvent pas influencer la taille de l'lment lui-mme sa taille est calcule comme s'il n'avait pas d'enfants.

Si vous dfinissez contain: size sur un lment, vous devez dfinir la taille de l'lment en utilisant contain-intrinsic-size, ou les proprits abrges contain-intrinsic-width et contain-intrinsic-height, dans cet ordre. Si aucune taille n'est dfinie, l'lment risque d'avoir une taille nulle dans la plupart des cas.

article {
  contain: size;
  contain-intrinsic-size: 100vw auto none;
}

Compartimentation de style

article {
  contain: style;
}

Malgr son nom, la compartimentation de style ne fournit pas de styles encapsuls comme vous l'obtenez avec le DOM d'ombre ou @scope. Le principal cas d'utilisation de la valeur style est de prvenir les situations o un compteur CSS peut tre modifi dans un lment, ce qui peut ensuite affecter le reste de l'arborescence.

Utiliser contain: style garantit que les proprits counter-increment et counter-set crent de nouveaux compteurs limits ce sous-arbre uniquement.

Vous pouvez inclure plus d'un type de compartimentation en incluant plusieurs valeurs spares par des espaces, comme contain: layout paint ou en utilisant l'une des deux valeurs spciales.

Valeurs spciales

Il existe deux valeurs spciales de contain qui sont des raccourcis pour les trois premiers ou les quatre types de compartimentation :

• content
• strict

Nous avons rencontr la premire dans l'exemple ci-dessus. L'utilisation de contain: content active la compartimentation layout, paint et style. Comme elle omet size, c'est une valeur sre appliquer largement.

La dclaration contain: strict, qui se comporte de la mme manire que la dclaration contain: size layout paint style (qui inclut quatre valeurs spares par des espaces), offre la compartimentation la plus complte. Il est plus risqu de l'utiliser, car elle applique la compartimentation size ; le risque existe qu'une bote puisse finir avec une taille nulle en raison d'une dpendance la taille de ses enfants.

Pour liminer ce risque, dfinissez toujours une taille lors de l'utilisation de strict :

article {
  contain: strict;
  contain-intrinsic-size: 80vw auto none;
}

L'exemple ci-dessus est quivalent  :

article {
  contain: size layout paint style;
  contain-intrinsic-size: 80vw auto none;
}

content-visibility

Lorsque vous avez beaucoup de contenu qui bnficie d'une compartimentation lourde et qui est souvent hors cran par exemple si tous vos articles de blog sont visibles sur les pages d'accueil du blog comme un blog dfilement infini content-visibility: auto peut tre utilis pour appliquer toutes les compartimentations en une seule fois.

La proprit content-visibility contrle si un lment rend ou non son contenu, tout en appliquant un ensemble solide de compartimentations, permettant aux agents utilisateurs de potentiellement omettre de grandes portions de travail de mise en page et de rendu jusqu' ce que cela devienne ncessaire. Elle permet l'agent utilisateur de sauter le travail de rendu d'un lment (y compris la mise en page et la peinture) jusqu' ce qu'il soit ncessaire ce qui rend le chargement initial de la page beaucoup plus rapide.

Ses valeurs possibles sont :

• visible : comportement par dfaut le contenu d'un lment est mis en page et affich normalement.
• hidden : l'lment ignore son contenu. Le contenu ignor n'est pas accessible aux fonctionnalits de l'agent utilisateur telles que la recherche dans la page, la navigation par ordre de tabulation, etc., et ne peut ni tre slectionn ni recevoir une slection.
• auto : l'lment active le confinement de mise en page, le confinement de style et le confinement de rendu, comme si la proprit contain: content tait dfinie. Si l'lment n'est pas pertinent pour l'utilisateurice, il ignore galement son contenu. Contrairement hidden, le contenu ignor reste accessible aux interactions de l'utilisateurice, pouvant toujours recevoir une slection, tre mis en vidence, figurer dans l'ordre de tabulation normal et tre recherch dans le contenu.

Pertinent pour l'utilisatrice et l'utilisateur

Les agents utilisateurs ont un concept de contenu pertinent pour l'utilisateurice (angl.). Un lment devient  pertinent pour l'utilisateurice  si l'une des conditions suivantes est remplie :

• L'lment apparat dans la zone d'affichage (viewport en anglais), ou dans une marge dfinie par l'agent utilisateur autour de la zone visible (50 % des dimensions de la zone visible, pour donner l'application le temps de se prparer lorsque la visibilit de l'lment change).
• L'lment ou son contenu reoit la slection.
• L'lment ou son contenu est slectionn, par exemple en faisant glisser le curseur de la souris sur le texte ou par une autre opration de surlignage.
• L'lment ou son contenu est plac dans la couche suprieure.

Lorsque content-visibility: auto est dfini, et que le navigateur dtermine que le contenu est pertinent pour l'utilisateurice, le navigateur rend ce contenu.

Ignorer le contenu

Lorsque vous dfinissez content-visibility: hidden sur un lment, vous indiquez au navigateur qu'il n'est pas pertinent pour l'utilisateurice, et que par consquent son contenu doit tre ignor (angl.) et ne doit pas tre rendu. Cela permet d'amliorer les performances.

Le navigateur ignore galement le contenu d'un lment lorsque content-visibility: auto est dfini dessus, et que le navigateur dtermine que son contenu n'est pas pertinent pour l'utilisateurice.

Lorsque un lment ignore son contenu :

• Il a la mise en page, le style, la peinture et la taille compartiments.
• Son contenu n'est pas peint, comme si visibility: hidden tait dfini dessus.
• Son contenu ne reoit pas d'vnements de pointeur, comme si pointer-events: none tait dfini dessus.

Cela se produit dans les deux cas mentionns ci-dessus, mais avec content-visibility: auto, le contenu peut tre recherch, recevoir la slection et passer d'un tat non pertinent pertinent. Ce n'est pas le cas pour content-visibility: hidden.

Voir aussi

• Le module de compartimentation CSS containment module
• Apprendre : optimisation des performances CSS
• Les requtes de conteneur CSS
• Une introduction la compartimentation CSS (angl.) sur Igalia.com (2019)
• L'vnement contentvisibilityautostatechange