contain
Promet au navigateur que l’intérieur d’un élément n’affecte pas le reste de la page, afin qu’il puisse limiter le recalcul de la mise en page et le rendu.
- Valeur initiale
none- Héritée
- Non
- Animable
- non
- S’applique à
- tous les éléments, mais size, layout et paint n’ont aucun effet sur les éléments en ligne ordinaires ni sur les éléments internes de tableau (hors cellules)
- JavaScript
element.style.contain = "content"
Exemple
#.feed {
display: grid;
gap: 8px;
}
.feed-item {
contain: content;
padding: 10px 12px;
border-radius: 10px;
background: #18181b;
}<ul class="feed" style="margin: 0; padding: 0; list-style: none;">
<li class="feed-item"><strong>Léa</strong> a terminé le module Flexbox <small style="color: #a1a1aa;">· il y a 2 min</small></li>
<li class="feed-item"><strong>Lucas</strong> a déjà une série de 7 jours <small style="color: #a1a1aa;">· il y a 5 min</small></li>
<li class="feed-item"><strong>Emma</strong> a rejoint le monde Python <small style="color: #a1a1aa;">· il y a 12 min</small></li>
</ul>Chaque entrée est isolée du reste. Quand quelque chose change dans l’une d’elles sans affecter sa taille, par exemple un compteur de likes, le navigateur peut recalculer seulement cette entrée au lieu de toute la page. content n’exige pas de dimensions définies, donc les entrées continuent d’ajuster leur hauteur au contenu.
Définition et utilisation
#La propriété contain permet d’isoler un fragment de la page du reste. Vous déclarez que ce qui se passe à l’intérieur de l’élément n’affectera pas son environnement, et le navigateur peut alors recalculer et dessiner uniquement ce fragment. C’est utile pour les longues listes, les widgets et les panneaux qui changent souvent.
Les types de confinement peuvent se combiner : size (la taille de l’élément ne dépend pas du contenu), inline-size (la même chose, mais seulement pour la taille en ligne), layout (la disposition interne n’affecte pas l’extérieur), paint (les descendants ne se dessinent pas en dehors de l’élément) et style (les compteurs CSS modifiés à l’intérieur n’agissent pas à l’extérieur). Le raccourci content signifie layout paint style, et strict regroupe ces trois valeurs avec size.
Chaque type a des effets secondaires visibles. Avec layout et paint, l’élément devient un bloc englobant pour les descendants en position: absolute et fixed, et crée un nouveau contexte d’empilement. paint découpe en plus tout ce qui dépasse, comme overflow: clip. Avec size, un élément sans dimensions définies est mesuré comme s’il était vide, donc sa hauteur tombe à zéro.
Au quotidien, on définit rarement contain à la main, car d’autres propriétés le font souvent à votre place : container-type active le confinement de taille, et content-visibility: auto active le confinement et ignore en plus le rendu des fragments hors écran.
Syntaxe
#contain: none | strict | content | [ [ size | inline-size ] || layout || style || paint ];Valeurs
#- Aucun confinement. Le badge se positionne par rapport au cadre extérieur, car c’est lui qui a
position: relative. - La carte devient un bloc englobant, donc le badge se déplace vers son coin. Rien n’est découpé.
- Le badge se place lui aussi dans le coin de la carte, mais la partie qui dépasse de la carte est coupée.
- La hauteur de la carte cesse de dépendre du contenu. Sans taille définie, la carte s’effondre jusqu’à ne garder que son padding, et le texte déborde en dessous.
layout paint style
La combinaison la plus sûre : la carte isole la disposition et le rendu, mais ajuste toujours sa hauteur au contenu. Elle a le même rendu quepaint.size layout paint style
Tout à la fois. Une carte sans dimensions s’effondre, etpaintdécoupe tout le contenu, donc il ne reste qu’une barre vide. À n’utiliser qu’avec une taille fixée.
Valeurs en pratique
#none
position: relative..demo { contain: none; }layout
.demo { contain: layout; }paint
.demo { contain: paint; }size
.demo { contain: size; }content
paint..demo { contain: content; }strict
paint découpe tout le contenu, donc il ne reste qu’une barre vide. À n’utiliser qu’avec une taille fixée..demo { contain: strict; }Compatibilité des navigateurs
#Largement disponible · depuis 2022
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#contain: contentest un choix raisonnable pour des widgets indépendants et les éléments de longues listes. Il ne nécessite pas de dimensions et casse rarement quelque chose, tant que rien ne doit dépasser de l’élément.- N’utilisez
sizeetstrictqu’avec des dimensions fixées, ou aveccontain-intrinsic-size, sinon l’élément s’effondrera à zéro. - Si, après l’ajout de
contain, une fenêtre enposition: fixedne recouvre plus tout l’écran, c’est l’effet du nouveau bloc englobant. Déplacez la fenêtre en dehors de l’élément confiné, ou utilisez un<dialog>ouvert avec la méthodeshowModal().
Entrées associées
#- content-visibilityPermet au navigateur d’ignorer le rendu du contenu qui n’est pas visible, et accélère ainsi les pages longues.
- container-typeTransforme un élément en conteneur dont les règles @container peuvent interroger la taille. Couvre aussi container-name et le raccourci container.
- overflowDécide quoi faire du contenu qui ne tient pas dans un élément.
- positionChoisit la façon de positionner un élément : dans le flux, en relatif, en absolu, en fixe ou en collant.
- z-indexDétermine quel élément se trouve au-dessus quand des éléments se chevauchent.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.