Skip links en inhoudsopgave

Uitleg verticaal slide-outmenu. Maakt gebruik van :target

Laatst aangepast: .

Afbeelding 1: slide-outmenu in gesloten en geopende toestand

Korte omschrijving

Met een aanraking, een klik of het toetsenbord wordt een menu vanaf de linkerkant getoond of verborgen.

BELANGRIJK

Deze uitleg hoort bij het voorbeeld dat in de download zit. Het voorbeeld uit de download verschilt iets van het voorbeeld hier op de site. In de download ontbreekt bijvoorbeeld de navigatie voor de site. Ook in de kopregels zit vaak wat verschil. Daarnaast kunnen er nog andere (meestal kleine) verschillen zijn.

Als je deze uitleg leest naast de broncode van het voorbeeld op de site, kan het dus bijvoorbeeld zijn dat 'n <h1> uit de css bij 'n <h2> uit de html hoort. Maar het gaat niet om hele grote, fundamentele afwijkingen.

Als je dit lastig vindt, downloadt dan de hele handel (ga terug naar het voorbeeld en kies daar voor downloaden). In de download zit 'n voorbeeld dat wel naadloos aansluit op de uitleg in de download.

Als je deze handleiding graag uitprint (zonde van het bos), gebruik dan de pdf in de download. Deze pagina is niet geoptimaliseerd voor printen, de pdf kan wel makkelijk worden geprint.

Alles op deze site kan vrij worden gebruikt, met drie beperkingen:

* Je gebruikt het materiaal op deze site volledig op eigen risico. Het kan prima zijn dat er fouten in de hier verstrekte info zitten. Voor eventuele schade die door gebruik van materiaal van deze site ontstaat, in welke vorm dan ook, zijn www.css-voorbeelden.nl en medewerkers daarvan op geen enkele manier verantwoordelijk.

* Deze uitleg wordt regelmatig bijgewerkt. Het is daarom niet toegestaan deze uitleg op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat de uitleg afkomstig is van www.css-voorbeelden.nl en dat daar altijd de nieuwste versie is te vinden. Dit is om te voorkomen dat er verouderde versies worden verspreid.

* Het kan zijn dat materiaal is gebruikt dat van anderen afkomstig is. Dat materiaal kan onder een bepaalde licentie vallen, waardoor het mogelijk niet onbeperkt gebruikt mag worden. Als dat zo is, wordt dat vermeld onder Inhoud van de download en licenties.

Een link naar www.css-voorbeelden.nl wordt trouwens altijd op prijs gesteld.

Alle code is geschreven in een afwijkende lettersoort en -kleur. De code die te maken heeft met de basis van dit voorbeeld (essentiële code), is in de hele uitleg blauw gekleurd. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles vanwege de leesbaarheid in een gewone letter.)

Opmerkingen

Links in deze uitleg, vooral links naar andere sites, kunnen verouderd zijn. Op de pagina met links vind je steeds de meest recente links.

Dit voorbeeld is gemaakt op een systeem met Linux (Kubuntu). Daarbij is vooral gebruik gemaakt van Visual Studio Code, GIMP en Firefox met extensies. De pdf-bestanden zijn gemaakt met LibreOffice.

Vragen of opmerkingen? Fout gevonden? Ga naar het forum.

Iets gevonden waar je wat aan hebt? Mooi. Als je je waardering wilt uiten, maak dan een donatie over aan War Child Nederland, een organisatie die kinderen uit oorlogsgebieden helpt hun trauma's te verwerken. Of - nog beter - wordt donateur:
Naar site van War Child Nederland

Achterliggend idee

Links buiten de pagina staat een menu dat normaal genomen niet zichtbaar is.

Bovenaan de pagina staat een link (het witte blokje met het ≡-teken), die niet meescrolt met de pagina. Deze link is daardoor altijd bereikbaar. Het doel van deze link is het menu dat links buiten de pagina staat. Door bij het menu gebruik te maken van de pseudo-class :target, kan het menu zichtbaar worden gemaakt bij aanraken van of klikken op de link. De link kan ook met het toetsenbord worden bediend.

Als het menu zichtbaar is, kunnen de in het menu zittende links naar andere pagina’s gewoon worden gevolgd door aanraken, klikken of toetsenbord.

In het menu zitten nog twee extra links, die nergens naartoe leiden. Zodra een van deze twee links wordt gevolgd, wordt pseudo-class :target bij het menu uitgeschakeld en sluit het menu weer.

Er zijn twee links om het menu weer te sluiten, eentje helemaal aan het begin en eentje helemaal aan het einde. Hierdoor hoeft een toetsenbordgebruiker die per ongeluk het menu heeft geopend niet alle tien externe links af te lopen, maar kan het menu gelijk weer sluiten.

Als het menu niet zichtbaar is, wordt dit door de Tab-toets genegeerd. Ook schermlezers negeren het menu, als dit niet is geopend.

Verder is nog wat extra css nodig om het menu enigszins soepel te tonen en te verbergen.

De browser slaat een bezochte link op in de geschiedenis. Om te voorkomen dat de links om het menu te openen en te sluiten in de geschiedenis worden opgeslagen, wordt wat JavaScript gebruikt. Als dat niet zou gebeuren, wordt bij het volgen van de bezochte links in de geschiedenis ook het menu getoond en verborgen.

Zonder JavaScript werkt alles gewoon, maar de geschiedenis wordt dan niet gecorrigeerd.

Semantische elementen en WAI-ARIA

Deze twee onderwerpen zijn samengevoegd, omdat ze veel met elkaar te maken hebben.

Semantische elementen

De meeste elementen die in html worden gebruikt, hebben een semantische betekenis. Dat wil zeggen dat je aan de gebruikte tag al (enigszins) kunt zien, wat voor soort inhoud er in het element staat. In een <h1> staat een belangrijke kop. In een <h2> staat een iets minder belangrijke kop. In een <p> staat een alinea. In een <table> staat een tabel (en geen lay-out, als het goed is!). Enzovoort.

Door het op de goede manier gebruiken van semantische elementen, kunnen zoekmachines, schermlezers, enzovoort de structuur van een pagina begrijpen. De spider van een zoekmachine is redelijk te vergelijken met een blinde. Het is dus ook in je eigen belang om semantische elementen zo goed mogelijk te gebruiken. Een site die toegankelijk is voor mensen met een handicap, is in de regel ook goed te verwerken door een zoekmachine en maakt dus een grotere kans gevonden en bezocht te worden.

Als het goed is, wordt het uiterlijk van de pagina bepaald met behulp van css. Het uiterlijk staat hierdoor (vrijwel) los van de semantische inhoud van de pagina. Met behulp van css kun je een <h1> heel klein weergeven en een <h6> heel groot, terwijl schermlezers, zoekmachines, en dergelijke nog steeds weten dat de <h1> een belangrijke kop is.

Slechts enkele elementen, zoals <div> en <span>, hebben geen semantische betekenis. Daardoor zijn deze elementen uitstekend geschikt om met behulp van css het uiterlijk van de pagina aan te passen: de semantische betekenis verandert niet, maar het uiterlijk wel. Voor een schermlezer of zoekmachine verandert er (vrijwel) niets, voor de gemiddelde bezoeker krijgt het door de css een heel ander uiterlijk.

(De derde laag, naast html voor de inhoud en css voor het uiterlijk, is JavaScript. Die zorgt voor de interactie tussen site en bezoeker. De min of meer strikte scheiding tussen css en html aan de ene kant en JavaScript aan de andere kant is met de komst van css3 en html5 veel vager geworden. Je kunt nu bijvoorbeeld ook met css dingen langzaam verplaatsen en met html deels de invoer in formulieren controleren.)

Html5 heeft een aantal nieuwe elementen, die speciaal zijn bedoeld om de opbouw van een pagina aan te geven. In dit voorbeeld worden hiervan <header> en <main> gebruikt. Beide gedragen zich als een gewone <div>, maar dan een <div> met een semantische betekenis. Hierdoor kunnen schermlezers, zoekmachines, en dergelijke beter zien, hoe de pagina is samengesteld.

<header>

Bedoeld om een header in te zetten.

Een <header> mag vaker op één pagina worden gebruikt. De <header> hoort altijd bij het element, waar de <header> in staat. In dit voorbeeld wordt maar één <header> gebruikt, waarvan de ouder <body> is. Die <header> is dus de <header> voor <body>, voor de hele pagina.

<main>

Hierbinnen staat de belangrijkste inhoud van de pagina (in dit voorbeeld is dat voornamelijk Latijnse flauwekultekst).

Met behulp van dit soort nieuwe semantische elementen kan bijvoorbeeld een schermlezer in één keer een heel menu passeren en gelijk naar de echte inhoud gaan. Alleen hadden deze nieuwe elementen tot voor kort één probleem: ze hadden in de praktijk nog weinig nut, omdat schermlezers en dergelijke ze nog niet herkenden. Daarom werd een zogenaamde WAI-ARIA-code toegevoegd aan deze elementen. Dat is een al veel langer bestaande code, die schermlezers en dergelijke wel herkennen. Voor <main> ziet dat er zo uit:

<main role="main">

Inmiddels is dit behoorlijk veranderd. Het advies is nu om deze speciale toevoeging niet meer te gebruiken, omdat de meeste schermlezers en dergelijke dit soort nieuwe elementen inmiddels herkennen.

WAI-ARIA-codes

WAI-ARIA wordt vaak ingekort tot ARIA. Voluit betekent het Web Accessibility Initiative – Accessible Rich Internet Applications.

Er worden in dit voorbeeld twee WAI-ARIA-codes gebruikt: aria-label en aria-hidden.

aria-label

Dit is de link, waarmee het menu zichtbaar wordt gemaakt:

<a id="open" href="#nav" aria-label="Open menu">≡</a>

Het teken ≡, het ’hamburger’-symbool, wordt vaak gebruikt om een verborgen menu mee aan te geven. (Persoonlijk vind ik dat volstrekt onduidelijk, en vele onderzoeken bevestigen dat, vandaar dat in het voorbeeld onder dat symbool ook nog ’Menu’ staat.)

In werkelijkheid is dit hamburger-symbool een wiskundig symbool met de welluidende naam ’identical to’. Een schermlezer zal dit symbool dan ook met die naam voorlezen of, als de schermlezer het symbool niet herkent, negeren.

Door het gebruik van aria-label="Open menu" wordt de gewone tekst in de link (dat is hier alleen dat symbool) niet voorgelezen, maar vervangen door de tekst achter aria-label.

Voor de beide links met de sluitknoppen in het menu werkt het hetzelfde:

<li><a class="sluit" href="#_" aria-label="Sluit en skip menu">X</a></li>

<a class="sluit" href="#_" aria-label="Einde menu bereikt. Sluit menu">X</a>

In beide gevallen wordt de letter ’X’ uit de links niet voorgelezen, maar vervangen door de tekst achter aria-label.

aria-hidden

Met behulp van aria-hidden="true" kan een deel van de code worden verborgen voor schermlezers en dergelijke, zodat dit niet wordt voorgelezen. Op de normale weergave op het scherm heeft dit verder geen enkele invloed.

Onder het symbool, waarmee het menu kan worden geopend, staat ook nog het woord ’Menu’. Dit woord zit niet in de link zelf, omdat bij hoveren over of focus van de link de tekst in de link vet wordt. Daardoor zou ’Menu’ net te breed worden. Door het in een <span> buiten de eigenlijke link te zetten, wordt dat voorkomen.

Hierboven bij aria-label is voor schermlezers al de tekst ’Open menu’ opgegeven om voor te lezen. Als het woord ’Menu’ niet verborgen zou worden, zou een schermlezer ’Open menu menu’ voorlezen. Daarom wordt het woord ’Menu’ in de <span> voor schermlezers verborgen:

<span aria-hidden="true">Menu</span>

Tabindex en Tab-toets

Links, invoervelden in formulieren, en dergelijke kunnen met behulp van de Tab-toets (of een soortgelijke toets) één voor één worden bezocht, in de volgorde waarin ze in de html voorkomen. Shift+Tab-toets keert de volgorde van de Tab-toets om. Dit is een belangrijk hulpmiddel voor mensen die om een of andere reden de muis niet kunnen of willen gebruiken. (En het is vaak ook veel sneller dan de muis, vooral in formulieren.)

In sommige browsers en/of besturingssystemen is dit vreemd genoeg standaard uitgeschakeld en is een zoektocht in de instellingen nodig om dit aan te zetten. Maar gebruikers van de Tab-toets zullen dit al hebben gedaan.

Als je met behulp van de Tab-toets een element hebt bereikt, heeft dit ’focus’: als het een link is en je drukt op Enter, wordt de link gevolgd. Bij een tekstveld kun je tekst gaan invoeren. Enzovoort.

De Tab-toets volgt normaal genomen de volgorde van de elementen in de html. Het maakt niet uit, in welke volgorde ze op het scherm staan. Als je met behulp van css de elementen van plaats verwisselt op het scherm, wordt toch gewoon de volgorde in de html gevolgd.

De volgorde van de Tab-toets kan worden veranderd met behulp van het tabindex-attribuut: <div tabindex="3">. Deze <div> zal nu als derde worden bezocht, ook al krijgt een simpele <div> normaal genomen nooit bezoek van de Tab-toets.

Normaal genomen is het gebruik van een tabindex niet nodig. Het is zeker niet bedoeld om de bezoeker als een kangoeroe op een hindernisbaan van onder via links over rechts naar boven te laten springen. Maar soms kan het handig zijn voor kleinere correcties, als de normale volgorde in de html niet optimaal is. Of om een element bereikbaar te maken voor de Tab-toets, zoals de hierboven genoemde <div>.

Schermlezers blijven altijd de volgorde van de html volgen, dus als de tabindex sterk afwijkt van de volgorde in de html, kan dat behoorlijk verwarrend zijn.

Omdat in dit voorbeeld alleen gebruik wordt gemaakt van links, zijn geen aanpassingen nodig voor de tabindex.

De eerste tab geeft de link om het menu te openen focus. Omdat het menu is verborgen, passeert een volgende tab het menu en gaat rechtstreeks naar de link ’Dit is een extra link’ in de tekst.

Als je echter na de eerste tab, als de link om het menu te openen focus heeft, op Enter drukt, wordt de link naar het menu gevolgd. Omdat nu de pseudo-class :target wordt geactiveerd, wordt het menu zichtbaar. Volgende tabs gaan nu naar de links binnen het menu, omdat dit nu zichtbaar is.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

De tekst in dit hoofdstukje is een algemene tekst, die voor elke pagina geldt. Eventueel specifiek voor dit voorbeeld geldende problemen en eventuele aanpassingen om die problemen te voorkomen staan bij Bekende problemen (en oplossingen).

Toegankelijkheid (in het Engels ’accessibility’) is belangrijk voor bijvoorbeeld blinden die een schermlezer gebruiken, of voor motorisch gehandicapte mensen die moeite hebben met het bedienen van een muis. Een spider van een zoekmachine (dat is het programmaatje dat de site indexeert voor de zoekmachine) is te vergelijken met een blinde. Als je je site goed toegankelijk maakt voor gehandicapten, is dat gelijk goed voor een hogere plaats in een zoekmachine. Dus als je ’t niet uit sociale motieven wilt doen, kun je ’t uit egoïstische motieven doen.

(Op die plaats in de zoekmachine heb je maar beperkt invloed. De toegankelijkheid van je site is maar één van de factoren, maar zeker niet onbelangrijk.)

Als je bij het maken van je site al rekening houdt met toegankelijkheid, is dat nauwelijks extra werk. ’t Is ongeveer te vergelijken met inbraakbescherming: doe dat bij ’n nieuw huis en ’t is nauwelijks extra werk, doe ’t bij ’n bestaand huis en ’t is al snel ’n enorme klus.

Enkele tips die helpen bij toegankelijkheid:

Getest in

Laatst gecontroleerd op 3 juni 2018.

Onder dit kopje staat alleen maar, hoe en waarin is getest. Alle eventuele problemen, ook die met betrekking tot zoomen, lettergroottes, toegankelijkheid, uitstaan van JavaScript en/of css, enzovoort staan iets hieronder bij Bekende problemen (en oplossingen). Het is belangrijk dat deel te lezen, want uit een test kan ook prima blijken dat iets totaal niet werkt!

Opmerking over Opera:

De uitvoeringen van Opera jongen als de konijnen. Voor Android bijvoorbeeld zijn er op dit moment al vijf verschillende uitvoeringen. Er wordt alleen in de hieronder vermelde uitvoering getest, want dit is niet meer bij te benen. Op Windows 10 Mobile wordt Opera Mini niet getest, omdat die bij installeren gelijk advertenties begon te spuiten, die niet waren te sluiten.

Dit voorbeeld is getest op de volgende systemen:

Desktopcomputers

Windows 7 (1280 x 1024 px, resolution 96 dpi):
Firefox, UC Browser, Google Chrome, Opera en Internet Explorer 11, in grotere en kleinere browservensters.

OS X 10.11.6 (’El Capitan’) (1680 x 1050 px, resolution: 96: dpi, device-pixel-ratio: 1):
Firefox, Safari, Opera en Google Chrome, in grotere en kleinere browservensters.

Linux (Kubuntu 14.04 LTS, ’Trusty Tahr’) (1280 x 1024 px, resolution: 96 dpi):
Firefox, Opera en Google Chrome, in grotere en kleinere browservensters.

Laptops

Windows 8.1 (1366 x 768 px, resolution: 96 dpi):
Bureaublad-versie: Firefox, UC Browser, Google Chrome, Opera en Internet Explorer 11, in grotere en kleinere browservensters.
Startscherm-versie: Internet Explorer 11.

Windows 10 (1600 x 900 px, resolution: 96 dpi):
Firefox, UC Browser, Google Chrome, Opera, Internet Explorer 11 en Edge, in grotere en kleinere browservensters.

Tablets

iPad met iOS 9.3.5 (1024 x768 px, device-pixel-ratio: 1):
Safari, Chrome for iOS, UC Browser, Firefox (alle portret en landschap).
Opera Mini (Opera Turbo) portret en landschap.

iPad met iOS 11.4 (2048 x 1536 px, device-pixel-ratio: 2 (’retina’):
Safari, Chrome for iOS, Firefox, Microsoft Edge (alle portret en landschap).
Opera Mini (Opera Turbo) portret en landschap.

Android 4.4.2 (’Kitkat’) (1280 x 800 px, resolution: 96 dpi):
Android browser, UC Browser, Firefox en Chrome (alle portret en landschap).
Opera Mini (besparingen uitgeschakeld) portret en landschap.

Android 4.4.2 (’Kitkat’) (2560 x 1600 px, resolution: 192 dpi):
Android browser, UC Browser, Firefox en Chrome (alle portret en landschap).
pera Mini (besparingen uitgeschakeld) portret en landschap.

Android 6.0 (’Marshmallow’) (1920 x 1200 px, resolution: 144 dpi):
Dolphin, Samsung Internet, UC Browser, Firefox en Chrome (alle portret en landschap).
Opera Mini (besparingen uitgeschakeld) portret en landschap.

Android 7.0 (’Nougat’) (1920 x 1200 px, resolution: 144 dpi):
Dolphin, Samsung Internet, UC Browser, Firefox, Microsoft Edge en Chrome (alle portret en landschap).
Opera Mini (besparingen uitgeschakeld) portret en landschap.

Smartphones

Windows 10 Mobile (1280 x 720 px, resolution: 192 dpi):
Edge en UC browser (portret en landschap).

Android 4.1.2 (’Jelly Bean’) (800 x 480 px, resolution: 144 dpi):
Chrome, Android browser, UC Browser en Firefox (alle portret en landschap).
Opera Mini (besparingen uitgeschakeld) portret en landschap.

Android 7.0 (’Nougat’) (1280 x 720 px, resolution: 192 dpi):
Dolphin, Samsung Internet, UC Browser, Firefox, Microsoft Edge en Chrome (alle portret en landschap).
Opera Mini (besparingen uitgeschakeld) portret en landschap.

Er is op de aan het begin van dit hoofdstukje genoemde controledatum getest in de meest recente versie van de browser, die op het betreffende besturingssysteem kon draaien. Het aantal geteste browsers en systemen is al tamelijk fors, en als ook nog rekening gehouden moet worden met (zwaar) verouderde browsers, is het gewoon niet meer te doen. Surfen met een verouderde browser is trouwens vragen om ellende, want updates van browsers hebben heel vaak met beveiligingsproblemen te maken.

In- en uitzoomen en – voor zover de browser dat kan – een kleinere en grotere letter zijn ook getest. Er is ingezoomd en vergroot tot zover de browser kan, maar niet verder dan 200%.

Er is getest met behulp van muis en toetsenbord, behalve op iOS, Android en Windows 10 Mobile, waar een touchscreen is gebruikt. Op Windows 8.1 en 10 is getest met touchscreen, touchpad, toetsenbord, muis, en – waar dat zinvol was – op een combinatie daarvan.

Als JavaScript is gebruikt, is op de desktop ook getest zonder JavaScript. (Op iOS, Android en Windows 10 Mobile is niet getest zonder JavaScript, omdat je JavaScript in een toenemend aantal mobiele browsers niet uit kunt zetten. Bovendien is een mobiel apparaat zonder JavaScript niet veel meer dan een duur en groot uitgevallen horloge.) Ook is getest zonder css en – als afbeeldingen worden gebruikt – zonder afbeeldingen.

Schermlezers en dergelijke.

Naast deze ’gewone’ browsers is ook getest in Lynx, WebbIE, NVDA, TalkBack, VoiceOver, ChromeVox en Verteller.

Lynx is een browser die alleen tekst laat zien en geen css gebruikt. Er is getest op Linux.

WebbIE. is een browser die gericht is op mensen met een handicap. Er is getest op Windows7. (LET OP: kies voor ’Install WebbIE 4 Web Browser Now’. Dat is – op het moment van schrijven – de een na bovenste knop. Als je voor de bovenste download kiest, krijg je ’n hele berg hulpprogramma’s erbij, waar je voor het testen niets aan hebt.)

NVDA is een schermlezer, zoals die door blinden wordt gebruikt. Er is getest op Windows 7 en Windows 10 in combinatie met Firefox.

(Althans: dat was de bedoeling. Maar sinds Firefox de browsers radicaal heeft verbeterd, laat de combinatie Firefox/NVDA op Windows 7 de browser voortdurend crashen. Daarom is op Windows 7 getest in combinatie met Google Chrome.)

TalkBack is een in Android ingebouwde schermlezer. Er is getest in combinatie met Chrome op Android 4.4,2, 6.0 en 7.0.

VoiceOver is een in iOS en OS X ingebouwde schermlezer. Er is getest in combinatie met Safari op iOS (9.3.5 en 11.2.6) en OS X 10.11.6.

ChromeVox is een schermlezer in de vorm van een extensie bij Google Chrome. Er is getest op een systeem met Kubuntu Linux 14.04.

Verteller (Narrator) is een in Windows 10 ingebouwde schermlezer. Er is getest in combinatie met Edge.

(Voor de bovenstaande programma’s zijn links naar sites met uitleg en dergelijke te vinden op de pagina met links onder Toegankelijkheid → Blinden en slechtzienden.)

Als het voorbeeld in deze programma’s toegankelijk is, zou het in principe toegankelijk moeten zijn in alle aangepaste browsers en dergelijke. En dus ook voor zoekmachines, want een zoekmachine is redelijk vergelijkbaar met een blinde.

Eventuele problemen in schermlezers (en eventuele aanpassingen om die te voorkomen) staan iets hieronder bij Bekende problemen (en oplossingen).

Alleen op de hierboven genoemde systemen en browsers is getest. Er is dus niet getest op bijvoorbeeld ’n Blackberry. Er is een kans dat dit voorbeeld niet (volledig) werkt op niet-geteste systemen en apparaten. Om het wel (volledig) werkend te krijgen, zul je soms (kleine) wijzigingen en/of (kleine) aanvullingen moeten aanbrengen, bijvoorbeeld met JavaScript.

Er is ook geen enkele garantie dat iets werkt in een andere tablet of smartphone dan hierboven genoemd, omdat fabrikanten in principe de software kunnen veranderen. Dit is anders dan op de desktop, waar browsers altijd (vrijwel) hetzelfde werken, zelfs op verschillende besturingssystemen. Iets wat in Samsung Internet op Android werkt, zal in de regel overal werken in die browser, maar een garantie is er niet. De enige garantie is het daadwerkelijk testen op een fysiek apparaat. En aangezien er duizenden mobiele apparaten zijn, is daar geen beginnen aan.

De html is gevalideerd met de validator van w3c, de css ook. Als om een of andere reden niet volledig gevalideerd kon worden, wordt dat bij Bekende problemen (en oplossingen) vermeld.

Nieuwe browsers worden pas getest, als ze uit het bèta-stadium zijn. Anders is er ’n redelijke kans dat je tegen ’n bug zit te vechten, die voor de uiteindelijke versie nog gerepareerd wordt. Dit voorbeeld is alleen getest in de hierboven met name genoemde browsers. Vragen over niet-geteste browsers kunnen niet worden beantwoord, en het melden van fouten in niet-geteste browsers heeft ook geen enkel nut. (Melden van fouten, problemen, enzovoort in wel geteste browsers: graag! Dat kan op het forum.)

Bekende problemen (en oplossingen)

Waarop en hoe is getest, kun je gelijk hierboven vinden bij Getest in.

Als je hieronder geen oplossing vindt voor een probleem dat met dit voorbeeld te maken heeft, kun je op het forum proberen een oplossing te vinden voor je probleem. Om forumspam te voorkomen, moet je je helaas wel registreren, voordat je op het forum een probleem kunt aankaarten.

Bij toegankelijkheid is er vaak geen goed onderscheid te maken tussen oplossing en probleem. Zonder (heel simpele) aanpassingen heb je vaak ’n probleem, en omgekeerd. Daarom staan bij toegankelijkheid aanpassingen en problemen bij elkaar.

Voor zover van toepassing wordt eerst het ontbreken van JavaScript, css en/of afbeeldingen besproken. Vervolgens problemen en aanpassingen met betrekking tot toegankelijkheid voor specifieke groepen bezoekers, zoals zoomen en andere lettergrootte, Tab-toets, tekstbrowsers en schermlezers. Als laatste volgen algemene problemen in alle of in specifieke browsers.

Als in een onderdeel één of meer problemen worden besproken, staat in een rood kadertje een korte samenvatting daarvan. Bij een onderwerp over toegankelijkheid zijn er soms geen problemen, maar alleen aanpassingen. In dat geval staat in een groen kadertje ’Geen problemen’.

Zonder JavaScript

Probleem: alles werkt, maar tonen en verbergen van het menu wordt in de browsergeschiedenis opgeslagen.

Browsers slaan bezochte pagina’s op in de browsergeschiedenis. Met behulp van de Terug‑ en Vooruit-toets, of met toetscombinaties als Alt+← en Alt+→, kan door deze geschiedenis worden gebladerd.

Omdat het menu wordt getoond en verborgen met behulp van een link, worden ook deze links in de browsergeschiedenis opgeslagen. Als het menu is geopend en weer gesloten, en je gebruikt de Terug-toets of Alt+←, wordt het menu weer geopend. Want dat is de vorige gevolgde link.

Daarom wordt met behulp van JavaScript voorkomen dat links binnen de pagina worden opgeslagen in de browsergeschiedenis. Alle links naar een andere pagina worden gewoon opgeslagen, maar links naar ankers binnen de pagina met het voorbeeld niet. Omdat het menu wordt geopend en gesloten met dit soort links, worden deze links niet opgeslagen in de browsergeschiedenis.

Als JavaScript uitstaat, werkt alles nog gewoon. Alleen valt de browser dan terug op het standaardgedrag en wordt ook het openen en sluiten van het menu in de geschiedenis opgeslagen.

In Android browser, Opera en UC browser op Android 4.1.2 en 4.4.2 werkt dit script niet. In deze browsers worden bezochte links altijd in de geschiedenis opgeslagen.

Als je dit script wilt testen, moet dat online gebeuren, of je moet zelf een server installeren. Omdat kwaadwillenden dit soort scripts zouden kunnen misbruiken, werkt het in steeds meer browsers niet meer offline. (Iets meer hierover is te vinden bij Dit script manipuleert...)

Zonder css

Geen problemen.

Zonder css werkt alles, maar het uiterlijk is – uiteraard – volkomen anders.

Het menu staat boven de Latijnse tekst en is voortdurend zichtbaar. Bovendien zijn ook het teken ≡ en het daaronder staande ’Menu’ zichtbaar, en de twee letters ’X’ uit de sluitkruisjes. Die tekens en woorden zijn hier overbodig, maar kwaad kunnen ze verder niet.

Gebruikers Tab-toets

Geen problemen.

  • Omdat het menu wordt getoond en verborgen met behulp van doodgewone links, kan het met de Tab-toets worden geopend en gesloten.
  • Als het menu is gesloten, negeert de Tab-toets de links in het menu. Alleen als het menu is geopend, worden deze links door de Tab-toets bezocht.
  • Omdat het menu mogelijk per ongeluk wordt geopend, is bovenaan het menu ook een sluitmogelijkheid aangebracht. Hierdoor hoeven gebruikers van de Tab-toets niet eerst door tien links heen, voordat ze bij de sluitmogelijkheid onder het menu aankomen.
  • Op het scherm staan de twee sluitkruisjes links‑ en rechtsboven het menu. Bij gebruik van de Tab-toets wordt eerst het sluitkruisje linksboven bezocht, dan de tien externe links, en als laatste het sluitkruisje rechtsboven. Dit is de volgorde, zoals deze elementen in de html staan. Het lijkt ook de meest logische volgorde voor de Tab-toets, dus de volgorde is niet met tabindex aangepast.
  • Als een link ’focus’ heeft, kan deze worden gevolgd door het indrukken van Enter. De focus wordt in alle browsers aangegeven door een kadertje. Dit kadertje is hier verwijderd, omdat het in dit menu erg onduidelijk (en lelijk) is.

    Omdat het belangrijk is dat gebruikers van de Tab-toets weten, welke link focus heeft (en dus gevolgd kan worden door het indrukken van Enter), verkleurt de achtergrond van de link. Bovendien wordt de tekst in de link vet, zodat ook voor kleurenblinden duidelijk is, welke link focus heeft.

Tekstbrowsers

Geen problemen.

Lynx en WebbIE Tonen beide het menu en de tekst. Lynx toont de inhoud van aria-label niet, maar wel het teken ≡, ’Menu’ en twee keer de letter ’X’. WebbIE toont dat juist niet, maar wel de inhoud van aria-label.

Schermlezers

Geen problemen.

In alle geteste schermlezers is het menu te openen en te sluiten. Als het menu niet zichtbaar is, worden de links uit het menu niet voorgelezen. Als het menu wel zichtbaar is, worden de links wel voorgelezen.

Omdat voor het verbergen van het menu visibility; hidden; is gebruikt, negeren schermlezers het menu, als dit niet zichtbaar is.

Zoomen en lettergroottes

Probleem: bij inzoomen (vergroten) vallen soms wat lijntjes in het menu weg.

Bij inzoomen (vergroten) vallen soms wat lijntjes rondom de links in het menu weg. Dit heeft te maken met het afronden door browsers. Soms valt een lijntje weg, terwijl het bij een volgende vergroting weer verschijnt.

Alles werkt verder gewoon, zoals het hoort te werken.

Probleem: bij inzoomen (vergroten) blijven de balk bovenin en het menu op Android en Windows 10 Mobile vaak niet op de juiste plaats staan.

In de meeste browsers op Android en Windows 10 Mobile blijven de balk bovenin en het menu bij inzoomen (vergroten) niet op de juiste plaatst staan. Een lijstje met de precieze afwijkingen voor elke browser is niet zo zinvol, want elke browser heeft eigen afwijkingen. Bovendien heeft dezelfde browser op ’n andere versie van Android vaak weer ’n andere afwijking.

Maar het belangrijkste: menu en dergelijke zijn gewoon bereikbaar, maar je moet soms even naar de juiste plaats terug scrollen.

Probleem: op de site staan bij een andere lettergrootte ≡ en ’Menu’ niet helemaal op de juiste hoogte.

Alleen op de site: bij een andere lettergrootte staan ≡ en ’Menu’ niet helemaal op de juiste hoogte. Op de site staan twee menu’s onder elkaar: het menu voor de site en het menu voor het voorbeeld. Hierdoor is dit tamelijk lastig te corrigeren. Normaal genomen zul je niet op deze manier twee menu’s onder elkaar hebben staan.

Omdat dit verder niet van belang is voor het voorbeeld, is hier verder niets aan gedaan.

Firefox op Android

Probleem: het sluitkruisje (de ’X’) staat iets te hoog.

Firefox op Android heeft regelmatig nogal wat moeite met de juiste regelhoogte. Vermoedelijk is dat ook hier de oorzaak. Alles werkt gewoon, maar het ziet er iets minder netjes uit.

Overigens kan dat sluitkruisje probleemloos door een andere constructie worden vervangen, waardoor je dit desgewenst kunt oplossen.

UC browser op iOS

Probleem: de balk bovenin en het menu scrollen mee.

UC browser op iOS ondersteunt een fixed positie niet. Hierdoor scrollen de balk bovenin en het menu mee met de pagina. Alles werkt gewoon, maar mogelijk moet je terug naar boven scrollen om de links in het menu te kunnen gebruiken.

(Dit is trouwens wel opmerkelijk, want Apple verplicht andere browsers op iOS om de weergave-machine van Safari te gebruiken.)

Opera Mini op iOS en Android

Probleem: als je ’Menu’ aanraakt in plaats van het ≡-teken, opent het menu niet.

Het woordje ’Menu’ staat in een <span> buiten de link, die het menu opent. Als je het woordje ’Menu’ aanraakt of -klikt, opent het menu daardoor niet. Om dit op te lossen wordt pointer-events: none; gebruikt. Nu wordt de aanraking of klik doorgegeven aan de onder de <span> zittende link en opent het menu ook bij aanraken of -klikken van ’Menu’.

Opera Mini ondersteunt pointer-events niet. Een probleem is dit echter niet, want het woordje ’Menu’ is tamelijk klein, dus je moet echt verrekte goed mikken om precies dat woordje te raken en niet het ≡-teken.

Alle browsers

Probleem: links naar een anker komen te hoog te staan.

In het voorbeeld speelt dit probleem niet, omdat er geen links binnen de pagina zijn.

Een link naar een anker is een link naar een plaats in de pagina. Dat kan vanaf een andere pagina, maar ook binnen de pagina:

<a href="#anker">Naar anker</a>

<p id="anker">En ik ben het anker</p>

Bij klikken op ’Naar anker’ hoort p#anker bovenaan het venster van de browser te worden gezet. En dat is ook precies, wat er gebeurt. Met andere woorden: het anker werkt gewoon, zoals het hoort te werken.

Alleen staat bovenaan het browservenster een vaste <div>, de grijze balk. Het anker komt wel netjes bovenaan het venster te staan, maar verdwijnt onder de grijze balk. Dit is heel simpel op te lossen.

In het voorbeeld is de <div> 2 rem hoog. Bij de ankers, zoals de p#anker hierboven, moet je de volgende css toevoegen:

#anker {

margin-top: -2rem;

padding-top: 2rem;

}

De negatieve marge zet p#anker 2 rem naar boven. Alleen die marge heeft geen invloed op het anker: bij klikken op ’Naar anker’ komt p#anker nog steeds bovenaan het browservenster, en dus onder de header, te staan. Bovendien staat p#anker nu over het erboven zittende element heen, wat het lezen er niet makkelijker op maakt.

De negatieve marge heeft de hele p#anker 2 rem hoger gezet.

De padding van 2 rem aan de bovenkant zet de inhoud van p#anker weer 2 rem omlaag. Niet p#anker zelf. p#anker staat dus nog steeds over het element erboven heen, en onder de header. Maar de inhoud van p#anker staat nu weer 2 rem lager, en daarmee onder de header, en onder de erboven zittende elementen. Zoals vaker bij html en css word je belazerd, waar je bij staat, maar voor het oog ziet het er goed uit.

Als je ’n achtergrondkleur of zoiets in het anker gebruikt, zul je daar nog even mee moeten stoeien. Als de lettergrootte van het anker anders is dan die van de header, moet je het aantal rem mogelijk aanpassen. Maar in principe is dit altijd op te lossen met deze truc.

Probleem: bij scrollen met Spatiebalk, Shift+Spatiebalk, PgDn en PgUp wordt te veel gescrold.

Sommige mensen gebruiken niet de muis, maar de spatiebalk, Shift+Spatiebalk, PgDn en PgUp om de pagina steeds een browservenster omhoog of omlaag te scrollen. Dat kan in dit voorbeeld ook. Alleen is er dan één probleem: de pagina wordt inderdaad netjes de hoogte van een venster omlaag of omhoog gescrold. Maar dat is voor <main>, waar het eigenlijk om gaat bij scrollen, te veel. Boven <main> staat nog een grijze balk, en als <main> een volledig venster scrolt, valt daardoor een klein stukje van de tekst in <main> weg.

In dit voorbeeld speelt dit probleem niet, omdat browsers wat speling nemen: bij omlaag scrollen worden de onderste (ongeveer) drie regels bovenaan het browser nogmaals getoond. Maar als de grijze balk bovenaan het browservenster hoger zou zijn, kan dit een probleem zijn.

Dit is simpel op te lossen met een beetje JavaScript:

<script> function corrigeerScrollen(e) { var header = document.getElementsByTagName("header")[0].offsetHeight, key = e.which;
if ((key === 33) || (e.shiftKey && key === 32)) { e.preventDefault(); window.scrollBy(0, -(window.innerHeight - header – 50)); } else if (key === 34 || key === 32) { e.preventDefault(); window.scrollBy(0, window.innerHeight - header – 50); } }
document.addEventListener("keydown", corrigeerScrollen); </script>

Dit script stelt eerst de hoogte van het fixed gepositioneerde element aan de bovenkant van de pagina vast. Dat gebeurt in de vierde regel, waarbij er in dit script van wordt uitgegaan dat het fixed gepositioneerde element de id ’header’ heeft. Bij een andere id moet dit uiteraard worden aangepast. (Je kunt ook naar andere dingen dan een id zoeken. Met wat kleine aanpassingen kan ook worden gezocht naar een element, een class, enzovoort.)

Als Spatiebalk, Shift+Spatiebalk, PgDn of PgUp zijn ingedrukt, wordt de pagina op de normale manier gescrold, maar de hoogte van het fixed gepositioneerde element wordt van de te scrollen afstand afgetrokken. (En nog 50 px extra, zodat het standaardgedrag zoveel mogelijk wordt benaderd.)

Dit script kun je voor helemaal onderaan gelijk voor </body> zetten of, als het op meer pagina’s wordt gebruikt, installeren als extern script.

Wijzigingen

Alleen grotere wijzigingen worden hier vermeld, geen dingen als een link die is geüpdatet.

:

Nieuw opgenomen.

Inhoud van de download en licenties

De inhoud van deze download kan vrij worden gebruikt, met drie beperkingen:

* Sommige onderdelen die van ’n andere site of zo afkomstig zijn, vallen mogelijk onder een of andere licentie. Dat is hieronder bij het betreffende onderdeel te vinden.

* Je gebruikt het materiaal uit deze download volledig op eigen risico. Het kan prima zijn dat er fouten in de hier verstrekte code en dergelijke zitten. Voor eventuele schade die door gebruik van materiaal uit deze download ontstaat, in welke vorm dan ook, zijn www.css-voorbeelden.nl en medewerkers daarvan op geen enkele manier verantwoordelijk.

* Dit voorbeeld (en de bijbehorende uitleg en dergelijke) wordt regelmatig bijgewerkt. Het is daarom niet toegestaan dit voorbeeld (en de bijbehorende uitleg en dergelijke) op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat voorbeeld, uitleg, en dergelijke afkomstig zijn van www.css-voorbeelden.nl en dat daar altijd de nieuwste versie is te vinden. Dit is om te voorkomen dat er verouderde versies worden verspreid.

Een link naar www.css-voorbeelden.nl wordt trouwens altijd op prijs gesteld.

menu-125-dl.html: de pagina met het voorbeeld.

menu-125.pdf: deze uitleg (aangepast aan de inhoud van de download).

menu-125-inhoud-download-en-licenties.txt: een kopie van de tekst onder dit kopje (Inhoud van de download en licenties).

125-css-dl:

menu-125-dl.css: stylesheet voor menu-125-dl.html.

menu-125-hulp-dl.css: stylesheet voor de elf hulppagina’s achter de links in menu en tekst.

125-files-dl:

De elf hulppagina’s achter de links in het voorbeeld. (pagina-1-dl.html tot en met pagina‑10-dl.html horen bij de links in het menu, pagina-11-dl.html hoort bij de link in de Latijnse tekst.)

HTML

De code is geschreven in een afwijkende lettersoort. De code die te maken heeft met de basis van dit voorbeeld (essentiële code), is in de hele uitleg blauw gekleurd. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles in een gewone letter vanwege de leesbaarheid.)

In de html hieronder wordt alleen de html besproken, waarover iets meer is te vertellen. Een <h1> bijvoorbeeld wordt in de regel niet genoemd, omdat daarover weinig interessants valt te melden. (Als bijvoorbeeld het uiterlijk van de <h1> wordt aangepast met behulp van css, staat dat verderop bij de bespreking van de css.)

Zaken als een doctype en charset hebben soms wat voor veel mensen onbekende effecten, dus daarover wordt hieronder wel een en ander geschreven.

<!DOCTYPE html>

Een document moet met een doctype beginnen om weergaveverschillen tussen browsers te voorkomen. Zonder doctype is de kans op verschillende (en soms volkomen verkeerde) weergave tussen verschillende browsers heel erg groot.

Geldige doctypes vind je op www.w3.org/QA/2002/04/valid-dtd-list.

Gebruik het volledige doctype, inclusief de eventuele url, anders werkt het niet goed.

Het hier gebruikte doctype is dat van html5. Dit kan zonder enig probleem worden gebruikt: het werkt zelfs in Internet Explorer 6.

<html lang="nl">

De toevoeging lang="nl" bij <html> geeft aan dat de pagina in het Nederlands is. De taal is van belang voor schermlezers, automatisch afbreken, automatisch genereren van aanhalingstekens, juist gebruik van decimale punt of komma, en dergelijke.

<meta charset="utf-8">

Zorgt dat de browser letters met accenten en dergelijke goed kan weergeven.

utf-8 is de beste charset (tekenset), omdat deze alle talen van de wereld (en nog heel veel andere extra tekens) bestrijkt, maar toch niet meer ruimte inneemt voor de code, dan nodig is. Als je utf-8 gebruikt, hoef je veel minder entiteiten (&auml; en dergelijke) te gebruiken, maar kun je bijvoorbeeld gewoon ä gebruiken.

Deze regel moet zo hoog mogelijk komen te staan, als eerste regel binnen de <head>, omdat hij anders door sommige browsers niet wordt gelezen.

In html hoeft deze regel niet langer te zijn, dan wat hier staat.

<meta name="viewport" content="width=device-width, initial-scale=1">

Mobiele apparaten variëren enorm in grootte. En dat is een probleem. Sites waren, in ieder geval tot enkele jaren geleden, gemaakt voor desktopbrowsers. En die hebben, in vergelijking met bijvoorbeeld een smartphone, heel brede browservensters. Hoe moet je op ’n smartphone een pagina weergeven, die is gemaakt voor de breedte van een desktop? Je kunt natuurlijk wachten tot álle sites zijn omgebouwd voor smartphones, tablets, enzovoort, maar dan moet je waarschijnlijk heel erg lang wachten.

Mobiele browsers gokken erop dat een pagina een bepaalde breedte heeft. Safari voor mobiel bijvoorbeeld gaat ervan uit dat een pagina 980 px breed is. De pagina wordt vervolgens zoveel versmald dat hij binnen het venster van het apparaat past. Op een iPhone wordt de pagina dus veel smaller dan op een iPad. Vervolgens kan de gebruiker inzoomen op het deel van de pagina dat hij of zij wil zien.

Dit betekent ook dat bij het openen van de pagina de tekst meestal heel erg klein wordt weergegeven. (Meestal, want niet alle browsers en apparaten doen het op dezelfde manier.) Niet erg fraai, maar bedenk maar ’ns ’n betere oplossing voor bestaande sites.

Nieuwe sites of pagina’s kunnen echter wel rekening houden met de veel kleinere vensters van mobiele apparaten. In dit voorbeeld bijvoorbeeld wordt de pagina nooit breder dan het venster.

Maar die stomme mobiele browser weet dat niet, dus die gaat ervan uit dat ook deze pagina 980 px breed is, en verkleint die dan. Dat is ongeveer even behulpzaam als de gedienstige kelner die behulpzaam de stoel naar achteren trekt, net als jij wilt gaan zitten.

Om de door de browser aangeboden hulp vriendelijk maar beslist te weigeren, wordt deze tag gebruikt. Hiermee geef je aan dat de pagina is geoptimaliseerd voor mobiele apparaten.

Een iPad in portretstand bijvoorbeeld is 768 px breed. De kreet width=device-width zegt tegen de mobiele browser dat de breedte van de weer te geven pagina gelijk is aan de breedte van het apparaat. Voor een iPad in portretstand dus 768 px.

Er staat nog een tweede deel in de tag: initial-scale=1. Sommige mobiele apparaten zoomen een pagina gelijk in of uit. Ook weer in een poging behulpzaam te zijn. Ook dat is hier niet nodig. Er is ook een instructie om zoomen helemaal onmogelijk te maken, maar die wordt niet gebruikt. De bezoeker kan zelf nog gewoon zoomen, wat belangrijk is voor mensen die wat slechter zien.

<a id="open" href="#nav" aria-label="Open menu">≡</a>

In deze link zit het teken ≡, waarmee het menu kan worden geopend. Dit teken is eigenlijk een wiskundig symbool met de naam ’identical to’. Schermlezers zouden ’identical to’ voorlezen, wat een ietwat vreemde tekst is voor een link, waarmee je ’n menu opent. Om dat te voorkomen wordt aan de link de WAI-ARIA-code aria-label toegevoegd met daarin de te tekst ’Open menu’. Nu wordt door schermlezers de tekst in de link (hier alleen het teken ≡) genegeerd en in plaats daarvan ’Open menu’ voorgelezen.

(Niet alle schermlezers herkennen het symbool. In dat geval is er een kans dat helemaal niets wordt voorgelezen, of de inhoud van href ’#nav’. Wat niet ook niet echt geweldig is.)

Voor de weergave op het scherm maakt dit verder niets uit, alleen schermlezers gebruiken het aria-label.

<span aria-hidden="true">Menu</span>

In deze <span> zit het woordje ’Menu’ dat onder het teken ≡ staat. Normaal genomen zou je dit woordje ook binnen de link die het menu opent zetten. Maar bij hoveren over de link wordt de inhoud ervan vet, en daardoor wordt dit woordje net te breed.

Door ’Menu’ in een <span> buiten de link te zetten wordt het niet vet bij hoveren over de link.

Hier gelijk boven is met de WAI-ARIA-code aria-label al de tekst ’Open menu’ opgegeven voor schermlezers. Daarom wordt met behulp van aria-hidden het woordje ’Menu’ hier verborgen, want anders zouden schermlezers ’Open menu menu’ voorlezen.

<nav id="nav">

De <nav> heeft een id nodig, omdat in het menu wordt geopend met behulp van een link naar de <nav>. En zo’n link binnen de pagina werkt alleen, als het doel-element een id heeft.

<li><a class="sluit" href="#_" aria-label="Sluit en skip menu">X</a></li>

De ’X’ in deze link is het grote rode sluitkruisje linksboven het menu. Schermlezers zouden de letter ’X’ voorlezen, wat niet echt duidelijk is. Om dat te voorkomen wordt aan de link de WAI-ARIA-code aria-label toegevoegd met daarin de te tekst ’Sluit en skip menu’. Nu wordt door schermlezers de tekst in de link (hier lleen de letter ’X’) genegeerd en in plaats daarvan ’Sluit en skip menu’ voorgelezen.

Voor de weergave op het scherm maakt dit verder niets uit, alleen schermlezers gebruiken het aria-label.

Als bestemming voor de link wordt ’#_’ opgegeven. Een ’#’ aan het begin van de bestemming geeft aan dat de link binnen de pagina zit. Achter de ’#’ zit dan normaal genomen de id van het element, waar de link naar toe leidt (het ’anker’). In dit geval zou dat ’_’ zijn.

Op deze pagina is helemaal geen element met een id=”_” aanwezig, dus de link leidt nergens heen. Maar het toevoegen van ’_’ aan de ’#’ voorkomt dat de pagina terug naar boven springt, wat wel zou gebeuren, als de link als doel alleen ’#’ heeft.

Je zou ook ’#-ik-ben-verliefd-op-je-zus’ als doel kunnen nemen, als het maar een niet bestaand doel is.

(Er is een andere manier om een link uit te schakelen met behulp van preventDefault() in JavaScript. Dat schakelt de link echter helemaal uit, waardoor het menu niet meer zou sluiten. Bovendien is deze manier met het niet bestaande anker ’#_’ uiterst simpel en effectief.)

<a class="sluit" href="#_" aria-label="Einde menu bereikt. Sluit menu">X</a>

In deze link zit de ’X’ van het sluitkruisje rechtsboven het menu. Het verhaal voor deze link is precies hetzelfde als voor de link gelijk hierboven, alleen is de tekst bij aria-label iets anders.

Deze link is, in tegenstelling tot de link met het sluitkruisje hier gelijk boven, niet binnen de <ul> met de rest van het menu gezet. Sommige schermlezers kunnen in één keer de rest van een <ul> passeren en naar het eerste element na </ul> gaan. Deze schermlezers zouden hierdoor de link om het menu te sluiten missen, als deze binnen de <ul> zou staan.

Door dit tweede sluitkruisje onder </ul> te zetten, wordt dit voorkomen.

<main lang="la">

Als opvultekst is Latijnse tekst gebruikt. De taal is van belang voor schermlezers, automatisch afbreken, automatisch genereren van aanhalingstekens, juist gebruik van decimale punt of komma, en dergelijke. Daarom wordt met lang="la" aangegeven dat de tekst binnen deze <p> Latijn is. (En tot mijn niet geringe verbazing blijkt een schermlezer als NVDA dat dan, voor zover ik dat kan beoordelen, op de juiste manier voor te lezen.)

<p lang="nl"><a href="125-files-dl/pagina-11-dl.html">Dit is een extra link</a></p>

Deze <p> zit binnen de hier gelijk boven beschreven <main>. Bij die <main> is opgegeven dat de taal Latijn is. Die taal geldt voor alle nakomelingen van <main>. De taal binnen deze <p> is echter Nederlands, daarom wordt dat met lang="nl" voor deze <p> (en alles daarbinnen) weer even teruggedraaid.

CSS

De code is geschreven in een afwijkende lettersoort. De code die te maken heeft met de basis van dit voorbeeld (essentiële code) is in de hele uitleg blauw gekleurd. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles in een gewone letter vanwege de leesbaarheid.)

Technisch gezien is er geen enkel bezwaar om de css in de stylesheet allemaal achter elkaar op één regel te zetten:

div#header-buiten {position: absolute; right: 16px; width: 100%; height: 120px; background: yellow;} div p {margin-left 16px; height: 120px; text-align: center;}

Maar als je dat doet, garandeer ik je hele grote problemen, omdat het volstrekt onoverzichtelijk is. Beter is het om de css netjes in te laten springen:

              div#header-buiten {
		position: absolute;
		right: 16px;
		width: 100%;
		height: 120px;
		background: yellow;
	}

	div p {
		margin-left: 16px;
		height: 120px;
		text-align: center;
	}

Hiernaast is het heel belangrijk voldoende commentaar (uitleg) in de stylesheet te schrijven. Op dit moment weet je waarschijnlijk (hopelijk...), waarom je iets doet. Maar over vijf jaar kan dat volstrekt onduidelijk zijn. Op deze site vind je nauwelijks commentaar in de stylesheets, maar dat heeft een simpele reden: deze uitleg is in feite één groot commentaar.

Op internet zelf is het goed, als de stylesheet juist zo klein mogelijk is. Dus voor het uploaden kun je normaal genomen het beste het commentaar weer verwijderen. Veel mensen halen zelfs alles wat overbodig is weg, voordat ze de stylesheet uploaden. Inspringingen bijvoorbeeld zijn voor mensen handig, een computer heeft ze niet nodig.

Je hebt dan eigenlijk twee stylesheets. De uitgebreide versie waarin je dingen uitprobeert, verandert, enzovoort, met commentaar, inspringingen, en dergelijke. Dat is de mensvriendelijke versie. Daarnaast is er dan een stylesheet die je op de echte site gebruikt: een gecomprimeerde versie.

Dat comprimeren kun je met de hand doen, maar er bestaan ook hulpmiddelen voor. Op de pagina met links kun je onder het kopje Gereedschap → Snelheid, testen, gzip, comprimeren (inclusief theorie) links naar sites vinden, waar je bestanden kunt comprimeren.

(Stylesheets op deze site zijn niet gecomprimeerd. Omdat het vaak juist om de css gaat, kunnen mensen dan zonder al te veel moeite de css bekijken.)

/* menu-125-dl.css */

Om vergissingen te voorkomen is het een goede gewoonte bovenaan het stijlbestand even de naam neer te zetten. Voor je het weet, zit je anders in het verkeerde bestand te werken.

body

Het element waarbinnen de hele pagina staat. Veel instellingen die hier worden opgegeven, worden geërfd door de nakomelingen van <body>. Ze gelden voor de hele pagina, tenzij ze later worden gewijzigd. Dit geldt bijvoorbeeld voor de lettersoort, de lettergrootte en de voorgrondkleur.

background: #ff9;

Achtergrondkleurtje.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, wordt deze toch specifiek opgegeven. Hierboven is een achtergrondkleur opgegeven. Sommige mensen hebben zelf de voorgrond‑ en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als nu de achtergrondkleur wordt veranderd, maar niet de voorgrondkleur, loop je het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, is redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt in een eigen stylesheet, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

width: 800px;

Breedte.

max-width: 100%;

Hier gelijk boven is een breedte van 800 px opgegeven. In browservensters die smaller dan 800 px zijn, zou je horizontaal moeten scrollen om de hele pagina te zien. Daarom wordt hier een maximumbreedte opgegeven.

Een breedte in procenten is normaal genomen ten opzichte van de ouder van het element. De ouder van <body> is <html>. Omdat <html> het buitenste element is, wordt dit normaal genomen even breed als het venster van de browser. Hierdoor wordt <body>, en daarmee de hele pagina, nooit breder dan het venster.

font-family: Arial, Helvetica, sans-serif;

Als Arial is geïnstalleerd op de machine van de bezoeker, wordt deze gebruikt, anders Helvetica. Als die ook niet wordt gevonden, wordt in ieder geval een schreefloze letter (zonder dwarsstreepjes) gebruikt.

margin: 0 auto;

Omdat voor onder en links geen waarden zijn opgegeven, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 auto 0 auto in de volgorde boven – rechts – onder – links.

Boven en onder geen marge, links en rechts auto, wat hier hetzelfde betekent als evenveel. Hierdoor staat <body> altijd horizontaal gecentreerd binnen z’n ouder <html>, ongeacht de breedte van <html>.

Omdat <html> het buitenste element is, wordt dit normaal genomen even breed als het venster van de browser. Uiteindelijk staat <body> hierdoor altijd horizontaal gecentreerd binnen het venster.

padding: 0;

Mogelijk is dit niet meer nodig, maar in het verleden verschilde de standaard-padding tussen browsers. Het is simpeler om dit gewoon te blijven gebruiken dan om een uitgebreide test uit te gaan voeren om te kijken, of dit nog wel nodig is.

(Bovendien zijn de meeste mensen aartsconservatief als het om gewoontes gaat, en volgens horen zeggen ben ik ook min of meer een mens, dus ben ik aartsconservatief en heb het altijd zo gedaan en daarom dus en zo.)

header div

Alle <div>’s binnen een <header>. Er is maar één <header>, waarin maar één <div> zit. Die <div> zorgt voor de grijze bovenaan het browservenster. In de <div> zitten de link om het menu te openen en de <span> met het woordje ’Menu’.

background: #ddd;

Grijze achtergrond. Dit is de grijze balk die bovenin het venster van de browser staat.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, wordt deze toch specifiek opgegeven. Hierboven is een achtergrondkleur opgegeven. Sommige mensen hebben zelf de voorgrond‑ en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als nu de achtergrondkleur wordt veranderd, maar niet de voorgrondkleur, loop je het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, is redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt in een eigen stylesheet, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Dit is ook al bij <body> opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin, als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

box-sizing: border-box;

De achtergrond van deze <div> vormt de grijze balk bovenin het browservenster. Die balk mag niet breder worden dan de rest van de pagina. Bij body is de pagina 800 px breed gemaakt. Daarom mag ook deze <div> niet breder dan 800 px worden.

Gelijk hieronder krijgt de <div> een breedte van 800 px. Maar nog iets lager wordt aan de <div> aan alle kanten een border van 1 px breed gegeven. Een border wordt normaal genomen bij de breedte opgeteld, waardoor de totale breedte 1 + 800 + 1 = 802 px wordt, net 2 px te veel.

Door deze regel komt de border binnen de breedte van 800 px te staan, waardoor de <div> niet breder wordt dan <body>.

width: 800px;

Breedte.

max-width: 100%;

<body> heeft bij body een maximumbreedte van 100% van het browservenster gekregen, zodat in vensters smaller dan 800 px niet horizontaal gescrold hoeft te worden. Als de pagina genoeg inhoud heeft, staat aan de rechterkant van het venster soms een scrollbalk (dit is afhankelijk van besturingssysteem en browser). In smallere vensters staat deze scrollbalk tegen de pagina aan.

Afbeelding 2
Afbeelding 2: de pagina in een iets smaller browservenster. Links ontbreekt max-width: 100%;, waardoor er rechtsboven geen verticale border is te zien. Rechts is max-width: 100%; wel aanwezig, en daardoor ook de verticale border rechtsboven.

Een breedte in procenten is normaal genomen ten opzichte van de ouder van het element, maar niet bij een fixed positie, zoals deze <div> iets hieronder krijgt. Bij een fixed positie is een breedte in procenten ten opzichte van het venster van de browser. Net zoals bij <body> het geval is.

Hierdoor staat de rechterborder van de <div> (dat is de rechterborder van de grijze balk bovenin het browservenster) netjes tegen de scrollbalk aan, wat net iets mooier is dan wanneer de grijze balk helemaal tot de rand van het venster door zou lopen. Dit zie je alleen in vensters die smaller dan ongeveer 820 px zijn, want in bredere vensters staat de scrollbalk – als die aanwezig is – niet tegen de pagina aan.

height: 2rem;

Hoogte.

De <div> zorgt voor de grijze balk bovenin het venster van de browser. Gelijk onder die balk komt <main> met de erin zittende tekst te staan. De <div> en <main> moeten dus goed op elkaar aansluiten: niet over elkaar heen, maar ook geen kier ertussen.

In werkelijkheid klopt dit niet helemaal, want de <div> staat binnen <header>. En <main> staat weer onder <header>. Feitelijk moeten dus <header> en <main> goed op elkaar aansluiten.

Omdat <header> een blok-element is, krijgt dit normaal genomen precies genoeg hoogte om de inhoud ervan weer te kunnen geven. Normaal genomen zou <main> daar dan weer precies onder komen te staan. Hier is dat echter niet zo.

Omdat de <div> fixed is gepositioneerd, bestaat deze als het ware niet voor andere elementen. Daarom heeft de <div>, en alles wat daar weer in zit, geen invloed op de hoogte van z’n ouder <header>. (Naast de <div> zit alleen <nav> in <header>, maar ook <nav> is fixed gepositioneerd, dus ook <nav> heeft geen invloed op de hoogte van <header>.)

Omdat de <div> fixed is gepositioneerd, wordt de <div> zelf ook door alle andere elementen genegeerd, alsof de <div> helemaal niet bestaat.

Boven <main> zit dus alleen een <header> zonder hoogte, en de <div> zelf wordt genegeerd. Hierdoor zou <main> helemaal bovenin het venster van de browser komen te staan, onder de <div> met de balk. Daardoor zou het bovenste deel van de tekst in <main> verdwijnen onder de <div> met de grijze balk.

Dit wordt voorkomen door <main> bij main een padding van 2 rem aan de bovenkant te geven. <main> zelf staat dan nog steeds onder de <div> met de grijze balk, maar dat maakt niets uit, omdat de tekst in <main> 2 rem lager begint.

De hoogte van de <div> met de grijze balk en de hoogte van de padding aan de bovenkant van <main> moeten altijd even groot zijn, om de inhoud van <main> altijd op de juiste afstand van de grijze balk neer te kunnen zetten. Die afstand moet ook nog ’ns enigszins flexibel zijn, want mensen kunnen de lettergrootte veranderen.

Als iemand de lettergrootte verhoogt, worden het in de <div> zittende ≡-teken en het woordje ’Menu’ groter, waardoor ook de grijze balk hoger wordt. De padding aan de bovenkant van <main> moet daardoor ook groter worden.

Voor de hoogte van de <div> en voor de padding aan de bovenkant van <main> wordt daarom een relatieve eenheid gebruikt: de rem. Deze werkt ongeveer hetzelfde als de bekendere eenheid em.

De em is gebaseerd op de lettergrootte van het element. Als in de <div> de lettergrootte meer is dan in <main>, is 1 em in de <div> ook groter dan 1 em in <main>. Bovendien wordt de em ook beïnvloed door de voorouders van het element. Hierdoor kun je makkelijk fouten maken als je twee (of meer) elementen op elkaar aan moet laten sluiten. Als één van de voorouders van de <div> ooit een andere lettergrootte zou krijgen en je vergeet de lettergrootte in de <div> aan te passen, gaat het mis.

De rem is ook op de lettergrootte gebaseerd, maar altijd op de lettergrootte van <html>. Daardoor is de rem altijd overal even groot, ongeacht de lettergrootte van het element zelf. En ongeacht eventuele afwijkende lettergroottes in voorouders van het element. Als de bezoeker de lettergrootte verandert, wordt in feite de lettergrootte van <html> veranderd. Hierdoor verandert ook de grootte van de rem, maar die verandering is overal op de pagina precies hetzelfde.

Als twee of meer elementen ten opzichte van elkaar neergezet moeten worden, een bepaalde grootte ten opzichte van elkaar moeten hebben, en dergelijke, is de eenheid rem vrijwel altijd beter dan de eenheid em. (Even los van nieuwere mogelijkheden als flexbox en grid, maar die worden hier niet gebruikt.)

border: black solid 1px;

Zwart randje.

border-top: none;

Aan de bovenkant geen border. De <div> staat tegen de bovenkant van de browser, en daar zit al iets van ’n rand.

position: fixed;

De <div>, en daarmee de grijze balk, vastzetten ten opzichte van het venster van de browser. Bij scrollen van de pagina scrolt de <div> niet mee.

top: 0;

Vastzetten aan de bovenkant van het venster van de browser.

Mogelijk is dit niet meer nodig, want als je top niet opgeeft, staat de <div> ook op deze plaats. Maar in het verleden hadden mobiele browsers nogal ’ns moeten met een fixed gepositioneerd element. Kwaad kan het niet, dus voor de zekerheid wordt dit voorlopig nog gebruikt.

#open

Het element met id=”open”. De link die zorgt voor het openen van het menu. Zichtbaar als het witte blokje met het ≡-teken linksboven op de pagina.

background: white;

Witte achtergrond.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, wordt deze toch specifiek opgegeven. Hierboven is een achtergrondkleur opgegeven. Sommige mensen hebben zelf de voorgrond‑ en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als nu de achtergrondkleur wordt veranderd, maar niet de voorgrondkleur, loop je het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, is redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt in een eigen stylesheet, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Dit is ook al bij <body> opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin, als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

display: inline-block;

Een <a> is van zichzelf een inline-element. Hierdoor zijn eigenschappen als breedte en hoogte niet te gebruiken. Een inline-block is een soort kruising tussen een inline- en een blok-element. Het komt niet op een nieuwe regel te staan, maar eigenschappen als hoogte en breedte zijn wel te gebruiken.

width: 1.7rem; height: 1.95rem;

Breedte en hoogte. Met deze hoogte vult de <a> precies de grijze balk bovenin het browservenster.

Als eenheid wordt rem genomen, waardoor breedte en hoogte mee veranderen met de lettergrootte. De rem werkt ongeveer hetzelfde als de bekendere eenheid em, maar is gebaseerd op de lettergrootte van <html>. Daardoor is de rem overal op de pagina altijd even groot, ook bij een andere lettergrootte. Een uitgebreidere uitleg over de rem is te vinden bij height: 2rem;.

font-size: 1.2rem;

Tekstgrootte iets groter dan normaal. De tekst is hier alleen het ≡-teken. Met deze grootte blijft er nog genoeg ruimte over om onder het teken nog het woordje ’Menu’ neer te kunnen zetten.

Als eenheid wordt rem genomen, waardoor de lettergrootte kan worden veranderd. De rem werkt ongeveer hetzelfde als de bekendere eenheid em, maar is gebaseerd op de lettergrootte van <html>. Daardoor is de rem overal op de pagina altijd even groot, ook bij een andere lettergrootte. Een uitgebreidere uitleg over de rem is te vinden bij height: 2rem;.

line-height: 1.45rem;

Regelhoogte.

Tekst komt automatisch halverwege de regelhoogte te staan. Met deze regelhoogte staat het ≡-teken precies op de juiste hoogte.

Als eenheid wordt rem genomen, waardoor de regelhoogte mee verandert met de lettergrootte. De rem werkt ongeveer hetzelfde als de bekendere eenheid em, maar is gebaseerd op de lettergrootte van <html>. Daardoor is de rem overal op de pagina altijd even groot, ook bij een andere lettergrootte. Een uitgebreidere uitleg over de rem is te vinden bij height: 2rem;.

text-align: center;

Tekst horizontaal centreren binnen de <a>

text-decoration: none;

Standaard wordt tekst in een <a> onderstreept. Dat is hier niet de bedoeling.

border-right: black solid 1px;

Zwart lijntje aan de rechterkant.

header div span

Alle <span>’s die in een <div> zitten, die weer in een <header> zit. Hier is maar één <header>, waarin maar één <div>, en in die <div> zit slechts één <span>. In die <span> zit het woordje ’Menu’ dat linksboven in het witte blokje staat.

Normaal genomen zou het makkelijker zijn om het woordje ’Menu’ gewoon in de <a> te zetten, net als het ≡-teken. Maar bij hoveren over of focus van de <a> wordt de tekst vet, en daardoor iets groter. Het woord ’Menu’ past hierdoor net niet meer binnen de <a>, binnen het witte blokje. Door ’Menu’ buiten de <a> te zetten wordt dit voorkomen.

display: block;

Een <span> is van zichzelf een inline-element. Daardoor zijn eigenschappen als breedte en hoogte niet te gebruiken. Door de <span> te veranderen in een blok-element kunnen dit soort eigenschappen wel worden gebruikt.

Bovendien wordt een blok-element op een nieuwe regel gezet. Hier komt dat goed uit, want nu komt ’Menu’ onder het ≡-teken te staan.

width: 1.7rem;

Breedte. Dit is dezelfde breedte als de <a> met het ≡-teken heeft.

Als eenheid wordt rem genomen, waardoor de breedte mee verandert met de lettergrootte. De rem werkt ongeveer hetzelfde als de bekendere eenheid em, maar is gebaseerd op de lettergrootte van <html>. Daardoor is de rem overal op de pagina altijd even groot, ook bij een andere lettergrootte. Een uitgebreidere uitleg over de rem is te vinden bij height: 2rem;.

font-size: 0.6rem;

Met deze lettergrootte past het woordje ’Menu’ in alle geteste browsers net in het witte blokje.

Als eenheid wordt rem genomen, waardoor de lettergrootte kan worden veranderd. De rem werkt ongeveer hetzelfde als de bekendere eenheid em, maar is gebaseerd op de lettergrootte van <html>. Daardoor is de rem overal op de pagina altijd even groot, ook bij een andere lettergrootte. Een uitgebreidere uitleg over de rem is te vinden bij height: 2rem;.

text-align: center;

Tekst horizontaal centreren.

pointer-events: none;

(Deze css-eigenschap moet niet worden verward met Pointer Events uit JavaScript. Hier is heel handig dezelfde naam voor gekozen, maar dit heeft helemaal niets te maken met deze css-eigenschap.)

Als het witte blokje linksboven wordt aangeraakt of -geklikt, moet het menu worden getoond. Het moet niet uitmaken, waar je het blokje precies aanraakt of -klikt. Maar dat doet het wel: als je het woordje ’Menu’ aanraakt of -klikt, werkt de link niet en opent het menu niet.

Afbeelding 3: de span met 'Menu' zicthbaar gemaakt

Op de afbeelding is de achtergrond van de <span> met ’Menu’ zwart gemaakt, en het woordje ’Menu’ wit.

De <a> waarmee het menu wordt geopend is even groot als het blokje, dus het maakt niet uit, waar je het blokje aanraakt of -klikt: de link werkt overal. Probleem is alleen dat de <span> met ’Menu’ niet binnen de <a> zit, maar daar wel bovenop wordt gezet. Op het onderste zwarte deel van de afbeelding, waar de <span> staat, werkt de link daardoor niet meer, want die wordt afgedekt door de <span>

Met deze regel wordt een klik of aanraking van de <span> genegeerd en doorgegeven aan het element daaronder (en hetzelfde geldt voor hoveren over de <span>). En dat element onder de <span> is de <a>. Nu werkt de link ook, als je de <span> met ’Menu’ aanraakt.

position: relative;

Om de <span>, en daarmee het woordje ’Menu’, op de juiste plaats neer te kunnen zetten.

bottom: 0.75rem;

Iets naar boven verplaatsen.

Als eenheid wordt rem genomen, waardoor de verplaatsing mee verandert met de lettergrootte. De rem werkt ongeveer hetzelfde als de bekendere eenheid em, maar is gebaseerd op de lettergrootte van <html>. Daardoor is de rem overal op de pagina altijd even groot, ook bij een andere lettergrootte. Een uitgebreidere uitleg over de rem is te vinden bij height: 2rem;.

nav

Alle <nav>’s. Dat is er hier maar één, waarin het slide-outmenu zit.

background: rgba(221, 221, 221, 0.7);

Vaak wordt voor ’n kleur de hexadecimale notatie gebruikt, iets als color: #33ab01;. Daarbij worden niet alleen cijfers, maar ook letters gebruikt. 0 tot en met 9 werken precies hetzelfde als altijd, maar na de 9 komen nog A, B, C, D, E en F.

Als je telt, is ’t dus: 0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12, enzovoort. Daarbij is A gelijk aan het tientallige 10, B aan 11, enzovoort. Op deze manier kun je met twee cijfers en/of letters 256 mogelijkheden aangeven: van 00 tot en met FF.

De eerste drie getallen bij rgba() geven de kleur aan. Deze lopen van 0 tot en met 255, dus ook hiermee kun je 256 mogelijkheden aangeven. En omdat er drie getallen zijn levert dat 256 x 256 x 256 = 16.777.216 mogelijke kleuren op, net iets meer dan het aantal kleurpotloden in de gemiddelde kleurdoos van ’n kind.

De notatie bij rgba() geeft dus precies evenveel mogelijkheden als de hexadecimale.

Het eerste getal staat voor rood, het tweede voor groen en het derde voor blauw (feitelijk de Engelse namen, maar de eerste letter is toevallig in het Nederlands hetzelfde). Uit deze drie kleuren zijn alle kleuren op een monitor opgebouwd.

255 wil zeggen volledig aanwezig, 0 wil zeggen helemaal ontbrekend.

255, 255, 255 levert wit op, 0 , 0 , 0 zwart.

In plaats van getallen mag je ook percentages gebruiken, bijvoorbeeld: rgba(10%, 20%, 100%, 0.3).

Omdat in dit voorbeeld drie keer 221 is opgegeven, levert dit een lichtgrijze kleur op.

Het vierde getal staat voor het alfa-kanaal. Hiermee wordt de doorzichtigheid aangegeven. Dit getal loopt van 0 naar 1. Volledig doorzichtig is 0, volledig ondoorzichtig is 1.

Het getal voor het alfa-kanaal wordt als decimale breuk aangegeven, dus bijvoorbeeld 0.5 wil zeggen halfdoorzichtig. Let erop dat je ’n punt gebruikt, de Amerikaanse manier om breuken aan te geven. Als je ’n komma gebruikt, denkt de browser dat er twee verschillende getallen staan.

In dit voorbeeld is deze achtergrondkleur enigszins doorzichtig: 0.7. Hierdoor zie je de tekst nog enigszins door de achtergrond heen. Alleen de <nav> heeft een doorzichtige achtergrond. De in de <nav> zittende links zelf krijgen bij nav a een ondoorzichtige witte achtergrond, dus de leesbaarheid wordt niet minder door deze doorzichtigheid.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, wordt deze toch specifiek opgegeven. Hierboven is een achtergrondkleur opgegeven. Sommige mensen hebben zelf de voorgrond‑ en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als nu de achtergrondkleur wordt veranderd, maar niet de voorgrondkleur, loop je het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, is redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt in een eigen stylesheet, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Dit is ook al bij <body> opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin, als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

width: 0;

Breedte.

Een breedte van 0 px betekent: onzichtbaar. De <nav> (en alles erin) is nog gewoon aanwezig, alleen zie je er niets meer van. En omdat de <nav> geen breedte heeft, is het onmogelijk om ’n link aan te klikken of zoiets, want een onzichtbare link kun je niet aanraken.

(Schermlezers lezen de <nav> en de links daarbinnen nog gewoon voor, en in de meeste schermlezers kunnen de links ook gewoon worden gevolgd. Ook bij gebruik van de Tab-toets worden de links nog gewoon bezocht. Daarom wordt iets verderop de <nav> ook nog voor schermlezers en Tab-toets verborgen met visibility: hidden;.)

Zodra de link met het ≡-teken wordt aangeraakt of -geklikt (of door gebruikers van de Tab-toets met Enter wordt geactiveerd), wordt bij #nav:target een breedte aan de <nav> gegeven. Hierdoor wordt het in de <nav> zittende menu zichtbaar. (Ook visibility: hidden; wordt daar veranderd in visibility: visible;, omdat het menu er anders wel is, maar nog steeds onzichtbaar.)

overflow: auto;

De <nav> met het menu is fixed gepositioneerd tussen de balk aan de bovenkant van het browservenster en de onderkant van het venster. In een heel laag venster kan het menu in de <nav> te hoog zijn voor het venster. Aan de onderkant valt een deel van het menu dan weg.

Door overflow op auto te zetten, kan de <nav> met het menu in dat geval worden gescrold. Afhankelijk van browser en besturingssysteem kan daarbij aan de rechterkant van de <nav> een scrollbalk verschijnen.

text-align: center;

Tekst in de <nav> horizontaal centreren.

border-right: black solid 1px;

Rechts zwarte rand.

position: fixed;

De <nav>, en daarmee het hele erin zittende menu, vastzetten ten opzichte van het venster van de browser. Bij scrollen van de pagina scrolt de <nav> niet mee.

top: 2rem;

2 rem vanaf de bovenkant van het venster van de browser neerzetten, dat is tegen de <div> met de grijze balk aan.

Als eenheid wordt rem genomen, waardoor de afstand tot de bovenkant mee verandert met de lettergrootte. De rem werkt ongeveer hetzelfde als de bekendere eenheid em, maar is gebaseerd op de lettergrootte van <html>. Daardoor is de rem overal op de pagina altijd even groot, ook bij een andere lettergrootte. Een uitgebreidere uitleg over de rem is te vinden bij height: 2rem;.

bottom: 0;

Aan de onderkant van het browservenster vastmaken.

transition: width 0.5s, visibility 0.5s;

Iets hierboven is met width: 0; een breedte opgegeven. Een breedte van 0 px, dus onzichtbaar, maar het blijft een breedte. Gelijk hieronder wordt de <nav> met visibility: hidden; verborgen.

(De <nav> en alles wat erin zit wordt dus eigenlijk op twee manieren verborgen. Op zich is alleen een breedte van 0 px voldoende voor het verbergen, alleen lezen schermlezers het menu in de <nav> dan nog steeds voor, en ook de Tab-toets bezoekt de links nog. Met visibility: hidden; negeren schermlezers en Tab-toets de links in het menu.)

Bij #nav:target wordt dit veranderd in width: 400px; visibility: visible;, waardoor de <nav> en het erin zittende menu zichtbaar worden. (De selector #nav:target reageert op aanraken of -klikken van de link met het ≡-teken, of als Enter wordt ingedrukt als de link focus heeft.)

De eigenschap transition zorgt ervoor dat de verandering van breedte en zichtbaarheid niet in één keer plaatsvindt, maar geleidelijk. Als width van 0 px wordt veranderd naar 400px, vindt die verandering geleidelijk aan plaats: geleidelijk van 0 px naar 400px. (Bij width zelf staat alleen width: 0;, omdat je ’px’ weg mag laten bij ’0’.)

transition wordt op twee plaatsen gebruikt: bij #nav:target, als het menu wordt geopend, en hier. De waarden bij transition bij #nav:target worden gebruikt als het menu wordt geopend, als de breedte van 0 naar 400 px gaat. De waarden die hier staan, worden gebruikt als het menu weer wordt gesloten.

Meestal wordt transition alleen bij de verandering opgegeven. De tijdsduur van beginstand naar verandering, en weer terug van verandering naar beginstand, is dan in beide richtingen hetzelfde. Maar dat hoeft niet. Door verschillende tijden op te geven, kun je een menu bijvoorbeeld sneller sluiten dan openen. Dat is wat hier gebeurt.

Er worden twee eigenschappen veranderd: width en visibility. De eigenschappen worden gezamenlijk opgegeven achter transition, gescheiden door een komma.

(Je kunt de te veranderen eigenschappen, vertraging, en dergelijke ook volledig apart opgeven met behulp van transition-property, transition-delay, en dergelijke, maar het is veel duidelijker om de te veranderen eigenschap, vertraging, en dergelijke bij elkaar te houden.)

De twee eigenschappen width en visibility apart:

width: 0.5s: als er slechts één tijd is opgegeven, zoals hier het geval is, is dat de tijdsduur van de verandering (een eventuele tweede tijd geeft een vertraging aan het begin aan). Het veranderen van de breedte van het menu van 400 px naar 0 px duurt 0,5 seconde (met ’n punt voor de decimalen, want css gebruikt de Amerikaanse notatie).

Bij #nav:target staat transition: width 1s;. Hierdoor duurt het openen van het menu, de verandering van width: 0; naar width: 400px;, één seconde. Het openen van het menu duurt dus iets langer dan het sluiten. Omdat 400 px tamelijk breed is, is één seconde een mooie tijd om het menu rustig te openen. Maar als het menu weer moet worden gesloten, is dat wat irritant lang. Vandaar dat het sluiten sneller gebeurt dan het openen.

Je kunt ook nog het verloop van de wijziging opgeven, bijvoorbeeld snel aan het begin en langzaam aan het eind. Hier wordt niets opgegeven, waardoor de standaardwaarde ease wordt gebruikt: langzaam aan het begin, sneller halverwege en weer langzaam aan het einde.

visibility 0.5s: bij #nav:target wordt de <nav> met het menu met visibility: visible; zichtbaar gemaakt. Daar staat geen visibility achter transition. Dat betekent dat de <nav> met het menu zonder enige vertraging in één keer van visibility: hidden; naar visibility: visible; gaat.

visibility: hidden; wordt alleen gebruikt om het menu voor schermlezers en gebruikers van de Tab-toets te verbergen. Op het ogenblik dat het menu wordt getoond, is dat niet langer nodig en kan het menu gelijk, zonder vertraging, worden getoond.

Omgekeerd is dat niet het geval. Het duurt ’n halve seconde om de breedte van 400 px terug te brengen tot 0 px. Als het menu zonder vertraging onzichtbaar wordt gemaakt, zie je die verandering in breedte niet: het menu verdwijnt in één keer. Het is veel rustiger, als dat geleidelijk gebeurt.

Daarom wordt hier over het onzichtbaar wel ’n halve seconde gedaan.

Toch is dit niet precies, wat er gebeurt. Als je heel nauwkeurig kijkt, zou je zien dat het onzichtbaar worden helemaal niet geleidelijk aan gebeurt, maar in één keer, na ’n halve seconde. Dat komt omdat visibility alleen maar een begin- en een eindstand kent: visible en hidden. Bij visibility heeft die halve seconde tijdsduur hetzelfde effect als ’n halve seconde vertraging.

(Als je de zichtbaarheid geleidelijk aan zou willen veranderen, moet je opacity gebruiken. Dat kent wel tussenliggende waarden tussen doorzichtig en ondoorzichtig. Maar als je iets met opacity onzichtbaar maakt, moet je daarnaast ook nog steeds visibility gebruiken, want anders negeren schermlezers en de Tab-toets het niet.)

De waarden bij transition zijn gewoon gevonden door uitproberen. Mocht je ingewikkelder dingen willen uitproberen, dan zijn op de pagina met links onder het kopje CSS → Online uitproberen, code genereren en dergelijke sites te vinden, waarop je gereedschap vindt om je te helpen met de meer ingewikkelde onderdelen van transition. (Als je ’Alles’ uitvinkt, kun je ’Transition’ aanvinken en krijg je alleen sites met gereedschap voor transition te zien.)

transition brengt een geheel eigen risico met zich mee. In de specificatie staat, welke eigenschappen met behulp van transition kunnen veranderen. Je kunt eventueel bij transition opgeven, voor welke eigenschappen het geldt. Als je bijvoorbeeld top en left beide wilt veranderen bij :checked, kun je bijvoorbeeld aangeven dat de geleidelijke verandering met behulp van transition alleen voor top geldt. left verandert dan gewoon in één keer.

Als je niet opgeeft, voor welke eigenschappen transition geldt, geldt het voor álle eigenschappen die bij :hover, :focus, :checked, en dergelijke worden veranderd. Als daar ’n eigenschap bij zit die op dit moment niet door transition kan worden vertraagd, verandert die gewoon in één keer. Maar als de specificatie of een van de browsermakers de geest krijgt en plotsklaps die eigenschap ook onder transition laat vallen, kan dat tot heel onverwachte resultaten leiden.

Stel dat je een bepaalde eigenschap heel traag wilt veranderen bij :hover en een andere eigenschap flitsend snel. Mogelijk wordt dat flitsend snel dan opeens ook heel traag, als transition in de toekomst die eigenschap ook gaat ondersteunen. Daarom moet je absoluut zeker weten dat ook in de toekomst geen problemen kunnen ontstaan. Bij twijfel: geef aan welke eigenschap(pen) transition mag aansturen.

In dit voorbeeld speelt dit risico niet, omdat bij transition de afzonderlijke eigenschappen zijn opgegeven, waarvoor transition geldt. Daardoor blijft transition, wat er eventueel ooit nog gaat veranderen, hoe dan ook alleen voor deze twee eigenschappen gelden.

visibility: hidden;

De <nav> met het menu verbergen.

Zodra de link met het ≡-teken wordt aangeraakt of -geklikt (of door gebruikers van de Tab-toets met Enter wordt geactiveerd), wordt dit bij #nav:target veranderd in visibility: visible;, zodat het menu zichtbaar is.

Iets hierboven heeft de <nav> met het menu bij width: 0; een breedte van 0 px gekregen. Hierdoor is de <nav> al onzichtbaar. Maar schermlezers lezen het menu nog gewoon voor, en de links worden ook door de Tab-toets nog gewoon bezocht. Door het menu ook nog te verbergen met visibility: hidden; negeren schermlezers en Tab-toets de links in het menu.

(Normaal genomen zou je het menu eerder voor schermlezers en Tab-toets verbergen met display: none;, maar dat kan niet worden gebruikt in combinatie met de eigenschap transition. Hierdoor zou het menu zonder enige vertraging pats-boem verschijnen en verdwijnen.)

#nav:target

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

nav {background: rgba(221, 221, 221, 0.7); color: black; width: 0; overflow: auto; text-align: center; border-right: black solid 1px; position: fixed; top: 2rem; bottom: 0; transition: width 0.5s, visibility 0.5s; visibility: hidden;}

Als het element met id=”nav” een ’target’ is.

Bovenin de pagina staat een link naar ’#nav’:

<a id="open" href="#nav" aria-label="Open menu">≡</a>

Zo’n link binnen de pagina werkt alleen, als het doel-element een id heeft, een ’anker’. Daarom heeft de <nav> een id:

<nav id="nav">

Je zou hier als selector kunnen volstaan met nav:target, maar dan zou deze css voor álle <nav>’s op de pagina gelden. In het voorbeeld in de download is maar één <nav> aanwezig, maar op de site bijvoorbeeld zijn er al meerdere <nav>’s in het voorbeeld aanwezig. Om te voorkomen dat per ongeluk meerdere <nav>’s onder deze selector vallen, kun je het best een id gebruiken in de selector. En de <nav> heeft toch al ’n id, dus waarom zou je die dan niet gebruiken.

nav#nav, de <nav> met id=”nav”, is het doel, de ’target’, van de link bovenin. Op het moment dat de link bovenin wordt gevolgd, wordt deze selector geactiveerd, omdat nav#nav op dat moment het doel is.

(Zodra een andere link binnen de pagina wordt gevolgd, is nav#nav niet meer het doel en werkt deze selector niet meer. Dat is de truc die wordt gebruikt om het menu weer te sluiten: een andere link met een ander doel.)

width: 400px;

Bij nav heeft de <nav> een breedte van 0 px gekregen, waardoor deze onzichtbaar is. Hier wordt de <nav> 400 px breed gemaakt, zodat de <nav> en het erin zittende menu zichtbaar worden.

(De <nav> wordt bij nav ook nog verborgen met visibility: hidden; en iets hieronder zichtbaar gemaakt met visibility: visible;. Dat is nodig omdat schermlezers en Tab-toets de links in de <nav> gewoon voorlezen en bezoeken. Door de <nav> ook met visibility: hidden; te verbergen wordt de <nav> genegeerd door schermlezers en Tab-toets.)

max-width: 80%;

Hier gelijk boven heeft de <nav> een breedte van 400 px gekregen. In heel smalle browservensters kan dat breder zijn dan de breedte van het venster, waardoor horizontaal gescrold zou moeten worden om het hele menu te zien. Dit wordt met een maximumbreedte voorkomen.

Een breedte in procenten is normaal genomen ten opzichte van de ouder van het element. Dat is hier de <div>, waarin de grijze balk bovenin het venster van de browser zit. Die <div> heeft bij header div een breedte van 800 px gekregen, maar mag nooit breder dan het venster worden. Omdat de <nav> maximaal 80% van deze breedte krijgt, kan de <nav> dus nooit breder worden dan maximaal 80% van de breedte van het venster.

transition: width 1s;

Als het menu niet is geopend, heeft dit een breedte van 0 px. Als het menu is geopend, is de breedte 400 px. Deze eigenschap zorgt ervoor dat de verandering van 0 px naar 400 px 1 seconde duurt, waardoor het menu van links naar binnen lijkt te schuiven. Hoe deze eigenschap precies werkt is te vinden bij nav onder transition: width 0.5s, visibility 0.5s;.

visibility: visible;

Bij nav is de <nav> met het menu met visibility: hidden; onzichtbaar gemaakt. De <nav> heeft daar ook al een breedte van 0 px gekregen, waardoor deze ook daardoor al onzichtbaar is. Schermlezers en Tab-toets zien de links echter nog steeds, ook al zijn ze op het scherm niet meer te zien. Met visibility: hidden; worden ze ook door schermlezers en Tab-toets genegeerd.

Maar bij openen van het menu moet de onzichtbaarheid uiteraard weer veranderen in zichtbaarheid, want aan een onzichtbaar geopend menu heb je niet zoveel.

(Normaal genomen zou je het menu eerder voor schermlezers en Tab-toets verbergen met display: none;, maar dat kan niet worden gebruikt in combinatie met de eigenschap transition. Hierdoor zou het menu zonder enige vertraging pats-boem verschijnen en verdwijnen.)

nav ul

Alle <ul>’s die binnen een <nav> zitten. Hier is maar één <nav> aanwezig, waarin maar één <ul> zit: de <ul> met het menu.

list-style-type: none;

De balletjes en dergelijke die je standaard ziet bij de <li>’s in een <ul> zijn hier niet welkom.

margin-top: 20px;

Kleine marge aan de bovenkant.

padding: 0;

Standaard verschilt de padding in verschillende browsers. Nu is die overal hetzelfde.

nav li

Alle <li>’s binnen een <nav>. Hier is maar een <nav> aanwezig, waarbinnen de <li>’s van het menu zitten.

width: 80%;

Breedte.

Een breedte in procenten is normaal genomen ten opzichte van de ouder van het element. Die ouder is hier <ul>, een blok-element. Een blok-element wordt normaal genomen automatisch even breed als z’n ouder. De ouder van de <ul> is hier <nav>, die bij #nav:target een breedte van 400 px en een maximumbreedte van 80% van het venster van de browser heeft gekregen. Uiteindelijk zijn de <li>’s weer 80% van die breedte.

height: 2em;

Hoogte.

Als eenheid wordt de relatieve eenheid em gebruikt, omdat bij gebruik van een absolute eenheid zoals px de regelhoogte niet mee verandert met de lettergrootte.

Iets hieronder wordt ook een regelhoogte van 2 em opgegeven. Normaal genomen zou de hoogte hier dan niet nodig zijn, omdat – bij gebrek aan een hoogte – de regelhoogte voldoende is. Maar gelijk hieronder wordt overflow: hidden; gebruikt, en dat werkt alleen, als ook een hoogte aanwezig is.

overflow: hidden; Afbeelding 4: links staat de tekst in het menu over elkaar heen

Als de <nav> met het menu wordt geopend, verandert de breedte van 0 px naar 400 px. Die verandering duurt 1 seconde. De <li>’s, waarin de links zitten, hebben iets hierboven een breedte van 80% van de <nav> gekregen.

Daardoor zijn de <li>’s bij het begin van de verandering te smal om de erin zittende links weer te kunnen geven. Op de afbeelding zijn beide menu’s 100 px breed. In de bovenste link staat ’Pagina een’.

Bij de linkerafbeelding ontbreekt overflow: hidden;. Omdat het woord ’een’ niet op de regel past, komt dit op de volgende regel te staan, door ’Pagina twee’ heen. De ’twee’ daarvan komt weer door ’Pagina drie’ heen te staan. Enzovoort.

Op de afbeelding rechts is overflow: hidden; gebruikt. Hierdoor wordt het deel van de link dat niet past gewoon verborgen.

Hoewel het openen van het menu maar één seconde duurt, is het door elkaar heen staan van de links toch duidelijk te zien, als een soort inktvlek.

line-height: 2em;

Regelhoogte.

Tekst wordt automatisch halverwege de regelhoogte neergezet, waardoor de tekst in de links verticaal wordt gecentreerd.

Als eenheid wordt em genomen, omdat bij een absolute eenheid als px de regelhoogte niet mee verandert met de lettergrootte. Zoomen kan altijd, welke eenheid ook wordt gebruikt.

margin: 0 auto;

Omdat voor onder en links geen waarden zijn opgegeven, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 auto 0 auto in de volgorde boven – rechts – onder – links.

Boven en onder geen marge. Links en rechts auto, wat hier hetzelfde betekent als evenveel. Hierdoor staan de <li>’s, en de daarin zittende links, altijd horizontaal gecentreerd binnen hun ouder, ongeacht de breedte ouder van die ouder.

Die ouder is hier <ul>, een blok-element. Een blok-element wordt normaal genomen automatisch even breed als z’n ouder. De ouder van de <ul> is hier <nav>. De <li>’s staan dus altijd horizontaal gecentreerd binnen de <nav>.

nav a

Alle <a>’s binnen een <nav>. Er is maar één <nav> aanwezig, waarbinnen het menu zit. Dit zijn de links binnen dat menu. Het zijn ook de link met het ≡-teken en de twee rode sluitkruisjes, waarmee het menu geopend en gesloten wordt.

background: white;

Witte achtergrond.

color: black;

Van zichzelf heeft tekst in een link een kleurtje. Dat is hier niet nodig, omdat het zo al duidelijk genoeg is dat dit links zijn.

display: block;

Van zichzelf is een <a> een inline-element. Daardoor wordt de <a> niet breder dan nodig is om de tekst erin weer te geven en werkt de link alleen, als precies die tekst wordt aangeraakt of -geklikt.

Door de <a> te veranderen in een blok-element, wordt de <a> even breed als z’n ouder. Die ouder is de <li>, waar de <a> in zit. Bij nav li hebben de <li>’s een breedte van 80% van de <nav> gekregen. Omdat de <a> nu even breed is als de <li>, maakt het nu niet meer uit, waar de <a> wordt aangeraakt of -geklikt: de link zal overal werken.

text-decoration: none;

Tekst in een <a> is onderstreept. Dat is hier niet nodig, het is zo al duidelijk genoeg dat dit links zijn.

border: black solid 1px;

Zwart randje rondom.

.sluit

Voor deze elementen is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

nav a {background: white; color: black; display: block; text-decoration: none; border: black solid 1px;}

Alle elementen met class=”sluit”. De twee <a>’s met de sluitkruisjes, waarmee het menu weer gesloten kan worden.

background: white;

Witte achtergrond.

color: red;

Rode voorgrondkleur. Dit is onder andere de kleur van de tekst. Die tekst bestaat hier alleen uit de letter ’X’.

width: 1.7rem; height: 1.7rem;

Breedte en hoogte.

De hier gebruikte breedte en hoogte zorgen ervoor dat de sluitkruisjes even groot zijn als het blokje met het ≡-teken, waardoor het linkersluitkruisje netjes aansluit op het blokje met het ≡-teken.

Bovendien zorgen deze maten ervoor, in combinatie met de iets hieronder opgegeven lettergrootte en regelhoogte, dat het sluitkruisje er in alle browsers (ongeveer) hetzelfde uitziet.

Als eenheid wordt rem genomen, waardoor breedte en hoogte mee veranderen met de lettergrootte. De rem werkt ongeveer hetzelfde als de bekendere eenheid em, maar is gebaseerd op de lettergrootte van <html>. Daardoor is de rem overal op de pagina altijd even groot, ook bij een andere lettergrootte. Een uitgebreidere uitleg over de rem is te vinden bij height: 2rem;.

overflow: hidden;

Het rode sluitkruisje is niets anders dan een grote letter ’X’. Om deze letter in alle browsers enigszins netjes weer te kunnen geven, moet er nogal wat worden gestoeid met een combinatie van lettergrootte, regelhoogte, breedte en hoogte. Daardoor wordt soms de letter groter dan het vakje, waar hij in moet passen. Door deze regel worden eventuele buiten het hokje uitstekende delen verborgen.

font-size: 2.4rem; line-height: 1.75rem;

Lettergrootte en regelhoogte.

Deze maten zorgen ervoor, in combinatie met de iets hierboven opgegeven breedte en hoogte, dat het sluitkruisje er in alle browsers (ongeveer) hetzelfde uitziet.

Als eenheid wordt rem genomen, waardoor breedte en hoogte mee veranderen met de lettergrootte. De rem werkt ongeveer hetzelfde als de bekendere eenheid em, maar is gebaseerd op de lettergrootte van <html>. Daardoor is de rem overal op de pagina altijd even groot, ook bij een andere lettergrootte. Een uitgebreidere uitleg over de rem is te vinden bij height: 2rem;.

text-decoration: none;

Standaard wordt een link onderstreept. Dat is hier niet nodig.

border: black solid 1px;

Zwart randje.

border-top: none;

Aan de bovenkant staan de sluitkruisjes tegen de <div> met de grijze balk aan. Die heeft al een border aan de onderkant. Daardoor zou hier een dubbele border komen te staan. Dit voorkomt dat.

position: absolute;

Om de sluitkruisjes op de juiste plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste voorouder die zelf een positie heeft. Dat is hier <nav>, die bij nav fixed is gepositioneerd.

top: 0; left: 0;

In de linkerbovenhoek zetten. Nu staan beide sluitkruisjes over elkaar heen, maar het tweede sluitkruisje wordt later bij nav > .sluit naar de rechterbovenhoek verplaatst.

nav li:nth-of-type(2) a

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

nav a {background: white; color: black; display: block; text-decoration: none; border: black solid 1px;}

Binnen <nav> zit een <ul>, en binnen die <ul> zitten weer elf <li>’s, met in elk een <a>. De eerste <li> hoort bij het eerste sluitkruisje, de andere tien <li>’s horen bij de links naar de achterliggende pagina’s.

Kinderen van dezelfde ouder kunnen worden geteld, net zoals dat bij kinderen uit een gezin het geval is: eerste kind, tweede kind, derde kind, enzovoort. Je kunt ook alleen ’n bepaald soort element tellen, net zoals je alleen kinderen van jonger of ouder dan zes jaar kunt tellen. Met de selector :nth-of-type() worden alleen elementen van een bepaald soort geteld.

(Dat ul in de selector ontbreekt, is geen probleem. De selector zou daardoor onnodig lang worden, en de <li>’s blijven gewoon kinderen van dezelfde <ul>, of die nu wordt genoemd in de selector of niet.)

nav: alle <nav>’s. Dat is er hier maar een, de <nav> met het menu.

li: alle <li>’s binnen nav.

:nth-of-type(2): het element met een bepaald volgnummer. Het volgnummer staat tussen de haakjes. In dit geval is het volgnummer twee. Het gaat hier dus om de tweede <li> binnen de <ul>.

Omdat voor :nth-of-type(2) een li staat, worden alleen <li>’s geteld.

In deze <li> zit de <a> naar de eerste achterliggende pagina, de <a> met ’Pagina een’. Dit is de bovenste link uit het menu. (De eerste <li> binnen de <ul> hoort bij het sluitkruisje linksboven.)

a: de <a>’s binnen die tweede <li>. Dat is er maar één: de link naar de eerste achterliggende pagina.

In normale mensentaal: de <a> binnen de tweede <li> binnen de <nav>. (Of eigenlijk: de <a> binnen de tweede <li> binnen de <ul> binnen de <nav>, maar de <ul> is hier dus overbodig.)

De selector nth-of-type() (of de bijzondere vormen :first-of-type en :last-of-type voor het eerste en laatste element uit een serie) kan onverwachte bijwerkingen hebben. In dit geval is er maar één serie <li>’s in het voorbeeld. Maar als ergens anders ook nog een serie <li>’s zou zitten, (zoals op de site daadwerkelijk het geval is), zou deze selector ook voor de tweede <li> binnen die serie <li>’s gelden. (Op de site is dit opgelost door de selector te veranderen in #nav li:nth-of-type(2) a. Er is maar één <nav> met id=”nav”. Op een soortgelijke manier kunnen al dit soort conflicten worden opgelost.)

border-radius: 10px 10px 0 0;

Linker- en rechterbovenhoek rond maken. Omdat er maar één waarde is opgegeven, worden de hoeken horizontaal en verticaal even groot. Hierdoor ontstaan twee cirkelvormige hoeken met een hoogte en breedte van 10 px.

nav li:last-child

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

nav li {width: 80%; height: 2em; overflow: hidden; line-height: 2em; margin: 0 auto;}

Binnen <nav> zit een <ul>, en binnen die <ul> zitten weer elf <li>’s, met in elk een <a>. De eerste <li> hoort bij het eerste sluitkruisje, de andere tien <li>’s horen bij de links naar de achterliggende pagina’s.

Kinderen van dezelfde ouder kunnen worden geteld, net zoals dat bij kinderen uit een gezin het geval is: eerste kind, tweede kind, derde kind, enzovoort. Je kunt elementen selecteren op basis van het volgnummer binnen zo’n reeks kinderen. In dit geval wordt geen echt volgnummer gebruikt, maar :last-child: het laatste kind.

(Dat ul in de selector ontbreekt, is geen probleem. De selector zou daardoor onnodig lang worden, en de <li>’s blijven gewoon kinderen van dezelfde <ul>, of die nu wordt genoemd in de selector of niet.)

nav: alle <nav>’s. Dat is er hier maar een, de <nav> met het menu.

li: alle <li>’s binnen nav.

:last-child: nou, toch niet alle <li>’s. Alleen de <li> die het laatste kind is. Binnen deze <li> zit de link naar de laatste achterliggende pagina, het is de onderste link uit het menu.

In normale mensentaal: de laatste <li> binnen de <ul>.

De selector :last-child kan onverwachte bijwerkingen hebben.

Binnen de <nav> bijvoorbeeld zit een <ul>, met daarin een <li> die het laatste kind van de <ul> is. Maar onder de <ul> zit nog een <a>, en die is ook een laatste kind: het laatste kind van de <nav>. Daarom staat er een li voor :last-child het laatste kind móét een <li> zijn. Hierdoor wordt de laatste <a> in de <nav> niet aangesproken. Zou je de li voor :last-child weglaten, dan blijken er opeens veel meer laatste kinderen te zijn en verandert de lay-out in een ouderwets gezellige familie-reünie met alle laatste kinderen: een puinhoop.

Ook moet je zeker weten dat het te selecteren element inderdaad het laatste kind is. Dat is hier echt het geval: de <li> met de link naar de laatste achterliggende pagina is altijd het laatste kind van de <ul>. Maar als later aan de html nog een <li> toegevoegd zou worden na die <li> met de link naar de laatste achterliggende pagina, is die <li> ineens geen laatste kind meer.

(Op de site speelt een soortgelijk probleem: er zijn meerdere <nav>’s met daarbinnen een <ul> met <li>’s. Er zijn dus meerdere <li>’s laatste kind. Op de site is dit opgelost door de selector te veranderen in #nav li:last-child. Er is maar één <nav> met id=”nav”. Op een soortgelijke manier kunnen al dit soort conflicten worden opgelost.)

height: 2.15 em;

Bij nav li hebben alle <li>’s een hoogte en een regelhoogte van 2 em gekregen. De regelhoogte wordt geërfd door de nakomelingen van de <li>, dus de in de <li> zittende <a> heeft een regelhoogte van 2 em.

Een <a> met een regelhoogte van 2 em past prima in een <li> met een hoogte van 2 em. Maar de <a> is iets hoger, want bij nav a hebben de <a>’s een border van 1 px breed aan alle kanten gekregen. Daardoor is de <a> nu eigenlijk 2 px te hoog voor de <li>. En omdat bij nav li ook nog overflow: hidden; staat, worden die 2 px niet weergegeven. Hierdoor valt de border aan de onderkant van de <a> weg.

Tussen twee <a>’s in is dat geen probleem, omdat elke <a> ook een border aan de bovenkant heeft. En die zie je wel. Bij de onderste <a> in het menu moet die border echter niet wegvallen, want dan mist de border aan de onderkant van het menu. Daarom wordt bij de laatste <li> de hoogte iets hoger gemaakt. Nu past de border aan de onderkant van de <a> binnen deze laatste <li> net binnen de <li>, en is daardoor zichtbaar.

nav li:last-child a

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

nav a {background: white; color: black; display: block; text-decoration: none; border: black solid 1px;}

De <a> binnen de laatste <li> binnen de <ul>. Deze selector werkt precies hetzelfde als beschreven wordt bij nav li:last-child, alleen gaat het nu om de <a> binnen de laatste <li>.

border-radius: 0 0 10px 10px;

Rechter- en linkeronderhoek rond maken. Omdat er maar één waarde is opgegeven, worden de hoeken horizontaal en verticaal even groot. Hierdoor ontstaan twee cirkelvormige hoeken met een hoogte en breedte van 10 px.

nav > .sluit

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

nav a {background: white; color: black; display: block; text-decoration: none; border: black solid 1px;}

.sluit {background: white; color: red; width: 1.7rem; height: 1.7rem; overflow: hidden; font-size: 2.4rem; line-height: 1.75rem; text-decoration: none; border: black solid 1px; border-top: none; position: absolute; top: 0; left: 0;}

Alle elementen met class=”sluit” binnen een <nav>. Het teken > geeft aan, dat het alleen elementen mogen zijn die een direct kind van de <nav> zijn. Onderstaande a.sluit is een direct kind van <nav>:

<nav> <a class="sluit">(...)</a> </nav>

De eerste a.sluit hieronder is geen direct kind van <nav>, omdat er een <ul> tussen a.sluit en de <nav> zit. De tweede a.sluit is wel een direct kind van <nav>:

<nav> <ul> <a class="sluit">(...)</a> </ul> <a class="sluit">(...)</a> </nav>

In dit voorbeeld is er maar één a.sluit die een direct kind van <nav> is. Binnen deze <a> zit het tweede sluitkruisje, dat rechtsboven in het menu staat.

border-right: none;

De eerder bij .sluit opgegeven border is aan de rechterkant niet nodig, want daar staat het sluitkruisje tegen de rechterkant van de <nav>, en die heeft al een border.

right: 0;

Helemaal rechts in de <nav> zetten.

left: auto;

Eerder is bij .sluit left: 0; opgegeven. Het sluitkruisje kan niet gelijktijdig helemaal rechts en helemaal links staan. Bij zo’n onmogelijke opdracht ’wint’ de waarde voor left van de waarde bij right. Om dat te voorkomen wordt bij left de standaardwaarde opgegeven. Nu werkt de hierboven opgegeven right: 0; wel.

#open:focus, #open:hover, header a:focus, header a:hover, main a:focus, main a:hover

Voor een deel van deze elementen is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

#open {background: white; color: black; display: inline-block; width: 1.7rem; height: 1.95rem; font-size: 1.2rem; line-height: 1.45rem; text-align: center; text-decoration: none; border-right: black solid 1px;}

nav a {background: white; color: black; display: block; text-decoration: none; border: black solid 1px; none;}

.sluit {background: white; color: red; width: 1.7rem; height: 1.7rem; overflow: hidden; font-size: 2.4rem; line-height: 1.75rem; text-decoration: none; border: black solid 1px; border-width: 0 1px 1px 0; position: absolute; top: 0; left: 0;}

nav > .sluit {border-width: 0 0 1px 1px; right: 0; left: auto;}

Een hele serie selectors, zes in totaal. Maar de zes selectors zelf zijn allemaal redelijk simpel. Eerst het deel voor de dubbele punt, het deel voor de pseudo-class.

#open: het element met id=”open”. De link die zorgt voor het openen van het menu en die is te zien als het witte blokje linksboven met het ≡-teken.

Deze link valt ook onder de selector gelijk hieronder header a, want het is een link binnen <header>. Maar #open heeft eerder bij #open een witte achtergrond gekregen. En een selector met een id zoals #open heeft meer specificiteit, meer ’gewicht’ dan een selector zonder id. De selector gelijk hieronder header a heeft geen id en kan daarom nooit ’winnen’ van de eerdere selector #open: de achtergrond blijft gewoon wit. Dat #open eerder in de css staat dan de selector hieronder, maakt niets uit. Volgorde is alleen van belang, als de selectors dezelfde specificiteit, het zelfde ’gewicht’, hebben.

Door ook hier de selector #open te gebruiken, werkt de css wel voor a#open.

header a: alle <a>’s binnen een <header>. Er is maar één <header> in het voorbeeld aanwezig. De <a>’s in die <header> zijn de links die zorgen voor openen en sluiten van het menu, en de links naar de achterliggende pagina’s in dat menu.

main a: de links in <main>. Dat is er maar eentje: de link met de tekst ’Dit is een extra link’ binnen de Latijnse tekst.

Elk van deze drie selectors komt twee keer voor, één keer met :focus achter de selector, en één keer met :hover erachter.

:focus: sommige mensen gebruiken niet de muis, maar de Tab-toets om links, tekstvelden, knoppen, en dergelijke langs te gaan. Als een link wordt bezocht met de Tab-toets, heeft de link ’focus’. Als Enter wordt ingedrukt, wordt de link gevolgd.

Voor gebruikers van de Tab-toets is het belangrijk te weten, welke link focus heeft, welke link kan worden gevolgd. Daarom geeft elke browser met behulp van een kadertje aan, welke link, tekstelement, knop, en dergelijke focus heeft. Maar in dit menu werkt dat niet goed, het is te onduidelijk. Bovendien is het in dit menu ook nog ’ns foeilelijk.

Daarom wordt dat standaardkadertje hier vervangen door een andere manier om de focus aan te geven. Dat gebeurt bij a#open (de link om het menu te openen), bij header a (de links naar de achterliggende pagina’s en de links met de sluitkruisjes in nav), en in main a (de link in de Latijnse tekst).

Normaal genomen zou die link in de Latijnse tekst hier niet onder vallen, maar in dit geval lijkt dat wel nuttig, omdat zo duidelijk wordt dat – als het menu gesloten is – de focus inderdaad rechtstreeks van a#open naar de link in <main> gaat.

:hover: precies hetzelfde verhaal als hierboven bij :focus staat, maar nu als je met de muis over één van de genoemde links hovert.

Het hele verhaal in normale mensentaal: als een link in het menu of in <main> focus heeft, of als over een link in het menu of in <main> wordt gehoverd, doe dan iets met die link.

background-color: #0afdfd;

Achtergrondkleur veranderen in een subtiel knalblauw. (Eh, ja, ik heb dus absoluut geen kleurgevoel....)

font-weight: bold;

Omdat sommige mensen moeite hebben kleuren te onderscheiden, wordt de tekst in de links vet gemaakt. (Bij de link om het menu te openen is dat alleen het ≡-teken, want ’Menu’ staat buiten de link.)

Als de gebruikte lettersoort een vette variant heeft, wordt die gebruikt. De meeste lettersoorten hebben wel een vette variant, soms zelfs meerdere. Een vette variant wordt speciaal ontworpen, het is iets anders dan ’alle lijntjes wat dikker maken’. Sommige letters kunnen er zelfs heel anders uitzien.

Als de lettersoort geen vette variant heeft, maakt de browser de letter vet. Dat wil zeggen dat de browser gewoon alle lijntjes wat dikker maakt. Dat kan mooi zijn, maar vaak is het foeilelijk. Het is heel iets anders dan een speciaal ontworpen font. Elke rechtgeaarde typograaf gruwt hiervan.

outline: none;

Het standaardkadertje bij focus verwijderen.

main

Alle <main>’s. Er is maar één <main> aanwezig. Hier zitten de Latijnse flauwekultekst en de link met de tekst ’Dit is een extra link’ in.

background: white;

Witte achtergrond.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, wordt deze toch specifiek opgegeven. Hierboven is een achtergrondkleur opgegeven. Sommige mensen hebben zelf de voorgrond‑ en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als nu de achtergrondkleur wordt veranderd, maar niet de voorgrondkleur, loop je het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, is redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt in een eigen stylesheet, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Dit is ook al bij <body> opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin, als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

border: black solid 1px;

Zwart randje.

display: block;

Oudere browsers kennen <main> niet. Een onbekend element is standaard een inline-element. Voor die oudere browsers wordt dat hier gecorrigeerd.

padding: 2rem 5px 5px;

Omdat voor links geen waarde is ingevuld, krijgt links automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 2rem 5px 5px 5px in de volgorde boven – rechts – onder – links.

Rechts, onder en boven een kleine afstand tussen buitenkant van en tekst in <main>

Boven een padding van 2 rem. <main> zelf staat bovenaan het venster van de browser, maar daar staat ook de <div> met de grijze balk. Door aan de bovenkant een padding te geven, wordt de tekst in <main> iets lager gezet en verdwijnt deze niet onder de grijze balk.

Als eenheid wordt rem genomen, waardoor breedte en hoogte mee veranderen met de lettergrootte. De rem werkt ongeveer hetzelfde als de bekendere eenheid em, maar is gebaseerd op de lettergrootte van <html>. Daardoor is de rem overal op de pagina altijd even groot, ook bij een andere lettergrootte. Een uitgebreidere uitleg over de rem is te vinden bij height: 2rem;.

JavaScript

De code is geschreven in een afwijkende lettersoort. De code die te maken heeft met de basis van dit voorbeeld (essentiële code) is in de hele uitleg blauw gekleurd. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles in een gewone letter vanwege de leesbaarheid.)

Bij de uitleg van deze code zijn allerlei haakjes en dergelijke grotendeels weggelaten, want dat voert hier te ver. Als je je in dat soort dingen wilt verdiepen, kun je beter naar sites gaan die meer voor JavaScript zijn bedoeld.

Als je onderstaande code ergens aanraakt of ‑klikt, ga je rechtstreeks naar de bijbehorende uitleg.

Als je bovenstaande code ergens aanraakt of ‑klikt, ga je rechtstreeks naar de bijbehorende uitleg.

Met behulp van dit JavaScript wordt voorkomen dat het openen en sluiten van het menu in de geschiedenis van de browser wordt opgeslagen. Hiermee wordt voorkomen dat je, bij gebruik van de Terug-toets, Vooruit-toets of een toetscombinatie als alt+← of alt+→, tussen open en gesloten menu heen en weer gaat. Omdat het openen en sluiten van het menu met behulp van een link gebeurt, wordt die link bij volgen standaard in de geschiedenis van de browser opgeslagen.

Dit script manipuleert het adres van de browser. Daardoor zou het misbruikt kunnen worden om de bezoeker naar een bepaald adres te leiden. Browsers worden steeds strenger beveiligd tegen dit soort misbruik. Daarom werkt het script in veel (alle?) browsers alleen online of op een zelf geïnstalleerde server goed. Gewoon op de desktop is er een grote kans dat dit script niet werkt.

Deze beveiliging is volkomen terecht. Als je toevallig Halbe heet, zou je niet willen dat ’n script op de site van De Telegraaf het adres van de pagina kan veranderen in ’/computer/halbe/erotische-fantasieën/ik-zag-poetins-kruisraket-stijgen.doc’. Om daar vervolgens ’n schermafdruk van te versturen naar de site van De Telegraaf.

Om dezelfde reden kan alleen een adres binnen hetzelfde domein (dezelfde site) worden opgegeven. Een script op ’www.css-voorbeelden.nl’ kan alleen een adres opgeven dat begint met ’www.css-voorbeelden.nl’. Een adres dat met iets anders begint, wordt gewoon genegeerd. (En levert in de console – de duistere ingewanden van de browser – ’n foutmelding op.)

Ik heb eindeloos geprobeerd het adres te veranderen in allerlei bestanden die begonnen met ’ing.nl/overboekingen/betalingen/’, maar dat leverde slechts één geslaagde overboeking op: naar mijn hoster vanwege buitensporig datagebruik.

Serieus: het zal duidelijk zijn, waarom aan dit soort scripts zulke strenge beperkingen worden opgelegd. Als je ergens iets leest over een beveiligingslek in een browser, gaat het vaak om dit soort dingen. Iemand heeft ’n gat gevonden, waardoor ’n script toch zoiets kan doen. Daarom is het ook zo ontzettend belangrijk je browser altijd zo snel mogelijk te updaten. (En een browser te gebruiken die nog wordt onderhouden.)

<script> en </script>

Dit is gewone html: het zijn de openings- en sluittag voor het script. In html5 is de toevoeging type="text/javascript" niet meer nodig.

Als je het script op meer pagina’s wilt gebruiken, kun je er heel simpel een extern script van maken. Je zet het hele script (behalve <script> en </script>, want dat is html en geen JavaScript) in een gewoon tekstbestand met de extensie ’.js’. In de <script>-tag komt het pad naar en de naam van dat bestand te staan:

<script src="pad-naar-script/script.js"></script>

Normaal genomen wordt het verwerken van de html onderbroken, zodra de browser een script tegenkomt. Het script zou immers nodig kunnen zijn voor de opbouw van de pagina.

Daarom staat het script hier helemaal onderaan de html, gelijk boven </body>. Dit script is niet nodig voor de opbouw van de pagina. Door het onderaan te zetten, wordt voorkomen dat het vertragend werkt.

Een andere mogelijkheid is om het wel bovenaan in de <head> te zetten. Veel sitebouwers zetten scripts en dergelijke graag bij elkaar, voor de overzichtelijkheid. In dat geval kun je hetzelfde bereiken met:

<script src="pad-naar-script/script.js" async></script>

Door het toevoegen van het sleutelwoord async weet de browser dat dit script niet nodig is voor de opbouw van de pagina. Het script wordt nu gedownload, terwijl de html gewoon verder wordt verwerkt. Zodra het script is gedownload, wordt het verwerkt, waarbij het verwerken van de html alsnog wordt onderbroken. Maar deze onderbreking is zo kort dat je dat nauwelijks merkt.

(function () {

function: het sleutelwoord waarmee het begin van een functie wordt aangegeven. Een functie is een stukje bij elkaar horende code. (Het haakje helemaal aan het begin wordt iets verderop beschreven.)

(): achter een functie moeten twee haakjes staan. Behalve dat het gewoon zo hoort, kun je hier ook van alles in stoppen om door te geven aan de code in het binnenste van de functie, maar bij deze functie gebeurt dat niet.

{: geeft het begin van de code binnen de functie aan. Aan het eind van de functie, dat is in dit geval helemaal onderaan in de laatste regel van het script, staat een bijbehorende }.

In die laatste regel staat in dit geval nog meer dan alleen de } die het einde van de code aangeeft: }) ();

}: dit is de eerder genoemde afsluitende }, waarmee het einde van de code in de functie wordt aangegeven.

): dit afsluitende haakje is de tegenhanger van het haakje dat voor de functie staat. Samen zorgen ze ervoor dat de hele functie, met alles erop en eraan, tussen haakjes staat. De reden van deze haakjes wordt iets hieronder besproken.

(): dit is weer gewoon een taalregel van JavaScript. In dit geval moeten er achter de }) nog twee haakjes staan. Een computer is gewoon niet zo slim, anders weet de ziel niet wat er moet gebeuren.

;: met de puntkomma wordt in JavaScript een regel afgesloten. Het is te vergelijken met een gewone punt in een tekst.

We hebben hier een script, waarin alle code binnen een functie is geplaatst. Alle code staat tussen { en }, zodat de computer het begin en einde van de functie kan herkennen.

Een functie is een stukje bij elkaar horende code dat je, zo vaak als je wilt, kunt uitvoeren. Als je de tafel van twaalf op het scherm wilt zetten, hoef je niet twaalf vermenigvuldigingen in JavaScript te schrijven, maar schrijf je ’n functie voor één vermenigvuldiging, die je vervolgens tien keer (op steeds iets andere wijze) uitvoert.

Een functie heeft echter één probleem: de code in de functie wordt pas uitgevoerd, als de functie wordt aangeroepen. Dat aanroepen kan op allerlei manieren gebeuren, bijvoorbeeld als de gebruiker ’n toets indrukt, als de pagina is geladen, als het 13:13 is op vrijdag de dertiende, noem maar op. Maar zonder te worden aangeroepen doet een functie helemaal niets.

In dit script is dat ook zo. Er zit een functie in die reageert op het volgen van een link. Om die functie goed te laten werken, moet de computer wat voorbereidend werk verrichten. Daarvoor moet het script worden gelezen. Maar dat hele script zit in een functie, en die functie doet dus pas wat, als die wordt aangeroepen.

Om te zorgen dat de buitenste functie, die waar alle code in zit, toch vanzelf wordt uitgevoerd, zet je er een ( voor. En helemaal aan het eind, achter de afsluitende }, zet je de tegenhanger ). Nu wordt de functie automatisch uitgevoerd, zonder dat deze hoeft te worden aangeroepen. En kan de code in het script worden gelezen, waardoor het benodigde voorbereidende werk kan worden uitgevoerd.

(Je kunt de code ook in een niet alles omvattende functie zetten. Dan wordt de code gelijk uitgevoerd. Maar dat brengt belangrijke risico’s met zich mee. In dit script worden namen voor variabelen gebruikt als ’links’ en ’aantal’. Als nou een ander JavaScript toevallig dezelfde namen zou gebruiken, gaat het gruwelijk mis. Door het hele script in een functie te stoppen, voorkom je dat. Als je hier meer over wilt weten, kun je op internet zoeken naar ’name conflict’ of ’name clash’.)

"use strict";

Deze regel zorgt ervoor dat bepaalde slordigheden in de code, die makkelijk tot grote problemen kunnen leiden, niet meer mogen. Een validator (die controleert op fouten in de code) is nu strenger en keurt meer dingen af.

Een klein aantal oudere browsers ondersteunt dit niet, maar die hebben er verder geen last van, omdat ze de regel gewoon negeren.

for (i = 0; i < aantal; i++) {

for: doe iets met iets, zolang iets waar is. Nou, is dat lekker vaag of niet? Wat er waarmee moet gebeuren, komt later. Dat staat tussen de {} aan het eind van de regel. (In de echte code staat de laatste } lager, achter wat er waarmee moet gebeuren.)

Hier eerst het deel dat ervoor zorgt dat elk eerder gevonden <a>-object netjes aan de beurt komt.

(: met dit haakje opent het deel dat ervoor zorgt dat elk <a>-object aan de beurt komt. Aan het eind van de regel staat de bijbehorende ), waardoor het script weet dat dit het einde van dit deel van de code is.

i = 0;:: hiermee geef je in JavaScript aan dat in de voor het isgelijkteken staande variabele het resultaat van wat achter het isgelijkteken staat, moet worden opgeslagen. In dit geval is dat resultaat heel simpel: het is het getal 0.

De variabele heet hier ’i’. De variabele is eerder al aangemaakt bij var var links, aantal, i, ..., maar wordt nu pas echt gebruikt. i wordt gebruikt als een teller (waarover later meer), en bij dit soort tellers is het gebruikelijk ze de korte naam ’i’ te geven. Dat soort gewoontes maakt het voor mensen een stuk makkelijker elkaars code te lezen en te begrijpen.

Omdat i een variabele is, kan de waarde ervan veranderen, variëren. Wat later in de regel ook gaat gebeuren: elke keer als er een <a>-object is afgehandeld, wordt i met 1 verhoogd. Dat gebeurt in het laatste deel van de regel.

De ; geeft aan dat dit stukje code, waarin de variabele i z’n beginwaarde krijgt, hier eindigt.

i++: eerst het laatste deel van de regel, het middelste deel komt gelijk hieronder.

Elke keer als een in links zittend <a>-object is afgehandeld, 1 optellen bij i. Omdat programmeurs liederlijk lui zijn, wordt ’er 1 bij optellen’ ingekort tot ++.

Als i 0 is, betekent i++: i wordt 0 + 1 (’1’ dus).

Als i 1 is, betekent i++: i wordt 1 + 1 (’2’ dus).

Als i 2 is, betekent i++: i wordt 2 + 1 (’3’ dus).

Als i 13 is, betekent i++: i wordt 13 + 1 (’14’ dus).

En meer dan 14 wordt het niet, vanwege redenen die gelijk hieronder staan.

(Op een pagina met een ander aantal <a>’s dan veertien zal eerder of later worden gestopt met het verhogen van i.)

i < aantal;: het middelste deel van de regel. In aantal is eerder het aantal <a>-objecten in links opgeslagen. Omdat er in dit voorbeeld veertien <a>’s op de pagina staan, is de waarde van aantal 14.

i bevat een getal. Voordat het eerste <a>-object is verwerkt, is dat getal 0, want dat is hierboven opgegeven.

Het teken < betekent: kleiner dan.

De ; aan het einde geeft aan, dat dit stukje code, de voorwaarde waaraan moet worden voldaan, hier eindigt.

In gewone mensentaal staat hier: zolang teller i kleiner is dan aantal.

Als niet meer aan deze voorwaarde wordt voldaan, als teller i niet meer kleiner is dan aantal, stop dan met het uitvoeren van de code die tussen de {} van de for-lus staat. Omdat aantal even groot is als het aantal <a>-objecten in links, geeft dit een mogelijkheid om elk <a>-object precies één keer te verwerken. En er, als ze allemaal verwerkt zijn, mee te stoppen.

): dit haakje hoort bij de ( gelijk achter for. Tussen deze twee haakjes staat de code die ervoor zorgt dat elk <a>-object aan de beurt komt.

{: het laatste teken op de regel. Hiermee geef je aan dat hierna de code volgt die uitgevoerd moet worden. Tot nu toe is alleen gezorgd dat er bij elk <a>-object íéts moet gebeuren, maar nog niet wát. Dat wát volgt na deze {. Na de code die moet worden uitgevoerd staat nog een afsluitende }. Hiermee geef je aan dat het uitvoerende deel van de code bij de for-lus hier stopt.

Dat uitvoerende deel is op een nieuwe regel gezet, net zoals de afsluitende }. Dat soort dingen zijn informele afspraken, omdat het de code voor mensen leesbaarder maakt. Wat de computer betreft zou je alles ook achter elkaar kunnen zetten op één onwijs lange regel. Alleen is niet alleen die regel dan onwijs, ook de gemiddelde programmeur zou heel snel bijzonder onwijs worden, als alles op één lange regel wordt gezet.

Elke keer als een <a>-object is behandeld (met het stukje code tussen de {}, wat hieronder aan de beurt komt), wordt i door middel van i++ met 1 verhoogd.

Aan het begin heeft i de waarde 0. Na de eerste ronde heeft i de waarde 1. Na de tweede ronde heeft i de waarde 2. Na de derde ronde heeft i de waarde 3. Na de veertiende ronde heeft i de waarde 14. Waarmee i niet meer kleiner is dan aantal, dan het aantal <a>-objecten.

Omdat niet meer aan de voorwaarde i < aantal wordt voldaan, wordt gestopt met het behandelen van de <a>-objecten. En dat komt goed uit, want alle <a>-objecten zijn precies allemaal één keer aan de beurt gekomen. Niet meer, niet minder. Bij allemaal is de tussen de {} staande code één keer toegepast.

De code tussen de haakjes in gewone taal: zet teller i op 0 als de for de eerste keer wordt uitgevoerd. Herhaal de for zolang teller i lager is dan het aantal <a>-objecten. Verhoog teller i elke keer als de for wordt uitgevoerd met 1.

function geenHistory (e) {

Ook deze functie is, zoals elke functie, weer een stukje bij elkaar horende code. Maar anders dan de buitenste functie, wordt deze niet automatisch uitgevoerd. (Waarom de buitenste functie wel automatisch wordt uitgevoerd, is te vinden bij (function () {.)

De code in deze functie wordt alleen uitgevoerd, als de functie wordt aangeroepen. Dat aanroepen gebeurt, als een link wordt aangeklikt of -geraakt. (Of, als de link focus heeft, door het indrukken van Enter.) Het luisteren naar een aanraking of klik wordt geregeld bij links[i].addEventListener("click", geenHistory);.

De code in deze functie voorkomt dat de gevolgde link in de geschiedenis van de browser wordt opgeslagen.

function: het sleutelwoord waarmee het begin van een functie wordt aangegeven.

geenHistory: de naam van de functie. Als het beestje geen naam heeft, kun je het ook niet aanroepen en heb je er dus niets aan. (Dit klopt niet helemaal. JavaScript kent ook equivalenten van ’hé!’, ’hé, jij daar!’, ’hé, jij daar in die zwarte jas’, en dergelijke, maar die worden hier niet gebruikt. En het is zo al ingewikkeld genoeg.)

(e): die haakjes horen nou eenmaal zo na de naam van een functie. Behalve dat het gewoon zo hoort, kun je hier ook van alles in stoppen om door te geven aan de code in het binnenste van de functie. Zoals de plaats waar het scherm is aangeraakt of -geklikt. In dit geval wordt e doorgegeven.

e is een zogenaamd object. In een object zitten allerlei gegevens over hoe de functie is aangeroepen (over dat aanroepen later meer). In dit geval wordt deze functie aangeroepen door het klikken op of aanraken van een <a>. In e zit bijvoorbeeld de hoogte en breedte van de <a>. En of toevallig ook Shift is ingedrukt. En nog ’n waanzinnige andere hoop informatie, waarvan het overgrote deel hier verder niet wordt gebruikt.

Heel formeel is e eigenlijk geen object, maar is e een parameter, iets dat wordt doorgegeven aan de functie, zodat het binnen die functie gebruikt kan worden. e is de naam van het object, en de inhoud van e is een object. Om het object iets te kunnen vragen, of het iets te laten doen, moet het beestje ’n naam hebben: e.

De naam e voor het object is niet verplicht, maar ’n soort afspraak, zodat code makkelijker door anderen is te begrijpen. Maar als je het object niet e, maar ’hetIsStervenskoud’ wilt noemen, is daar technisch geen enkel bezwaar tegen. Het is dan wel verstandig een cursus zelfverdediging te volgen, voor het geval iemand anders ooit je code moet bekijken.

(e is een afkorting van ’event’, gebeurtenis. De functie reageert op een gebeurtenis, in dit geval het volgen van een <a>. In e zit het object dat bij díé gebeurtenis hoort. Bij bijvoorbeeld een muisklik krijg je een ander object met andere informatie dan bij het indrukken van een toets.)

{: geeft het begin van de code binnen de functie aan. Aan het eind van de functie staat een bijbehorende }.

location.replace(e.target.href);

Deze regel is onderdeel van function geenHistory (e)

In deze ene regel gebeurt eigenlijk alles. De rest van het script was alleen voorbereiden, de juiste <a>’s eruit filteren, en dergelijke. Maar Hier Gebeurt Het. Dus.

Als een link wordt gevolgd, wordt deze normaal genomen opgeslagen in de geschiedenis van de browser. Met de Terug- en Vooruit-toets van de browser, en met toetscombinaties als Alt+← en Alt+→, kun je door die geschiedenis bladeren. Op die manier kun je snel eerder bezochte pagina’s terugvinden.

Op deze pagina zijn veertien <a>’s aanwezig, waarvan er drie een link zijn om het menu te openen of te sluiten. Het is tamelijk zinloos om die drie links in de geschiedenis op te slaan. Je zou dan, als je het menu hebt geopend en gesloten en naar ’n vorige pagina wilt, eerst het menu nogmaals één of meer keren openen en sluiten, voordat je bij ’n vorige pagina aankomt.

Deze regel zorgt ervoor dat de links om het menu te openen en te sluiten wel worden gevolgd, maar dat deze niet in de geschiedenis terecht komen. (Je kunt er nog wel gewoon ’n favoriet (of bookmark, of hoe het beestje ook heet) van maken. Ook zit het adres nog gewoon in de lijst met bezochte adressen. Maar dat lijkt bij deze links wat nutteloos.)

location: als een pagina wordt geopend, wordt allerlei informatie in de browser opgeslagen. Die informatie kan door onder andere JavaScript gebruikt worden. De informatie is overzichtelijk opgeslagen in allerlei afdelingen en onderafdelingen, die in JavaScript ’object’ heten.

Een van die objecten is het ’window’ object. Daarin zit allerlei informatie, die betrekking heeft op de pagina. De informatie in ’window’ is weer opgesplitst in allerlei kleinere objecten. Een van die objecten is ’location’. Hierin zit alles dat met het adres van de pagina te maken heeft: protocol, domeinnaam, naam van de pagina, noem maar op.

(Eigenlijk zou je dus window.location.pathname moeten gebruiken, maar omdat ’window’ zo vaak voorkomt, mag je dat weglaten: de browser vult dat automatisch aan.)

De informatie die in location zit, kan worden gewijzigd. Als dat gebeurt, verschijnt er een nieuw adres in de adresbalk van de browser, en de browser zal naar het nieuwe adres gaan.

Vanwege de veiligheid kan een adres alleen maar binnen dezelfde site worden veranderd. Vanwege diezelfde veiligheid zijn er ook beperkingen, als je dit script op de desktop uitvoert. Testen kan om die reden in (vrijwel) alle browsers alleen online, of als je zelf ’n server installeert. Een iets uitgebreider verhaal hierover is te vinden bij Dit script manipuleert...

replace: dit is een in JavaScript ingebouwde functie, een stukje bij elkaar horende code. Dat het een functie is, kun je weer zien aan de () achter de functie. De code in deze functie wordt uitgevoerd: vervang (’replace’) het adres met het adres dat tussen de haakjes achter replace staat.

Je kunt het adres op meerdere manieren veranderen. In dit geval is het voordeel van replace() dat het nieuwe adres niet in de geschiedenis van de browser wordt opgeslagen. Je kunt er nog wel gewoon ’n favoriet (of bookmark, of hoe het beestje ook heet) van maken. Ook zit het adres nog gewoon in de lijst met bezochte adressen.

(e.target.href): dit is het nieuwe adres, alleen is het zo op het oog niet echt herkenbaar als een adres. Het adres zit verstopt in een variabele.

e: dit is de e die tussen de haakjes bij function geenHistory (e) stond. e is een object met een hele berg aan informatie over de link, die is aangeraakt of -geklikt. Deze informatie is beschikbaar voor de code binnen de functie en kan hier dus worden gebruikt.

Omdat een browser niet zo slim is, moet je hem wel even vertellen dat hij in e moet zoeken, vandaar dat e aan het begin staat.

target: dit is de specifieke <a>, en alle bij die <a> horende informatie, die is aangeraakt of -geklikt. In e zit nog meer informatie, zoals waar precies op het scherm is geklikt. Maar in target zit de informatie die bij de <a> hoort. (De <a> was het ’target’ van de muisklik of aanraking.)

href: in href zit het adres van de <a>. Bij <a href="#nav"> (de link om het menu te openen) is dat bijvoorbeeld ’https://www.css-voorbeelden.nl/menu/statisch/verticaal/menu-125.html#nav’. In de html staat als doel in de href alleen ’#nav”, maar de browser maakt daar automatisch een volledig adres van. (Dit adres hoort natuurlijk bij de site met dit voorbeeld. Op een andere site zul je ’n ander adres krijgen.)

e.target.href: bij elkaar: het doel van de <a>, aangevuld tot het volledige adres.

De hele regel in normale mensentaal: vervang het adres van de pagina door het adres van de link, waarop is geklikt (of die is aangeraakt, of op ’n andere manier is gevolgd). Als gevolg hiervan zal de browser naar het nieuwe adres gaan. In dit geval is het adres eigenlijk geen echt adres, maar een link binnen de pagina waarmee het menu wordt geopend of gesloten. Dit nieuwe adres wordt ook zichtbaar in de adresbalk bovenin de browser. (Niet alle browsers tonen het volledige adres.)

Hoewel dit adres niet in de geschiedenis van de browser wordt opgeslagen, kan er gewoon een favoriet of bookmark (of hoe het beestje verder ook heet) van worden gemaakt. Ook staat het adres gewoon in de lijst met bezochte pagina’s.