Aider les navigateurs à optimiser avec la propriété CSS Contain

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 propriété unique, contient et elle 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. [19659005] 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 à surveiller si l'application de contient aux éléments de votre site.

Le problème Of Layout Recalculation

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, au fur et à mesure que 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é:

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 la propriété CSS contiennent vous donnent.

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 modifie uniquement les choses à l'intérieur de la sous-arborescence pour cet élément de liste.)

Application la propriété contient à un élément indique au navigateur que les modifications sont étendues à la sous-arborescence de cet élément, afin que le navigateur puisse faire 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 la propriété contient , cependant, les différentes valeurs s'accompagnent d'effets secondaires potentiels qu'il convient de comprendre avant d'ajouter la propriété aux éléments de votre site.

Utilisation du confinement

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

Remarque : Il existe une valeur de 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 disposition apporte les plus grands avantages. Pour activer le confinement de la mise en page, utilisez l'extrait de code suivant:

 .item {
  contenir: mise en page;
}

Lorsque le confinement de la disposition est activé, le navigateur sait que rien à l'extérieur 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 à l'extérieur. 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 disposition est activé. Ce sont toutes ces choses qui garantissent que cette boîte et son contenu sont indépendants du reste de l'arbre.

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 l'affichage : flow-root comme expliqué dans mon article « Comprendre la disposition CSS et le contexte de formatage de bloc ». 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 changerait la disposition des choses à l'extérieur, ce qui en ferait 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 boîte que vous avez appliquée contient: mise en page .

La boîte crée également un contexte d'empilement ]. Par conséquent, 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 contient: layout vous pouvez voir que lorsque l'élément flottant est introduit, il ne dépasse plus le bas de la boîte. Voici notre nouveau contexte de mise en forme de bloc en action, contenant le flottant.

Paint

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

 .item {
  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 formatage indépendant, un bloc contenant des éléments positionnés et établit un contexte d'empilement. pour le navigateur que les éléments à l'intérieur du bloc contenant 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 flottant sort toujours du fond de la boîte, car le flotteur est retiré du flux.

Taille

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

 .item {
  contenir: taille;
}

Si vous utilisez le confinement de 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, donc la boîte se réduira comme si elle n'avait pas de contenu.

Dans l'exemple ci-dessous, je n'ai pas donné de hauteur au li ; ils ont également contiennent: la taille appliquée. Vous pouvez voir que tous les éléments se sont effondrés comme s'ils n'avaient aucun contenu, ce qui donne une liste très particulière!

Si vous donnez une hauteur aux boîtes, la hauteur sera respectée lorsque contient: la taille est utilisée. 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 contient pour pouvoir 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 contain: content; et pour activer tout confinement possible (en gardant à l'esprit que les éléments qui n'ont pas de taille s'effondreront alors), utilisez contient: stricte .

La spécification dit :

« contient: le 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. Utilisez contient: 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 flotteurs et les marges seront être contenu, utiliser contenir: contenu . Si vous connaissez la taille des articles en plus d'être satisfait des autres effets secondaires du confinement, utilisez contient: 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 W3C, ce que nous appelons parfois un norme Web . Pour que la spécification arrive à ce stade, il devait y avoir deux implémentations de la fonctionnalité que nous pouvons voir à la fois dans Firefox et Chrome:

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, ceux des navigateurs prenant en charge obtiennent des performances améliorées.

Je dirais que c'est une excellente chose à ajouter à tous les composants que vous créez dans un composant ou bibliothèque de modèles, si vous travaillez de cette manière, il est probable que chaque composant soit conçu pour être une chose indépendante qui n'affecte pas les autres éléments de la page, ce qui fait que contient: content un ajout utile.

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

Ressources connexes

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

(il)