De containeigenschap in CSS geeft aan de browser aan dat het element en zijn nakomelingen zoveel mogelijk als onafhankelijk van de documentboom worden beschouwd. Dit biedt mogelijk prestatievoordelen met berekeningen in lay-out, stijl, verf, grootte of elke combinatie voor een beperkt gebied van de DOM en niet de hele pagina.
De eigenschap heeft vijf standaardwaarden en twee afgekorte waarden die variaties van de standaardwaarden combineren. Elke waarde heeft een aantal unieke en gedeelde voordelen, afhankelijk van de context van het element dat ze toepast.
Het typische gebruik van deze eigenschap is een element dat inhoud van een bepaald type bevat. Overweeg een widget die de inkomende gegevens weergeeft die de lay-out en visuals van de nakomelingen van het element verandert. Een ander element om te overwegen is een element dat de resultaten bevat van gegevens van derden, zoals een banneradvertentie, waarbij de voordelen van insluiting ons in staat stellen de prioriteit van het schilderen van bepaalde inhoud te verlagen, hoe om te gaan met het schalen van de ontvangen inhoud of te bepalen of inhoud zou zelfs zichtbaar moeten zijn. Een overwegend statische site zal daarentegen weinig voordelen hebben, behalve de eerste lay-out en schilderen op het scherm bij het laden van de pagina.
Syntaxis
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 */ )Eigendomswaarden
Indeling
De layoutinsluitingswaarde informeert de browser dat geen van de afstammelingen van het element andere elementen op de pagina beïnvloedt, noch hebben die andere elementen enig effect op de afstammelingen van het ingesloten element. Hierdoor kan de browser mogelijk het aantal berekeningen verminderen dat nodig is bij het maken van de pagina-indeling
Een ander voordeel is dat als het ingesloten element zich buiten het scherm bevindt of op de een of andere manier onzichtbaar is, de browser gerelateerde berekeningen kan vertragen of naar een lagere prioriteit kan verschuiven. Een voorbeeld hiervan is een ingesloten element dat niet zichtbaar is aan het einde van een blokelement en het begin van dat blokelement is zichtbaar.
Een element met layoutinsluiting wordt een opbergdoos voor gepositioneerde nakomelingen - zoals elementen met absolute positionering. Het element krijgt een nieuwe stapelcontext in relatie tot de pagina en de z-indeeigenschap x kan worden gebruikt. Hoewel directionele eigenschappen, zoals topof left, niet van toepassing zijn.
Hoewel de afstammelingen van het ingesloten element mogelijk geen invloed hebben op andere elementen op de pagina, kunnen ze toch hun ingesloten voorouderelement beïnvloeden. Een afstammeling kan er bijvoorbeeld voor zorgen dat het ingesloten element de grootte verandert als reactie op veranderingen. In dat geval kan het ingesloten element mogelijk nog steeds andere elementen op de pagina beïnvloeden, maar de nakomelingen zullen nog steeds niet bij die berekeningen worden betrokken.
De volgende demo geeft een eenvoudige uitleg van wat er gebeurt als de layoutinsluiting wordt toegepast. Wanneer u op elk van de bovenste vakken klikt, wordt de insluiting toegepast en zullen de rode pijlen van uiterlijk veranderen. Het uiterlijk van de rode pijlen suggereert of de afstammelingen van de box de andere boxen op de pagina beïnvloeden tijdens lay-outberekeningen.
Verf
De paintinsluitingswaarde informeert de browser dat geen van de afstammelingen van het element buiten de grensbox van het element zal worden geverfd. Als een afstammend element zo is gepositioneerd dat een deel van het selectiekader moet worden afgekapt door het ingesloten element, zal border-boxdat deel niet worden geverfd. Als een afstammend element volledig buiten het ingesloten element is geplaatst, border-boxwordt het helemaal niet geverfd. Dit is vergelijkbaar met toepassen overflow: hidden;op het element, maar zonder de voordelen van het overslaan of verminderen van benodigde berekeningen.
Een ander voordeel is dat als het ingesloten element op de een of andere manier niet zichtbaar is in de viewport, het de afstammelingen van het element kan overslaan bij het uitvoeren van schilderberekeningen. Een voorbeeld hiervan is een element dat buiten de pagina links van de viewport is geplaatst. Als het ingesloten element niet zichtbaar is, is dit een garantie dat de inhoud ervan niet zichtbaar zal zijn. Daarom hoeven ze niet te worden betrokken bij verfberekeningen.
Een element met de paintinsluiting wordt ook een opbergdoos voor gepositioneerde nakomelingen - zoals elementen met absolute positionering. Het element krijgt ook een nieuwe stapelcontext in relatie tot de pagina en de z-indexeigenschap kan worden gebruikt. Hoewel directionele eigenschappen, zoals topof left, niet van toepassing zijn.
Een scrollend element kan extra voordelen krijgen door zijn nakomelingen in een nieuwe verflaag te plaatsen die kan helpen bij het scrollen. Normaal gesproken kunnen scrollende elementen constant opnieuw schilderen veroorzaken wanneer de nakomelingen verschijnen en verdwijnen tijdens het scrollen. Een scrollend element met de verfinsluiting kan deze constante herschildering van scrollende nakomelingen mogelijk overslaan.
De volgende demo geeft een eenvoudige uitleg van wat er gebeurt als de paintinsluiting wordt toegepast. Klik ergens om de insluiting op de paarse doos te schakelen. Wanneer insluiting wordt toegepast, veranderen sommige van de groene vakken van uiterlijk. Het uiterlijk van de groene dozen laat zien hoe ze al dan niet geverfd zijn.
Grootte
De sizeinsluitingswaarde informeert de browser dat geen van de nakomelingen in aanmerking hoeft te worden genomen bij het uitvoeren van opmaakberekeningen voor de pagina. Het ingesloten element moet heighten widtheigenschappen hebben toegepast, anders wordt het samengevouwen tot nul pixels in het vierkant. Alleen het element zelf hoeft in aanmerking te worden genomen voor berekeningen van de paginalay-out, aangezien afstammelingen de grootte van het element niet kunnen beïnvloeden. De afstammelingen van het ingesloten element worden in dergelijke berekeningen volledig overgeslagen; alsof het helemaal geen nakomelingen had.
Voor volledige voordelen van optimalisatie wordt de sizeinsluiting meestal toegepast met andere insluitingstypen.
Een element met de sizeinsluiting krijgt een nieuwe stapelcontext in relatie tot de pagina en de z-indexeigenschap kan worden gebruikt. Hoewel directionele eigenschappen, zoals topof left, niet van toepassing zijn.
De volgende demo geeft een eenvoudige uitleg van wat er gebeurt als sizecontainment wordt toegepast. Klik ergens om de insluiting op de paarse doos te schakelen. Wanneer de insluiting wordt toegepast, verandert de paarse doos van grootte. Standaard wordt de hoogte van de paarse doos bepaald door de onderliggende elementen, maar bij containment moet de hoogte worden gedefinieerd. Zodra insluiting is toegepast, zijn de nakomelingen niet langer betrokken bij maatgerelateerde lay-outberekeningen.
Stijl
De styleinsluitingswaarde informeert de browser dat sommige CSS-eigenschappen, zoals tellers en aanhalingstekens, binnen het ingesloten element vallen.
De counter-incrementen counter-seteigenschappen moeten binnen het bereik van de subboom van het element vallen. Indien uitgebreid buiten het ingesloten element, wordt een nieuwe teller gemaakt.
Waarden van de inhoud pand open-quote, close-quote, no-open-quote, en no-close-quotemoet binnen het bereik van sub-tree de informatie element.
Deze inperkingswaarde wordt geacht het risico te lopen verwijderd te worden uit de specificatie.
Inhoud
De contentinsluitingswaarde is een combinatie van zowel de lay-out- als verfinsluitingswaarden. Dit is het equivalent van het op deze manier toepassen van insluiting:
div ( contain: layout paint; )Alle potentiële voordelen die hierboven voor elke waarde zijn beschreven, zouden dan beschikbaar zijn voor het ingesloten element. Deze insluiting zou als relatief veilig worden beschouwd om op grote schaal toe te passen op meerdere elementen op de pagina.
Strikt
De strictinsluiting waarde is een combinatie van layout, painten sizeinsluiting waarden. Dit is het equivalent van het op deze manier toepassen van insluiting:
div ( contain: layout paint size; )Alle potentiële voordelen die hierboven voor elke waarde zijn beschreven, zouden dan beschikbaar zijn voor het ingesloten element.
Als de "strengste" van de insluitingswaarden, moet deze waarde zorgvuldig worden gebruikt. Dit komt door de afmetingseisen die het stelt aan het ingesloten element. Met deze vereisten biedt deze insluitingswaarde de meeste potentiële prestatievoordelen van insluiting.
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 52 | 69 | Nee | 79 | Nee |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Nee |