A propos de l'auteur

Rachel Andrew est non seulement rédactrice en chef du magazine Smashing, mais également développeur Web, écrivaine et conférencière. Elle est l'auteur de plusieurs livres, dont…
Plus à propos
Rachel
Andrew

Le CSS contenir La propriété vous donne un moyen d'expliquer votre mise en page au navigateur, afin d'optimiser les performances. Cependant, cela comporte certains effets secondaires en termes de mise en page.

Dans cet article, je vais présenter une spécification CSS qui vient de devenir une recommandation W3C. La spécification de confinement CSS définit une seule propriété, contenir, et il peut vous aider à expliquer au navigateur quelles parties de votre mise en page sont indépendantes et n'auront pas besoin d'être recalculées si une autre partie de la mise en page change.

Bien que cette propriété existe pour des raisons d'optimisation des performances, elle peut également affecter la mise en page de votre page. Par conséquent, dans cet article, je vais vous expliquer les différents types de confinement dont vous pouvez bénéficier, mais aussi les éléments dont vous devez faire attention si vous postulez. contenir aux éléments de votre site.

Le problème du recalcul de la mise en page

Si vous créez des pages Web simples qui n'ajoutent ni ne modifient dynamiquement des éléments après leur chargement à l'aide de JavaScript, vous n'avez pas à vous soucier du problème résolu par CSS Containment. Le navigateur n'a besoin de calculer votre mise en page qu'une seule fois, lorsque la page est chargée.

Lorsque le confinement devient utile, c'est lorsque vous souhaitez ajouter des éléments à votre page sans que l'utilisateur ait besoin de la recharger. Dans mon exemple, j'ai créé une grande liste d'événements. Si vous cliquez sur le bouton, le premier événement est modifié, un élément flottant est ajouté et le texte est modifié:

Une liste d'éléments avec un bouton pour modifier une partie du contenu du premier élément
(Voir l'exemple initial sur CodePen)

Lorsque le contenu de notre boîte est modifié, le navigateur doit considérer que l'un des éléments peut avoir changé. Les navigateurs sont généralement assez bons pour gérer cela, car c'est une chose courante. Cela dit, en tant que développeur, vous saurez si chacun des composants est indépendant, et qu'un changement à l'un n'affecte pas les autres, donc ce serait bien si vous pouviez le faire savoir au navigateur via votre CSS. C'est ce que le confinement et le CSS contenir propriété vous donne.

Comment le confinement aide-t-il?

Un document HTML est une structure arborescente que vous pouvez voir lors de l'inspection d'un élément avec DevTools. Dans mon exemple ci-dessus, j'identifie un élément que je souhaite modifier à l'aide de JavaScript, puis j'apporte des modifications aux éléments internes. (Cela signifie que je ne modifie que les éléments de la sous-arborescence pour cet élément de liste.)

DevTools avec l'élément de liste de l'élément sélectionné développé pour voir les éléments à l'intérieur
Inspection d'un élément de liste dans DevTools

Appliquer le contenir La propriété d'un élément indique au navigateur que les modifications sont étendues à la sous-arborescence de cet élément, afin que le navigateur puisse effectuer toutes les optimisations possibles – en sachant que rien d'autre en dehors de cet élément ne changera. Exactement ce que pourrait faire un navigateur particulier dépend du moteur. La propriété CSS vous donne simplement – en tant que développeur et expert de cette mise en page – la possibilité de le faire savoir.

Dans de nombreux cas, vous serez sûr d'aller de l'avant et de commencer à utiliser le contenir propriété, cependant, les différentes valeurs s'accompagnent d'effets secondaires potentiels qui méritent d'être compris avant d'ajouter la propriété aux éléments de votre site.

Utilisation du confinement

le contenir La propriété peut définir trois types de confinement différents:

Remarque: Il y a un style dans la spécification de niveau 2. Il a été supprimé du niveau 1, n'apparaît donc pas dans la recommandation et n'est pas implémenté dans Firefox.

Disposition

Le confinement de la mise en page apporte les plus grands avantages. Pour activer le confinement de la mise en page, utilisez l'extrait de code suivant:

.article {
  contenir: mise en page;
}

Lorsque le confinement de la disposition est activé, le navigateur sait que rien en dehors de l'élément ne peut affecter la disposition interne, et rien de l'intérieur de l'élément ne peut changer quoi que ce soit sur la disposition des choses en dehors de lui. Cela signifie qu'il peut effectuer toutes les optimisations possibles pour ce scénario.

Quelques choses supplémentaires se produisent lorsque le confinement de la mise en page est activé. Ce sont toutes des choses qui garantissent que cette boîte et son contenu sont indépendants du reste de l'arborescence.

La boîte établit un contexte de formatage indépendant. Cela garantit que le contenu de la boîte reste dans la boîte – en particulier les flotteurs seront contenus et les marges ne s'effondreront pas à travers la boîte. C'est le même comportement que nous activons lorsque nous utilisons affichage: flow-root comme expliqué dans mon article «Comprendre la disposition CSS et le contexte de mise en forme des blocs». Si un flotteur pouvait sortir de votre boîte et faire couler le texte suivant autour du flotteur, ce serait une situation où l'élément était changer la disposition des choses à l'extérieur, ce qui en fait un mauvais candidat pour le confinement.

La boîte contenant agit comme le bloc contenant pour tous les descendants à position absolue ou fixe. Cela signifie qu'il agira comme si vous aviez utilisé position: relative sur la case que vous avez appliquée contenir: mise en page.

La boîte crée également un contexte d'empilement. Donc z-index fonctionnera sur cet élément, ses enfants seront empilés en fonction de ce nouveau contexte.

Si nous regardons l'exemple, cette fois avec contenir: mise en page, vous pouvez voir que lorsque l'élément flottant est introduit, il ne dépasse plus le bas de la boîte. Il s'agit de notre nouveau Contexte de mise en forme de blocs en action, contenant le flottant.

Une liste d'éléments, un élément flottant est contenu à l'intérieur des limites de la boîte parent
En utilisant contain: layout le float est contenu (Voir l'exemple de confinement de la disposition sur CodePen)

Peindre

Pour activer le confinement de la peinture, utilisez ce qui suit:

.article {
  contenir: peinture;
}

Lorsque le confinement de la peinture est activé, les mêmes effets secondaires que ceux observés avec le confinement de la mise en page se produisent: la boîte contenant devient un contexte de mise en forme indépendant, un bloc contenant des éléments positionnés et établit un contexte d'empilement.

Le confinement de la peinture indique au navigateur que les éléments à l'intérieur du bloc conteneur ne seront pas visibles en dehors des limites de cette zone. Le contenu sera essentiellement coupé dans la boîte.

Nous pouvons voir cela se produire avec un exemple simple. Même si nous donnons une hauteur à notre carte, l'article flotté sort toujours du fond de la boîte, car le flotteur est retiré du flux.

Une boîte flottante poussant le fond d'une boîte contenant
Le flotteur n'est pas contenu par l'élément de liste

Le contenant de peinture étant activé, l'élément flottant est maintenant coupé à la taille de la boîte. Rien ne peut être peint en dehors des limites de l'élément avec contenir: peinture appliqué.

Une boîte avec une boîte flottante à l'intérieur qui a été coupée là où elle s'échappe de la boîte
Le contenu de la boîte est coupé à la hauteur de la boîte (Voir l'exemple de peinture sur CodePen)

Taille

Le confinement de la taille est la valeur la plus susceptible de vous poser un problème si vous n'êtes pas pleinement conscient de son fonctionnement. Pour appliquer un confinement de taille, utilisez:

.article {
  contenir: taille;
}

Si vous utilisez le confinement de la taille, vous dites au navigateur que vous connaissez la taille de la boîte et que cela ne changera pas. Cela signifie que si vous avez une boîte qui est dimensionnée automatiquement dans la dimension de bloc, elle sera traitée comme si le contenu n'a pas de taille, par conséquent la boîte se réduira comme si elle n'avait pas de contenu.

Dans l'exemple ci-dessous, je n'ai pas donné le li une hauteur; ils ont aussi contenir: taille appliqué. Vous pouvez voir que tous les articles se sont effondrés comme s'ils n'avaient aucun contenu, ce qui en fait une liste très particulière!

Une liste d'éléments avec un bouton pour modifier une partie du contenu du premier élément
(Voir l'exemple de taille sur CodePen)

Si vous donnez une hauteur aux boîtes, la hauteur sera respectée lorsque contenir: taille est utilisé. Seul, le confinement de la taille ne créera pas un nouveau contexte de mise en forme et ne contient donc pas de flottants et de marges comme le fera la disposition et le confinement de la peinture. Il est moins probable que vous l'utilisiez seul; au lieu de cela, il est très probable que vous l'appliquiez avec d'autres valeurs de contenir pour être en mesure d'obtenir le confinement le plus possible.

Valeurs abrégées

Dans la plupart des cas, vous pouvez utiliser l'une des deux valeurs abrégées pour tirer le meilleur parti du confinement. Pour activer la disposition et le confinement de la peinture, utilisez contenir: contenu;, et pour activer tout confinement possible (en gardant à l'esprit que les articles qui n'ont pas de taille s'effondreront alors), utilisez contenir: strict.

La spécification dit:

"contenir: contenu est raisonnablement «sûr» à appliquer largement; ses effets sont assez mineurs dans la pratique, et la plupart des contenus ne vont pas à l'encontre de ses restrictions. Cependant, comme il n'applique pas la limitation de la taille, l'élément peut toujours répondre à la taille de son contenu, ce qui peut entraîner une invalidation de la mise en page qui s'infiltre plus haut que souhaité dans l'arborescence. Utilisation contenir: strict lorsque cela est possible, pour obtenir autant de confinement que possible. "

Par conséquent, si vous ne connaissez pas la taille des articles à l'avance et comprenez le fait que les flottants et les marges seront contenus, utilisez contenir: contenu. Si vous connaissez la taille des articles en plus d'être satisfait des autres effets secondaires du confinement, utilisez contenir: strict. Le reste est au navigateur, vous avez fait votre part en expliquant comment fonctionne votre mise en page.

Puis-je utiliser le confinement maintenant?

La spécification CSS Containment est maintenant une recommandation du W3C, ce que nous appelons parfois norme Web. Pour que la spécification arrive à ce stade, il fallait deux implémentations de la fonctionnalité que nous pouvons voir à la fois dans Firefox et Chrome:

Capture d'écran des informations de prise en charge du navigateur sur le confinement sur Puis-je utiliser
Prise en charge du navigateur pour le confinement (Source: Puis-je utiliser)

Comme cette propriété est transparente pour l'utilisateur, il est totalement sûr de l'ajouter à n'importe quel site même si vous avez beaucoup de visiteurs dans des navigateurs qui ne la prennent pas en charge. Si le navigateur ne prend pas en charge le confinement, le visiteur obtient l'expérience qu'il obtient habituellement, les navigateurs qui le prennent en charge bénéficient de performances améliorées.

Je dirais que c'est une excellente chose à ajouter à tous les composants que vous créez dans un composant ou une bibliothèque de modèles, si vous travaillez de cette façon, il est probable que chaque composant est conçu pour être une chose indépendante qui n'affecte pas les autres éléments du page, fabrication contenir: contenu un ajout utile.

Par conséquent, si vous avez une page qui ajoute du contenu au DOM après le chargement, je recommanderais de l'essayer – si vous obtenez des résultats intéressants, faites-le moi savoir dans les commentaires!

Les ressources suivantes vous donneront plus de détails sur la mise en œuvre du confinement et les avantages potentiels en termes de performances:

Smashing Editorial
(il)