Articles
Introductie tot CSS
`overflow` en `contain` Eigenschappen

`overflow` en `contain` Eigenschappen

Dit artikel legt de overflow en contain eigenschappen uit.

Je kunt leren hoe je zaken zoals het weergeven van scrollbars en het afknippen kunt beschrijven met de overflow eigenschap.

YouTube Video

HTML voor Voorbeeldweergave

css-overflow-contain.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-overflow-contain.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Overflow Content</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Overflow And Contain Properties</h2>
 20        </header>
 21        <article>
 22            <h3>overflow</h3>
 23            <section>
 24                <header><h4>overflow: visible</h4></header>
 25                <section class="sample-view">
 26                    <section class="overflow-visible">
 27                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 28                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 29                    </section>
 30                </section>
 31                <header><h4>overflow: hidden</h4></header>
 32                <section class="sample-view">
 33                    <section class="overflow-hidden">
 34                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 35                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 36                    </section>
 37                </section>
 38                <header><h4>overflow: scroll</h4></header>
 39                <section class="sample-view">
 40                    <section class="overflow-scroll">
 41                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 42                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 43                    </section>
 44                </section>
 45                <header><h4>overflow: auto</h4></header>
 46                <section class="sample-view">
 47                    <section class="overflow-auto">
 48                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 49                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 50                    </section>
 51                </section>
 52                <header><h4>overflow-x: scroll; overflow-y: hidden;</h4></header>
 53                <section class="sample-view">
 54                    <section class="overflow-xy">
 55                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 56                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 57                    </section>
 58                </section>
 59                <header><h4>overflow: clip</h4></header>
 60                <section class="sample-view">
 61                    <section class="overflow-clip">
 62                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 63                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 64                    </section>
 65                </section>
 66            </section>
 67        </article>
 68        <article>
 69            <h3>contain</h3>
 70            <section>
 71                <header><h4>contain: layout</h4></header>
 72                <section class="sample-view">
 73                    <section class="contain-layout">
 74                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 75                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 76                    </section>
 77                </section>
 78                <header><h4>contain: paint</h4></header>
 79                <section class="sample-view">
 80                    <section class="contain-paint">
 81                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 82                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 83                    </section>
 84                </section>
 85                <header><h4>contain: size</h4></header>
 86                <section class="sample-view">
 87                    <section class="contain-size">
 88                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 89                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 90                    </section>
 91                </section>
 92                <header><h4>contain: style</h4></header>
 93                <section class="sample-view">
 94                    <section class="contain-style">
 95                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 96                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 97                    </section>
 98                </section>
 99                <header><h4>contain: content</h4></header>
100                <section class="sample-view">
101                    <section class="contain-content">
102                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
103                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
104                    </section>
105                </section>
106            </section>
107        </article>
108    </main>
109</body>
110</html>

overflow en contain Eigenschappen

overflow

De CSS overflow eigenschap is een belangrijke eigenschap die regelt hoe de inhoud van een element wordt weergegeven wanneer deze de afmetingen van de box overschrijdt. Het wordt vaak gebruikt om de lay-out en gebruikersinterface van webpagina's vorm te geven, en helpt bij het beheren van scrollbars, afknippen en overflow van elementen.

Basisprincipes van de overflow Eigenschap

De overflow eigenschap heeft vier hoofdwaarden: visible, hidden, scroll en auto.

visible 
1section.overflow-visible {
2    width: 400px;
3    height: 100px;
4    overflow: visible;
5}

visible is de standaardwaarde, waarbij de inhoud van een element buiten de afmetingen van de box wordt weergegeven maar wel zichtbaar blijft. De overlopende delen kunnen andere elementen overlappen, maar scrollbars worden niet specifiek weergegeven.

Kenmerken:

  • Inhoud wordt zonder beperking weergegeven.
  • Er worden geen scrollbars weergegeven.
hidden 
1section.overflow-hidden {
2    width: 400px;
3    height: 100px;
4    overflow: hidden;
5}

hidden is de instelling waarbij de inhoud van een element niet wordt weergegeven als deze de afmetingen van de box overschrijdt. Er worden geen scrollbars weergegeven en de overgelopen inhoud is niet zichtbaar.

Kenmerken:

  • Wanneer de inhoud de grens van het element overschrijdt, wordt het overtollige deel verborgen.
  • Er worden geen scrollbars weergegeven.
scroll 
1section.overflow-scroll {
2    width: 400px;
3    height: 100px;
4    overflow: scroll;
5}

Wanneer scroll wordt gebruikt, worden scrollbars gedwongen weergegeven als de inhoud van het element de box overschrijdt. Zelfs als de inhoud niet overloopt, worden scrollbars altijd weergegeven.

Kenmerken:

  • Scrollbars worden weergegeven, zelfs als de inhoud binnen de grenzen van het element past.
  • Scrollen is mogelijk in horizontale en verticale richtingen.
auto 
1section.overflow-auto {
2    width: 400px;
3    height: 100px;
4    overflow: auto;
5}

auto toont scrollbars alleen wanneer de inhoud overloopt; als de inhoud binnen de box van het element past, worden er geen scrollbars weergegeven.

Kenmerken:

  • Scrollbars verschijnen alleen wanneer de inhoud overloopt.
  • Maakt automatisch een scrollbaar gebied aan.
overflow-x en overflow-y 
1section.overflow-xy {
2    width: 400px;
3    height: 100px;
4    overflow-x: scroll;
5    overflow-y: hidden;
6}

De overflow-eigenschap kan ook afzonderlijk worden beheerd voor de horizontale (x-as) en verticale (y-as) richtingen.

Op deze manier kun je overflow-x en overflow-y gebruiken om de weergave van verticale en horizontale schuifbalken afzonderlijk in te stellen.

Overwegingen voor Overflow

Bij het gebruik van de overflow-eigenschap zijn er enkele punten waar je op moet letten.

Effecten op het ontwerp door de weergave van schuifbalken

Het gebruik van scroll of auto om schuifbalken weer te geven, kan het algemene ontwerp van de pagina verstoren. Vooral als elementen aan de rechter- of onderrand zijn geplaatst, kunnen schuifbalken deze minder zichtbaar maken.

Standaard browsergedrag

De manier waarop schuifbalken worden weergegeven en functioneren, kan verschillen per browser. Vooral tussen Windows en macOS zijn er verschillen in de weergavestijlen van schuifbalken, wat ertoe kan leiden dat ontwerpen niet verschijnen zoals bedoeld. Het is belangrijk om kruis-browser tests uit te voeren.

Overflow van kindelementen

Het instellen van overflow: hidden op een ouderelement verbergt kindelementen die buiten de box van de ouder vallen. Dit kan ervoor zorgen dat pop-ups en modale vensters niet correct worden weergegeven.

overflow: clip (CSS Level 3) 

1section.overflow-clip {
2    width: 400px;
3    height: 100px;
4    overflow: clip;
5}

In de nieuwe CSS-specificatie is ook een waarde genaamd overflow: clip geïntroduceerd. Dit lijkt op hidden, maar het staat geen scrollen toe en knipt alleen de inhoud. Momenteel wordt het slechts door sommige browsers ondersteund.

Kenmerken:

  • Als de inhoud overloopt, wordt dat deel volledig verborgen.
  • Er worden geen scrollbars weergegeven.

Conclusie

De CSS-eigenschap overflow is een essentieel hulpmiddel voor het beheren van de weergave van inhoud in webontwerp. Door situaties te beheren waarin inhoud buiten de box van het element valt en door geschikte schuifbalken of clipping toe te passen, biedt het gebruikers een gebruiksvriendelijkere interface. Bovendien biedt het gebruik van overflow-x en overflow-y een nauwkeurige controle. Met deze waarde worden schuifbalken gedwongen weergegeven wanneer de inhoud van het element de box overschrijdt. Zelfs als de inhoud niet overloopt, worden scrollbars altijd weergegeven.

contain

Overzicht van de contain-eigenschap

De CSS-eigenschap contain beperkt de invloed die een element heeft op andere elementen en de gehele pagina, wat het renderproces van de browser optimaliseert. Specifiek beperkt het herindelingen (reflows) en hertekeningen (repaints) door te voorkomen dat stijl- of lay-outwijzigingen in een element invloed hebben op inhoud buiten dat element.

Dit is belangrijk voor de prestaties van een webpagina en is met name effectief voor websites met complexe lay-outs of grote hoeveelheden inhoud.

Waarden voor contain

De contain-eigenschap heeft de volgende waarden:.

layout 
1section.contain-layout {
2    width: 300px;
3    height: 300px;
4    contain: layout;
5}

layout past beperkingen toe die gerelateerd zijn aan de lay-out. Bij gebruik van deze waarde beïnvloeden de grootte en positie van een element geen andere elementen. Bijvoorbeeld, zelfs als een element intern van grootte verandert, beïnvloedt die wijziging de externe lay-out niet.

paint 
1section.contain-paint {
2    width: 300px;
3    height: 300px;
4    contain: paint;
5}

paint beperkt de impact van het tekenen (renderen). Wanneer deze waarde is gespecificeerd, beïnvloedt het tekenen binnen het element geen externe elementen meer, waardoor het bereik van hertekenberekeningen wordt beperkt.

size 
1section.contain-size {
2    width: 300px;
3    height: 300px;
4    contain: size;
5}

size zorgt ervoor dat de grootte van het element niet afhankelijk is van externe elementen. Specifiek voorkomt het dat het wijzigen van de grootte van kindelementen de grootte van het ouderelement beïnvloedt, waardoor de lay-outstabiliteit wordt verbeterd.

style 
1section.contain-style {
2    width: 300px;
3    height: 300px;
4    contain: style;
5}

style zorgt ervoor dat de stijl van een element geen invloed heeft op externe elementen. Bijvoorbeeld, door contain: style; te specificeren, wordt gegarandeerd dat stijlwijzigingen in dat element geen invloed hebben op andere elementen, waarmee het bereik van herberekeningen wordt verminderd.

content 
1section.contain-content {
2    width: 300px;
3    height: 300px;
4    contain: content;
5}

content is een samengestelde waarde die layout, paint, size en style toepast. Met deze waarde kunt u ervoor zorgen dat de lay-out, weergave, grootte en stijl van het element geen enkele invloed hebben op externe elementen.

Prestatievoordelen

De belangrijkste reden om de contain-eigenschap te gebruiken, is het verbeteren van de prestaties van een webpagina. In het bijzonder is het effectief in de volgende situaties.

  1. Optimalisatie van herindeling: Wanneer de grootte of lay-out van een element verandert, kan de impact worden beperkt tot het kleinste mogelijke bereik. Dit vermindert het bereik van onnodige herindelingen (lay-outberekeningen) en verlaagt de belasting van de browser.

  2. Verminderen van hertekeningen: Door het tekengebied te beperken, kan het deel dat opnieuw getekend moet worden bij wijzigingen in de stijl of inhoud van een element worden geminimaliseerd.

  3. Componentgebaseerde ontwikkeling: Omdat elke component of module onafhankelijk werkt van andere elementen, verbetert dit de prestaties van elke component, zelfs in grootschalige webapplicaties.

Notities

Wanneer je de eigenschap contain gebruikt, moet je rekening houden met de volgende punten.

  1. Begrip van het toepassingsbereik: De eigenschap contain is nuttig voor prestatieoptimalisatie, maar het moet niet op elk element worden toegepast. Het is belangrijk om het op de juiste plaatsen op de juiste manier te gebruiken. Bijvoorbeeld, het toepassen ervan op vaak veranderende elementen of delen van een grote DOM-structuur kan de prestaties juist verslechteren.

  2. Browsercompatibiliteit: De eigenschap contain is een relatief nieuwe CSS-functie en wordt niet volledig ondersteund door alle browsers. Het wordt ondersteund in de belangrijkste browsers (Chrome, Firefox, Edge, Safari), maar het kan niet toepasbaar zijn in oudere versies.

Conclusie

De CSS-eigenschap contain is een krachtig hulpmiddel voor het optimaliseren van de prestaties van webpagina's en toepassingen. Door de invloed van een specifiek element op andere elementen te beperken, vermindert het de herindelings- en herschilderkosten, wat het totale renderproces versnelt. Het is echter belangrijk om zorgvuldig te overwegen waar het moet worden toegepast en het op de juiste manier te gebruiken.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

Vergelijking van Flexbox-, Grid- en Kolomlay-outs