Zichtbaarheid & Weergave

Alle HTML elementen die we tot nu toe tegengekomen zijn waren zichtbaar en dit is natuurlijk wat je meestal wil. Maar CSS heeft een paar eigenschappen die met weergave en zichtbaarheid te maken hebben en die kunnen in vele omstandigheden goed van pas komen. Bijvoorbeeld als je wat tekst in eerste instantie niet wil laten zien, maar pas nadat de gebruiker op de knop "Toon meer" geklikt heeft. Of in vergelijkbare gevallen zoals een popup menu.

Zichtbaarheid tegenover Weergave

CSS heeft twee properties die zichtbaarheid regelen: de visibility (zichtbaarheid) property en de display (weergave) property. Ze worden in verschillende omstandigheden toegepast en hebben ook verschillende werking. In dit hoofdstuk zullen we beide beschouwen en bekijken hoe ze verschillen.

De visibility property

De beginwaarde van de visibility (zichtbaarheid) property is "visible" (zichtbaar), wat natuurlijk betekent dat het element zichtbaar is - totdat je het verandert. Dat is logisch. Kijk nu 's naar het volgende voorbeeld waarin op HTML niveau drie boxen (div's met class='box') zijn gedefinieerd:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	background-color: CornflowerBlue;
}
</style>

<div class="box">Box 1</div>
<div class="box" style="visibility: hidden;">Box 2</div>
<div class="box">Box 3</div>

De middelste box is onzichtbaar gemaakt door aan zijn visibility property de value hidden (verborgen) toe te kennen. Als je het bovenstaande voorbeeld uitprobeert, dan zie je een flink gat tussen Box 1 en Box 3. Met andere woorden, hoewel je het element Box 2 niet ziet, reserveert de browser er toch de juiste ruimte voor!

Een van de belangrijkste verschillen tussen de properties visibility (zichtbaarheid) en display (weergave) is het volgende: een element met property visibility pakt altijd de ruimte die het nodig heeft, ongeacht of het element verborgen (hidden) is of niet (visible); het element is er steeds, maar onzichtbaar of zichtbaar. Als het element verborgen wordt door de value 'none' aan de property display toe te kennen, wordt het element als het ware opgeborgen op een plek elders, je ziet het element niet en de browser reserveert er ook geen ruimte voor.

De display property

Laten we nog een keer naar eerste voorbeeld van dit hoofdstuk kijken, maar in plaats van de property visibility te gebruiken, gebruiken we nu de display property, zodat het verschil tussen de twee goed duidelijk wordt:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	background-color: CornflowerBlue;
}
</style>

<div class="box">Box 1</div>
<div class="box" style="display: none;">Box 2</div>
<div class="box">Box 3</div>

Als je de twee voorbeelden vergelijkt zie je als eerste verschil dat de display property de value none krijgt, waar visibility de value "hidden" kreeg. Een wezenlijker verschil is dat Box 2 spoorloos verdwenen is - het element is ergens ander opgeborgen.

Toen we eerder het CSS box model invoerden, maakten we een punt van het verschil tussen inline en block elementen. We zagen dat alle HTML elementen hun leven beginnen als een van de twee en we vermeldden dat CSS het mogelijk maakt een inline type element om te vormen tot een block type en vice versa. De CSS property die de conversie mogelijk maakt is display. Dus, hoewel de display property veel gebruikt wordt om elementen uit het zicht op te bergen, heeft de eigenschap ook andere functies - bijvoorbeeld schakelen tussen block en inline type.

Met name gebruik je de eigenschap display om een element, dat je verborgen hebt door display op none zetten, weer terug in beeld te krijgen. Meestal doe je dat door de display property ofwel de value inline toe te kennen ofwel de value block (maar hij heeft nog talloos andere mogelijke values, zie de prima referentie pagina voor de display property).

Weet je nog dat we het div element opvoerden als het standaard voorbeeld van een element dat als block-type geboren wordt en het span element als prototype van een inline element? Herinner je je ook nog dat een block-type element de hele horizontale ruimte pakt die voor handen is en dat een inline element alleen pakt wat hij nodig heeft? Kijk nu eens hoe gemakkelijk dit te veranderen valt met de display property:

<style type="text/css">
.with-background {
	background-color: CornflowerBlue;
}
</style>

<span style="display: block;" class="with-background">Hello, world!</span>
<div style="display: inline;" class="with-background">Hello, world!</div>

Samenvatting

CSS maakt het gemakkelijk om elementen op een webpagina te verbergen. Gebruik de visibility property als je het element alleen maar onzichtbaar wil maken en de ruimte die hij inneemt wil behouden. Gebruik de display property als je het element elders uit het zicht wil opbergen, zodat de pagina opgemaakt wordt alsof het element niet bestaat. We hebben opgemerkt dat de display property voor veel meer gebruikt wordt dan alleen elementen uit het zicht verwijderen, bijvoorbeeld ook voor het schakelen tussen block- en inline-type.