Elementen op uw website verbergen met CSS

Er zijn bepaalde momenten waarop u niet wilt dat elk aspect van uw website in de lucht hangt. Dat wil zeggen, u wilt niet dat elk getemplate aspect van een pagina, post, header of footer wordt weergegeven in elke keer dat het verschijnt. En hoewel het misschien lijkt alsof u de code van het sjabloon of thema moet herschrijven voor elke keer dat u deze weglating wilt, is dat niet echt waar.

In feite kun je elementen op je website snel verbergen met alleen CSS. En het is eigenlijk heel eenvoudig. Vandaag bespreken we acht verschillende manieren om dit te doen. Elk van deze opties beschrijft een legitieme manier om elementen op je website te verbergen. We nemen hier geen kortere weg. Maar je zult merken dat deze methoden vrij eenvoudig te implementeren zijn.

Waarom elementen verbergen?

Er zijn verschillende redenen waarom je elementen op je website wilt verbergen. Vaak komt het neer op tijd besparen bij herontwerpen en dergelijke. Maar vier populaire redenen zijn

• Wanneer je metagegevens op WordPress-pagina’s en -berichten wilt verbergen zonder dat je je thema hoeft te herschrijven of een hoop aanpassingen hoeft te doen.

• Tijdelijke wijzigingen aanbrengen aan de lettertypes, lettertypesites en andere ontwerpelementen van je site is een populaire keuze tijdens bepaalde vakantieseizoenen. Het verbergen van elementen kan hiervoor zorgen zonder dat een volledig herontwerp nodig is.
• Niet elke pagina of post heeft commentaar nodig. En als je ze toch op andere plaatsen wilt inschakelen, kun je ze op specifieke plaatsen verwijderen door elementen te verbergen.
• Vaak zult u merken dat u wilt dat bepaalde pagina’s de standaardheader van uw site niet weergeven. Dit is vooral handig als u een landingspagina wilt maken zonder een nieuwe landingspaginasjabloon te hoeven maken. Verberg gewoon de koptekst op een standaard paginasjabloon en je kunt aan de slag.

Met deze redenen in gedachten gaan we nu acht manieren verkennen waarop je elementen op je website kunt verbergen met CSS.

Gebruik display none CSS

Als eerste is er een van de populairste manieren om elementen te verbergen met CSS. Je voegt gewoon de waarde none toe aan de display eigenschap. Hier is een voorbeeld van hoe dat eruit ziet:

.stijl {
display: none;
}

Als je het bovenstaande opneemt in je aangepaste CSS-veld of je child theme, wordt het element in kwestie niet meer geladen. Belangrijk: dat geldt ook voor hulpapparaten zoals schermlezers. Daarover straks meer.

Helaas is deze techniek niet de beste optie om dingen op je pagina’s te verbergen. Dit heeft veel te maken met het feit dat weergave al veel andere waarden heeft. En geen enkele ongedaan maken kan achteraf voor unieke hoofdpijn zorgen.

Gebruik visibility: hidden

Een andere methode is het gebruik van visibility: hidden;. Het werkt hetzelfde als display: none; maar in plaats van het element daadwerkelijk te verwijderen, wordt het alleen verborgen en onzichtbaar gemaakt. Dus als het element eerder een bepaalde hoeveelheid ruimte innam, zal het nog steeds dezelfde hoeveelheid ruimte innemen binnen je zichtbare ontwerp – bezoekers zullen het alleen niet kunnen zien.

Dit werkt natuurlijk niet goed als u bijvoorbeeld de header van uw site onzichtbaar wilt maken, omdat alle inhoud naar beneden zou worden verschoven en de ruimte waar de header normaal gesproken staat leeg zou lijken.

Toch is visibility:hidden; eigenlijk heel handig om secties te verbergen zonder de algehele opmaak van de pagina te beïnvloeden. Alle geneste elementen worden nog steeds gebruikt. Dit is niet het geval met display: none; waarbij alle geneste elementen en stijlen volledig worden verwijderd. Deze methode werkt alleen als je dezelfde opmaak wilt behouden, maar het element wilt laten verdwijnen.

Verberg een element via CSS op een pagina of post

Hoewel je display: none; kunt gebruiken om elementen te verbergen op pagina’s en berichten in WordPress, komt er iets meer bij kijken als je wijzigingen wilt aanbrengen in de algehele sitestructuur van het CMS. Als je dat wilt doen, is je eerste taak om de pagina-ID van de pagina in kwestie te vinden.

Een mogelijkheid is om de pagina te onderzoeken met de ontwikkeltools van je browser en te kijken naar de body class.

Pagina-id vinden in wordpress-menu

Je kunt ook met de muis over de naam gaan in het menu Pagina’s en kijken naar de URL die onder in het browservenster wordt weergegeven.

Daarnaast heb je de HTML-klasse of id nodig van het element dat je op die pagina wilt verbergen, zoals .site-header. Daarna is het gewoon een kwestie van de juiste selector gebruiken.

.page-id-158 .site-header {
display: none;
}

Gebruik het “hidden” attribuut voor elk element

Of je wilt het “hidden” attribuut gebruiken. Dit kan op elk element worden toegepast. Het werkt eigenlijk bijna hetzelfde als display: none; maar heeft het voordeel dat het in een groter aantal gevallen werkt. Sommige content management systemen staan niet toe dat je stijlveranderingen aanbrengt (of je moet door een hoop hoepels springen om het voor elkaar te krijgen) dus het verborgen attribuut is super handig in deze situaties. Je gebruikt het als volgt:

<p hidden> 
// Alle inhoud die je wilt verbergen komt hier. 
</p>

Het heeft echter dezelfde nadelen als display: none;. Wat verborgen is, zal nog steeds leesbaar zijn voor hulpmiddelen.

De transform-eigenschap gebruiken

Een andere manier om elementen op je website te verbergen via CSS is de transform-eigenschap. Niet heel netjes, maar het werkt wel. Hiermee kun je paginaonderdelen op verschillende manieren manipuleren om ze te verbergen:

.mijn-class {
	clip-path: circle(0);
}

Gebruik scale (0) om een element te verkleinen tot het niet meer zichtbaar is.
Gebruik vertalen (-999px, 0px) om een element van het scherm te verschuiven.
Dit is echt een handige methode, omdat het element dat je wilt verbergen naar een andere laag wordt verplaatst en je oorspronkelijke ontwerp op geen enkele manier wordt beïnvloed. Het element wordt niet geactiveerd bij het laden van de pagina, dus het is volledig verborgen en uit het zicht.

Overlay an Element

Ook iets dat je kunt proberen, is het overlappen van een element om aspecten van uw site te verbergen. Met deze methode plaats je letterlijk het ene element op het andere, zodat het onderliggende element niet langer zichtbaar is voor sitebezoekers.

Zolang het bovenop geplaatste element dezelfde kleur heeft als de achtergrond van uw site, verbergt het effectief het element dat u wilt verbergen. Een goede manier om dit te implementeren is het after pseudo-element:

Het kan echter een beetje lastiger zijn om mee te werken dan sommige van de andere methoden die hier worden beschreven. Bovendien loop je nog steeds tegen het probleem aan dat hulpmiddelen het verborgen element kunnen lezen. Bovendien kan het in dit geval zelfs nog verwarrender zijn, omdat het verborgen element en het overlappende element worden gelezen, wat er niet goed uitziet.

<div class="item-te-verbergen"><div>

.item-te-verbergen {
	color: red;
	height: 200px;
	position: relative;
	width: 200px;
}

.item-te-verbergen::after {
	background-color: #fff;
	bottom: 0;
	content: '';
	left: 0;
	position: absolute;
	right: 0;
	top: 0;	
}

Gebruik positie: absoluut

Een andere manier om elementen te verbergen met CSS is door de position eigenschap te gebruiken. Hier verwijder je in feite het element dat je wilt verbergen uit de normale HTML-stroom en plaats je het buiten het zichtbare gebied. Als je de positionering van een element instelt op absoluut, wordt het geplaatst op een specifiek punt ten opzichte van de webbrowser, niet ten opzichte van andere elementen. Zo gebruik je deze truc om dingen op je pagina te verbergen:

.mijn-stijl{
	position: absolute;
	left: -999px;
}

CSS verbergt element, laat het na 5 seconden zien

Ik gebruik dit regelmatig. CSS verbergt element, laat het na bijvoorbeeld 5 seconden zien. Het principe:

• Pagina wordt geladen met element verborgen
• Wacht 5 seconden
• Element tonen

<div id='laat-zien'>Wachten</div>

#laat-zien {
  animation: cssAnimation 0s 5s forwards;
  opacity: 0; 
}

@keyframes cssAnimation {
  to   { opacity: 1; }
}

Handleiding CSS verbergt element en laat het na seconden zien