CSS Academy · Les

Visibility versus display: none

Leer wanneer u visibility: hidden of display: none gebruikt en hoe beide de lay-out beïnvloeden.

Les 2 van 413 stappen

Visibility versus display: none is een gratis CSS Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.

Drie manieren om elementen te verbergen

CSS biedt drie gebruikelijke manieren om elementen te verbergen, elk met een ander effect op de lay-out, toegankelijkheid en interactie:

display: none
visibility: hidden
opacity: 0

display: none

Het element wordt volledig uit de lay-out verwijderd. Het neemt geen ruimte in, is niet interactief en wordt door schermlezers niet gelezen (bij de meeste implementaties). Het element bestaat nog steeds in de DOM.

<p>Visible paragraph.</p>
<p class="hidden">You will never see this.</p>

visibility: hidden

Het element is onzichtbaar, maar neemt nog steeds ruimte in binnen de lay-out. Er kan niet op worden geklikt en schermlezers lezen het niet. Dit is handig om iets te verbergen zonder verschuivingen in de lay-out te veroorzaken.

<p>Before</p>
<p class="invisible">Invisible but space reserved</p>
<p>After</p>

opacity: 0

Het element is onzichtbaar, maar volledig interactief. Het neemt nog steeds ruimte in en reageert op gebeurtenissen (klikken, aanwijzen). Schermlezers kunnen het nog steeds lezen.

<button class="transparent">Invisible but clickable</button>

visibility: visible overschrijven

Een kindelement kan visibility: hidden van een bovenliggend element overschrijven door visibility: visible in te stellen. Dit kan niet met display: none — kinderen erven dit absoluut.

<div class="parent">Hidden parent text <span class="child">but this child is visible</span></div>

Vergelijkingstabel

Snelle naslag:

display: none: geen ruimte, geen klikken, niet gelezen
visibility: hidden: neemt ruimte in, geen klikken, niet gelezen
opacity: 0: neemt ruimte in, er kan nog steeds op worden geklikt, wordt mogelijk gelezen

visibility animeren

display kan niet worden geanimeerd. Combineer visibility met opacity om elementen geleidelijk te laten verschijnen of verdwijnen:

<div class="dropdown open">Dropdown menu content</div>

Toegankelijk verbergen met SR-only

Met het patroon alleen voor schermlezers verberg je inhoud visueel, terwijl deze toegankelijk blijft voor ondersteunende technologie:

<button>Save <span class="sr-only">your document now</span></button>

Het hidden-attribuut tegenover CSS

Het HTML-attribuut hidden past display: none toe via de stylesheet van de browser. Het is toegankelijk en semantisch, maar kan door CSS-specificiteit worden overschreven.

<div hidden>Hidden via the HTML attribute</div>
<div class="css-hidden">Hidden via CSS display:none</div>
<p>Visible content</p>

content-visibility

content-visibility: hidden slaat het weergeven van secties buiten beeld over, maar behoudt hun toegankelijkheidsstructuur en lay-out. Dit is een moderne prestatietechniek voor lange pagina's.

<div class="offscreen-section">Long offscreen section rendered lazily</div>

pointer-events: none

Gebruik pointer-events: none om een element zichtbaar maar niet-interactief te houden. Klikken en aanwijzen gaan door het element heen naar elementen eronder.

<div class="overlay">Clicks pass through this overlay</div>

Korte controle

Welke techniek verbergt een element terwijl de ruimte die het inneemt in de lay-out behouden blijft?

Beantwoord dit in de interactieve les

Samenvatting

display: none verwijdert een element volledig uit de lay-out. visibility: hidden verbergt het en behoudt de ruimte. opacity: 0 verbergt het, maar houdt het interactief. Gebruik voor toegankelijk verbergen het patroon .sr-only. Combineer visibility en opacity voor overgangen waarbij elementen geleidelijk verschijnen of verdwijnen.

Gratis beginnen

Leer CSS met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 40
Lessen: 159

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Visibility versus display: none” gratis?

Ja — de volledige tekst van “Visibility versus display: none” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.

Wat leer ik in “Visibility versus display: none”?

Leer wanneer u visibility: hidden of display: none gebruikt en hoe beide de lay-out beïnvloeden. Je oefent met CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met CSS Academy te beginnen?

Ervaring vooraf is niet nodig. CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Visibility versus display: none”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over CSS Academy?

Ja. Elke les over CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar CSS Academy