TL;DR
La nouvelle propriété CSS Limitment permet aux développeurs de limiter la portée des styles, de la mise en page et de la peinture du navigateur.
Il comporte quelques valeurs. Sa syntaxe est donc la suivante:
contain: none | strict | content | [ size || layout || style || paint ]
Elle est disponible dans les versions 52 et ultérieures de Chrome et d'Opera 40 (et est compatible avec le public dans Firefox). N'hésitez pas à l'essayer et à nous dire ce que vous en pensez !
La propriété "contains"
Lors de la création d'une application Web, ou même d'un site complexe, l'un des principaux défis en termes de performances consiste à limiter les effets des styles, de la mise en page et de la peinture. Souvent, l'intégralité du DOM est considérée comme "dans le champ d'application" des tâches de calcul. La tentative d'une "vue" autonome dans une application Web peut s'avérer délicate: les modifications d'une partie du DOM peuvent affecter d'autres parties, et il n'y a aucun moyen d'indiquer au navigateur ce qui doit se trouver dans ou hors du champ d'application.
Par exemple, imaginons qu'une partie de votre DOM ressemble à ceci:
<section class="view">
Home
</section>
<section class="view">
About
</section>
<section class="view">
Contact
</section>
Et vous ajoutez un nouvel élément à une vue, ce qui déclenchera les styles, la mise en page et la peinture:
<section class="view">
Home
</section>
<section class="view">
About
<div class="newly-added-element">Check me out!</div>
</section>
<section class="view">
Contact
</section>
Toutefois, dans ce cas, l'intégralité du DOM est pris en compte, ce qui signifie que les calculs de style, de mise en page et de peinture doivent tenir compte de tous les éléments, qu'ils aient été modifiés ou non. Plus le DOM est grand, plus les tâches de calcul sont nombreuses. Cela signifie que votre application risque de ne pas répondre aux entrées utilisateur.
La bonne nouvelle, c'est que les navigateurs récents deviennent très intelligents pour limiter automatiquement la portée des styles, de la mise en page et de la peinture, ce qui signifie que les choses s'accélèrent sans que vous ayez à faire quoi que ce soit.
Mais ce qui est ce qui est encore mieux, c'est qu'il existe une nouvelle propriété CSS qui permet aux développeurs de contrôler le champ d'application: Confinement.
Il s'agit d'une nouvelle propriété, avec le mot clé "contains", qui accepte quatre valeurs:
layoutpaintsizestyle
Chacune de ces valeurs vous permet de limiter la quantité de travail d'affichage nécessaire au navigateur. Examinons chacun d'entre eux plus en détail.
Mise en page (container: mise en page)
Le confinement de la mise en page est probablement le plus grand avantage de cette technique, avec contain: paint.
La mise en page s'applique normalement au document. Elle s'adapte donc proportionnellement à la taille de votre DOM. Par conséquent, si vous modifiez la propriété left d'un élément, il peut être nécessaire de vérifier chaque élément du DOM.
Le confinement peut potentiellement réduire le nombre d'éléments à une poignée d'éléments, plutôt que l'ensemble du document, ce qui évite au navigateur un travail inutile et améliore considérablement les performances.
Peinture (contenir: peinture)
La peinture à liser est un autre avantage incroyablement utile du confinement. Le confinement de la peinture élimine essentiellement l'élément en question, mais cela a également quelques autres effets secondaires:
- Il agit comme un bloc conteneur pour les éléments positionnés de façon absolue et fixes. Cela signifie que les enfants sont positionnés en fonction de l'élément avec
contain: paintet non d'un autre élément parent comme, par exemple, le document. - C'est un contexte d'empilement. Cela signifie que des éléments tels que
z-indexauront un effet sur l'élément, et que les enfants seront empilés en fonction du nouveau contexte. - Il devient un nouveau contexte de mise en forme. Cela signifie que si vous disposez, par exemple, d'un élément au niveau du bloc avec une structuration de peinture, il sera traité comme un nouvel environnement de mise en page indépendant. Cela signifie que la mise en page en dehors de l'élément n'affecte généralement pas les enfants de l'élément parent.
Taille (contenir: taille)
contain: size signifie que les enfants de l'élément n'ont aucune incidence sur la taille du parent, et que ses dimensions déduites ou déclarées seront celles qui seront utilisées. Par conséquent, si vous définissez contain: size sans spécifier les dimensions de l'élément (soit directement, soit via des propriétés Flex), le rendu sera de 0 x 0 px.
Le confinement de la taille est une mesure de taille qui permet de ne pas dépendre d'éléments enfants pour les tailles, mais n'offre pas beaucoup d'avantages en termes de performances.
Style (contain: style)
Il peut être difficile de prévoir quels effets la modification des styles d'un élément aura sur l'arborescence DOM. C'est le cas, par exemple, des compteurs CSS, où la modification d'un compteur dans un élément enfant peut affecter les valeurs de compteur portant le même nom et utilisées ailleurs dans le document. Lorsque contain: style est défini, les modifications de style ne sont pas répercutées au-delà de l'élément parent.
Pour clarifier les choses, contain: style ne fournit pas de style délimité que celui que vous obtiendrez avec Shadow DOM ; Ici, le confinement consiste uniquement à limiter les parties de l'arborescence qui sont prises en compte lorsque les styles sont modifiés, pas lorsqu'ils sont déclarés.
Restriction stricte et structuration du contenu
Vous pouvez également combiner des mots clés, comme contain: layout paint, afin d'appliquer uniquement ces comportements à un élément. mais contient également deux valeurs supplémentaires:
contain: strictsignifie la même chose quecontain: size layout paint.contain: contentsignifie la même chose quecontain: layout paint.
Le confinement strict est idéal lorsque vous connaissez à l'avance la taille de l'élément (ou que vous souhaitez réserver ses dimensions), mais gardez à l'esprit que si vous déclarez un confinement strict sans dimensions, en raison du confinement implicite de la taille, l'élément peut s'afficher sous la forme d'un cadre de 0 x 0 px.
Le confinement, en revanche, permet d’améliorer considérablement la portée, mais vous n’avez pas besoin de connaître ou de spécifier les dimensions de l’élément à l’avance.
Parmi les deux options, contain: content est celle que vous devez utiliser par défaut. Lorsque contain: content n'est pas assez efficace pour vos besoins, vous devez considérer le confinement strict comme une porte de secours.
Dites-nous comment vous vous en sortez
Le confinement est un excellent moyen de commencer à indiquer au navigateur ce que vous avez l’intention d’isoler sur votre page. Essayez cette fonctionnalité dans Chrome 52 ou version ultérieure et donnez-nous votre avis !