10 manieren om elementen in CSS te verbergen

Er zijn meerdere manieren om een element in CSS te verbergen, maar ze verschillen in de manier waarop ze van invloed zijn op toegankelijkheid, lay-out, animatie, prestaties en eventafhandeling.

Animatie

Sommige CSS-verbergopties zijn alles of niets. Het element is of volledig zichtbaar of volledig onzichtbaar en er is geen tussenstatus. Andere, zoals transparantie, kunnen een reeks waarden hebben, zodat geïnterpoleerde CSS animaties mogelijk worden.

Toegankelijkheid

Elke hieronder beschreven methode verbergt een element visueel, maar kan de inhoud wel of niet verbergen voor ondersteunende technologieën. Een schermlezer kan bijvoorbeeld nog steeds kleine transparante tekst aankondigen. Verdere CSS-eigenschappen of ARIA-attributen zoals aria-hidden="true" kunnen nodig zijn om de juiste actie te beschrijven.

Bedenk dat animaties voor sommige mensen ook desoriëntatie, migraine, toevallen of ander fysiek ongemak kunnen veroorzaken. Overweeg het gebruik van een prefers-reduced-motion media query om animaties uit te schakelen wanneer deze in gebruikersvoorkeuren zijn gespecificeerd.

Event Handling

Hiding zorgt ervoor dat events op dat element niet meer worden getriggerd of heeft geen effect – dat wil zeggen dat het element niet zichtbaar is, maar nog wel kan worden aangeklikt of andere gebruikersinteracties kan ontvangen.

Prestaties

Nadat een browser het HTML DOM en CSS objectmodel heeft geladen en geparseerd, wordt de pagina in drie fasen gerenderd:

1. Layout: genereert de geometrie en positie van elk element
2. Paint: tekent de pixels uit voor elk element
3. Composition: positioneert elementlagen in de juiste volgorde

Een effect dat alleen veranderingen in de compositie veroorzaakt, is merkbaar vloeiender dan effecten die de lay-out beïnvloeden. In sommige gevallen kan de browser ook hardwareversnelling gebruiken.

opacity en filter: opacity()

De eigenschappen opacity: N en filter: opacity(N) kunnen worden doorgegeven als een getal tussen 0 en 1, of als een percentage tussen 0% en 100%, waarmee volledig transparant en volledig ondoorzichtig wordt aangegeven.

Zie de Pen
verbergen met opaciteit: 0 van SitePoint (@SitePoint)
op CodePen.

Er is weinig praktisch verschil tussen de twee in moderne browsers, hoewel filter moet worden gebruikt als meerdere effecten tegelijk worden toegepast (vervagen, contrast, grijstinten etc.)

Opacity kan worden geanimeerd en biedt goede prestaties, maar wees op je hoede dat een volledig transparant element op de pagina blijft staan en events kan triggeren.

layout beïnvloed?

rendering vereist

animatie frames mogelijk?

metric	effect
browserondersteuning	goed, maar IE ondersteunt alleen opacity 0 tot 1
toegankelijkheid	content niet leesbaar als 0 of 0% is ingesteld
nee
samenstelling
prestaties	best, kan hardwareversnelling gebruiken
ja
gebeurtenissen geactiveerd bij verbergen?	ja

color Alpha Transparency

opacity heeft invloed op het hele element, maar het is ook mogelijk om de colorbackground-color, en border-color eigenschappen afzonderlijk in te stellen. Door een alpha channel van nul toe te passen met rgba(0,0,0,0) of iets dergelijks wordt een item volledig transparant:

Zie de Pen
verbergen met kleur alpha door SitePoint (@SitePoint)
op CodePen.

Elke eigenschap kan afzonderlijk worden geanimeerd om interessante effecten te maken. Merk op dat transparantie niet kan worden toegepast op elementen met een achtergrond van een afbeelding, tenzij ze zijn gegenereerd met linear-gradient of iets dergelijks.

Het alpha channel kan worden ingesteld met:

• transparent: volledig transparant (tussenanimaties zijn niet mogelijk)
• rgba(r, g, b, a): rood, groen, blauw, en alpha
• hsla(h, s, l, a): tint, verzadiging, lichtheid, en alpha
• #RRGGBBAA en #RGBA

layout beïnvloed?

rendering vereist

metric	effect
browser ondersteuning	goed, maar IE ondersteunt alleen transparent en rgba
toegankelijkheid	content nog steeds te lezen
nee
schilderen
prestaties	goed, maar niet zo snel als opacity
animatieframes mogelijk?	ja
events getriggerd bij verbergen?	ja

transform

De transform eigenschap kan worden gebruikt om een element te vertalen (verplaatsen), schalen, roteren, of scheef te trekken. Een scale(0) of translate(-999px, 0px) buiten het scherm zal het element verbergen:

Zie de Pen
verbergen met transform: scale(0); door SitePoint (@SitePoint)
op CodePen.

transform biedt uitstekende prestaties en hardwareversnelling omdat het element effectief naar een afzonderlijke laag wordt verplaatst en in 2D of 3D kan worden geanimeerd. De oorspronkelijke opmaakruimte blijft ongewijzigd, maar er worden geen gebeurtenissen geactiveerd door een volledig verborgen element.

prestaties

animatieframes mogelijk?

metric	effect
browserondersteuning	goed
toegankelijkheid	content nog steeds leesbaar
lay-out beïnvloed?	nee – de originele afmetingen blijven
rendering nodig	samenstelling
best, kan hardwareversnelling gebruiken
ja
gebeurtenissen geactiveerd bij verbergen?	nee

clip-path

De clip-path eigenschap creëert een clipping regio die bepaalt welke delen van een element zichtbaar zijn. Door een waarde te gebruiken zoals clip-path: circle(0); wordt het element volledig verborgen.

Bekijk de Pen
verbergen met clip-path door SitePoint (@SitePoint)
op CodePen.

clip-path biedt ruimte voor interessante animaties, hoewel je er alleen in moderne browsers op moet kunnen vertrouwen.

prestaties

animatieframes mogelijk?

metric	effect
browserondersteuning	alleen moderne browsers
toegankelijkheid	content nog steeds te lezen door sommige applicaties
lay-out beïnvloed?	nee – de oorspronkelijke afmetingen blijven behouden
rendering vereist	paint
redelijk
ja, in moderne browsers
gebeurtenissen geactiveerd bij verbergen?	nee

zichtbaarheid

De visibility eigenschap kan worden ingesteld op visible of hidden om een element te tonen en te verbergen:

Zie de Pen
verbergen met zichtbaarheid: verborgen door SitePoint (@SitePoint)
op CodePen.

De door het element gebruikte ruimte blijft behouden, tenzij een collapse waarde wordt gebruikt.

prestaties

animatieframes mogelijk?

metric	effect
browserondersteuning	uitstekend
toegankelijkheid	content niet gelezen
lay-out beïnvloed?	nee, tenzij collapse wordt gebruikt
rendering vereist	opmaak, tenzij collapse wordt gebruikt
goed
nee
events getriggerd bij verbergen?	nee

display

display is waarschijnlijk de meest gebruikte methode voor het verbergen van elementen. Een waarde van none verwijdert het element effectief, alsof het nooit in het DOM heeft bestaan.

Zie de Pen
verbergen met display: none door SitePoint (@SitePoint)
op CodePen.

Hoewel, het is mogelijk de slechtste CSS eigenschap om te gebruiken in de meerderheid van de gevallen. Het kan niet worden geanimeerd en zal een pagina-indeling triggeren tenzij het element uit de documentstroom wordt verplaatst met position: absolute of de nieuwe contain eigenschap wordt gebruikt.

display is ook overbelast, met opties als blockinlinetableflexboxgrid en meer. Terugzetten naar de juiste waarde na display: none; kan problematisch zijn (hoewel unset kan helpen).

metric	effect
browserondersteuning	uitstekend
toegankelijkheid	content niet gelezen
lay-out beïnvloed?	ja
rendering vereist	layout
prestaties	slecht
animatieframes mogelijk?	nee
gebeurtenissen getriggerd bij verbergen?	nee

HTML hidden attribute

Het HTML hidden attribute kan aan elk element worden toegevoegd:

<p hidden> Hidden content</p>

om de standaardstijl van de browser toe te passen:

 { display: none;}

Dit heeft dezelfde voordelen en gebreken als display: none, hoewel het handig kan zijn als je een content management systeem gebruikt dat geen stijlwijzigingen toestaat.

Absolute positie

Met de position eigenschap kan een element van zijn standaard static positie binnen de pagina-layout worden verplaatst met behulp van topbottomleft, en right. Een absolute-gepositioneerd element kan dus van het scherm worden verplaatst met left: -999px of iets dergelijks:

Zie de Pen
verbergen met position: absolute van SitePoint (@SitePoint)
op CodePen.

layout beïnvloed?

metric	effect
browserondersteuning	uitstekend, tenzij position: sticky
toegankelijkheid	content nog te lezen
ja, als positionering wordt gewijzigd
rendering vereist	hangt af
prestaties	redelijk indien voorzichtig
animatieframes mogelijk?	ja, op topbottomleft, en right
events getriggerd wanneer verborgen?	ja, maar het kan onmogelijk zijn om interactie te hebben met een element buiten het scherm

Overlay Another Element

Een element kan visueel verborgen worden door er een ander element overheen te plaatsen dat dezelfde kleur heeft als de achtergrond. In dit voorbeeld wordt een ::after pseudo-element overlapt, hoewel elk kind-element zou kunnen worden gebruikt:

Zie de Pen
verbergen met een overlay door SitePoint (@SitePoint)
op CodePen.

Hoewel deze optie technisch mogelijk is, vereist ze meer code dan andere opties.

metric	effect
browserondersteuning	uitstekend
toegankelijkheid	content nog steeds leesbaar
lay-out beïnvloed?	nee, mits absoluut gepositioneerd
rendering vereist	schilderen
prestaties	redelijk, mits voorzichtig
animatieframes mogelijk?	ja
gebeurtenissen geactiveerd bij verbergen?	ja, wanneer een pseudo- of child-element wordt overlapt

Verborgen dimensies

Een element kan worden verborgen door de dimensies ervan te minimaliseren met widthheightpaddingborder-width en/of font-size. Het kan ook nodig zijn om overflow: hidden; toe te passen om ervoor te zorgen dat de inhoud niet uitloopt.

Zie de Pen
verbergen met breedte of hoogte door SitePoint (@SitePoint)
op CodePen.

Interessante geanimeerde effecten zijn mogelijk, maar de prestaties zijn merkbaar beter met transform.

metric	effect
browserondersteuning	uitstekend
toegankelijkheid	content nog steeds leesbaar
lay-out beïnvloed?	ja
rendering vereist	layout
prestaties	slecht
animatieframes mogelijk?	ja
gebeurtenissen geactiveerd bij verbergen?	nee

Verborgen Keuzes

display: none is jarenlang de favoriete oplossing geweest om elementen te verbergen, maar het is voorbijgestreefd door meer flexibele, animeerbare opties. Het is nog steeds geldig, maar misschien alleen wanneer je inhoud permanent wilt verbergen voor alle gebruikers. transform of opacity zijn betere keuzes als het om performance gaat.

Tilt uw CSS-vaardigheden naar een hoger niveau met CSS Master. Leer CSS-architectuur, debugging, aangepaste eigenschappen, geavanceerde lay-out- en animatietechnieken, hoe u CSS gebruikt met SVG, en nog veel meer.