La containpropriété en CSS indique au navigateur que l'élément et ses descendants sont considérés comme indépendants autant que possible de l'arborescence du document. Cela offre potentiellement des avantages en termes de performances avec des calculs de mise en page, de style, de peinture, de taille ou de toute combinaison pour une zone limitée du DOM et non pour la page entière.
La propriété a cinq valeurs standard et deux valeurs abrégées qui combinent des variations des valeurs standard. Chaque valeur a des avantages uniques et partagés en fonction du contexte de l'élément qui les applique.
L'utilisation typique de cette propriété est un élément qui contient du contenu d'un certain type. Considérez un widget qui rend les données entrantes qui modifient la disposition et les éléments visuels des descendants de l'élément. Un autre élément à prendre en compte est celui qui contient les résultats de données tierces, comme une bannière publicitaire, où les avantages du confinement nous permettent de dé-prioriser la peinture de certains contenus, comment gérer le dimensionnement du contenu reçu ou déterminer si le contenu devrait même être visible. Un site principalement statique, en revanche, ne bénéficiera que de peu d'avantages autres que la première mise en page et la peinture à l'écran lors du chargement de la page.
Syntaxe
div ( contain: none | strict | content | ( size || layout || style || paint ); )div ( contain: none; /* no containment on element */ contain: layout; /* influences how element relates to other elements in the document */ contain: paint; /* influences how element is painted to screen */ contain: size; /* influences how element affects size calculations for the page */ contain: style; /* is considered at-risk for removal from spec */
contain: content; /* combines layout and paint */ contain: strict; /* combines layout, paint, and size */ )Valeurs de la propriété
Disposition
La layoutvaleur de confinement informe le navigateur qu'aucun des descendants de l'élément n'affecte les autres éléments de la page et que ces autres éléments n'ont aucun effet sur les descendants de l'élément contenu. Cela permet au navigateur de réduire potentiellement le nombre de calculs nécessaires lors de la création de la mise en page
Un autre avantage est que si l'élément contenu est hors écran ou obscurci d'une manière ou d'une autre, le navigateur peut retarder ou décaler les calculs associés vers une priorité inférieure. Un exemple de ceci est un élément contenu non visible à la fin d'un élément de bloc et le début de cet élément de bloc est visible.
Un élément avec layoutconfinement devient une boîte contenant pour les descendants positionnés - tels que les éléments avec un positionnement absolu. L'élément reçoit un nouveau contexte d'empilement par rapport à la page et la z-indepropriété x peut être utilisée. Cependant, les propriétés directionnelles, telles que topou left, ne s'appliquent pas.
Même si les descendants de l'élément contenu ne peuvent pas influencer les autres éléments de la page, ils peuvent toujours influencer leur élément ancêtre contenu. Par exemple, un descendant peut entraîner le redimensionnement de l'élément contenu en réaction aux modifications. Dans ce cas, l'élément contenu peut encore potentiellement influencer d'autres éléments de la page mais les descendants ne seront toujours pas impliqués dans ces calculs.
La démo suivante fournit une explication simple de ce qui se passe lorsque le layoutconfinement est appliqué. Lorsque vous cliquez sur chacune des cases du haut, le confinement est appliqué et les flèches rouges changeront d'apparence. L'apparence des flèches rouges indique si les descendants de la boîte affectent les autres boîtes de la page lors des calculs de mise en page.
Peindre
La paintvaleur de confinement informe le navigateur qu'aucun des descendants de l'élément ne sera peint en dehors de la zone de bordure de l'élément. Si un élément descendant est positionné pour qu'une partie de sa boîte englobante soit coupée par l'élément contenu, border-boxcette partie ne doit pas être peinte. Si un élément descendant est positionné complètement à l'extérieur de l'élément contenu, border-boxil n'est pas du tout peint. Ceci est similaire à l'application overflow: hidden;à l'élément, mais sans les avantages de sauter ou de réduire les calculs nécessaires.
Un autre avantage est que si l'élément contenu n'est pas visible d'une manière ou d'une autre dans la fenêtre, il peut ignorer les descendants de l'élément lors des calculs de peinture. Un exemple de ceci est un élément placé hors de la page à gauche de la fenêtre. Si l'élément contenu n'est pas visible, c'est une garantie que son contenu ne sera pas visible. Par conséquent, ils ne sont pas tenus d'être impliqués dans les calculs de peinture.
Un élément avec le paintconfinement devient également une boîte contenant pour les descendants positionnés - comme les éléments avec un positionnement absolu. L'élément reçoit également un nouveau contexte d'empilement par rapport à la page et la z-indexpropriété peut être utilisée. Cependant, les propriétés directionnelles, telles que topou left, ne s'appliquent pas.
Un élément de défilement peut obtenir des avantages supplémentaires en plaçant ses descendants dans une nouvelle couche de peinture qui peut faciliter les performances de défilement. Normalement, les éléments de défilement peuvent provoquer des repeints constants lorsque les descendants apparaissent et disparaissent pendant le défilement. Un élément de défilement avec le contenu de peinture peut potentiellement ignorer cette repeinture constante des descendants de défilement.
La démo suivante fournit une explication simple de ce qui se passe lorsque le paintconfinement est appliqué. Cliquez n'importe où pour basculer le confinement sur la case violette. Lorsque le confinement est appliqué, certaines des boîtes vertes changent d'aspect. L'apparence des cases vertes montre comment elles sont peintes ou non.
Taille
La sizevaleur de confinement informe le navigateur qu'aucun des descendants ne doit être pris en compte lors des calculs de mise en page de la page. L'élément doit être contenue heightet les widthpropriétés appliqué, ou il va s'effondrer à zéro pixel carré. Seul l'élément lui-même doit être pris en compte pour les calculs de mise en page, car les descendants ne peuvent pas influencer la taille de l'élément. Les descendants de l'élément contenu sont complètement ignorés dans ces calculs; comme s'il n'avait aucun descendant.
Pour profiter pleinement de l'optimisation, le sizeconfinement est généralement appliqué avec d'autres types de confinement.
Un élément avec le sizeconfinement reçoit un nouveau contexte d'empilement par rapport à la page et la z-indexpropriété peut être utilisée. Cependant, les propriétés directionnelles, telles que topou left, ne s'appliquent pas.
La démo suivante fournit une explication simple de ce qui se passe lorsque le sizeconfinement est appliqué. Cliquez n'importe où pour basculer le confinement sur la case violette. Lorsque le confinement est appliqué, la boîte violette change de taille. Par défaut, la hauteur de la boîte violette est définie par ses enfants, mais avec confinement, la hauteur doit être définie. Une fois le confinement appliqué, les descendants ne sont plus impliqués dans les calculs de disposition liés à la taille.
Style
La stylevaleur de confinement informe le navigateur que certaines propriétés CSS, telles que les compteurs et les guillemets, seront étendues à l'élément contenu.
Les propriétés counter-incrementet counter-setdoivent être étendues à la sous-arborescence de l'élément contenu. S'il est étendu en dehors de l'élément contenu, un nouveau compteur est créé.
Les valeurs de propriété du contenu open-quote, close-quote, no-open-quoteet no-close-quotedoivent être étendus à sous-arbre de l'élément contenu.
Cette valeur de confinement est considérée comme à risque d'être supprimée de la spécification.
Teneur
La contentvaleur de confinement est une combinaison des valeurs de confinement de la mise en page et de la peinture. C'est l'équivalent d'appliquer le confinement de cette manière:
div ( contain: layout paint; )Tous les avantages potentiels décrits ci-dessus pour chaque valeur seraient alors disponibles pour l'élément contenu. Ce confinement serait considéré comme relativement sûr pour s'appliquer largement à plusieurs éléments sur la page.
Strict
La strictvaleur de confinement est une combinaison des layout, paintet des sizevaleurs de confinement. C'est l'équivalent d'appliquer le confinement de cette manière:
div ( contain: layout paint size; )Tous les avantages potentiels décrits ci-dessus pour chaque valeur seraient alors disponibles pour l'élément contenu.
En tant que «plus stricte» des valeurs de confinement, cette valeur doit être utilisée avec une attention particulière. Cela est dû aux exigences de dimension qu'il impose à l'élément contenu. Avec ces exigences, cette valeur de confinement offre les avantages de performance les plus potentiels du confinement.
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 52 | 69 | Non | 79 | Non |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 81 | Non |