Skip links en inhoudsopgave

Navigatie site

Naar begin tekstSla alle (onzichtbare) links in de inhoud over en ga naar het begin van de tekst

In smallere vensters inschuifmenu, in bredere vensters verticaal menu met tekeningen - uitleg

Laatst aangepast: .

Inschuifmenu in smallere vensters, verticaal menu in grotere vensters

Korte omschrijving

Simpel verticaal menu met links een verticale rij tekeningen. In smallere browservensters worden de links alleen op verzoek getoond.

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.

In tegenstelling tot wat meestal het geval is, wijkt in dit voorbeeld de code op de site behoorlijk af van de code in de download. Het menu van de site en het menu van het voorbeeld vonden elkaar niet zo aardig, vandaar. Hierdoor sluit de uitleg hier en daar niet goed aan op de code van het voorbeeld op de site. Als je dat verwarrend vindt, kun je het best het voorbeeld downloaden. In de download sluiten uitleg en code wel goed op elkaar aan.

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.)

In tegenstelling tot wat meestal het geval is, wijkt in dit voorbeeld de code op de site behoorlijk af van de code in de download. Het menu van de site en het menu van het voorbeeld vonden elkaar niet zo aardig, vandaar. Hierdoor sluit de uitleg hier en daar niet goed aan op de code van het voorbeeld op de site. Als je dat verwarrend vindt, kun je het best het voorbeeld downloaden. In de download sluiten uitleg en code wel goed op elkaar aan.

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.

Achterliggend idee

In een ongeordende lijst staat een menu met zes links, die bestaan uit een korte tekst met daaronder een afbeelding. Tekst en afbeelding vormen één geheel.

Met behulp van flexbox worden de links onder elkaar neergezet, met daarnaast de belangrijkste inhoud van de pagina.

In smallere browservensters is geen ruimte voor links met afbeeldingen naast of boven de tekst. Daarom wordt in smallere vensters het menu standaard verborgen. Pas na aanvinken van een aankruisvakje wordt het menu getoond. Omdat een aankruisvakje nou niet echt heel mooi is, wordt dit verborgen onder een opgeleukte link.

Door een paar kleine aanpassingen is het menu ook bruikbaar voor schermlezers en gebruikers van de Tab-toets.

De voorvoegsels -moz-, -ms- en -webkit-

Voordat een nieuwe css-eigenschap wordt ingevoerd, is er in de regel een experimentele fase. Browsers passen het dan al toe, maar met een aangepaste naam. Tijdens deze fase kunnen problemen worden opgelost en worden veldslagen uitgevochten, over hoe de standaard precies moet worden toegepast.

Als iedereen het overal over eens is en alle problemen zijn opgelost, wordt de officiële naam uit de standaard gebruikt.

De belangrijkste browsers hebben elk een eigen voorvoegsel:

Firefox: -moz-, naar de maker: Mozilla.

Op webkit gebaseerde browsers, zoals Edge, Google Chrome, Opera, Safari en Android browser: -webkit-.

(Google Chrome is van webkit overgestapt op een eigen weergave-machine: Blink. Blink gaat geen voorvoegsels gebruiken. Het is echter een aftakking van webkit, dus het zal nog wel even duren voor -webkit- hier helemaal uit is verdwenen. Ook Opera en Edge gebruiken Blink.)

Internet Explorer: -ms-, naar de maker: Microsoft.

Zodra de experimentele fase voorbij is, wordt het voorvoegsel weggelaten. Omdat dat moment niet bij alle browsers hetzelfde is, zet je nu ook al de officiële naam erbij. Deze wordt als laatste opgegeven. Bijvoorbeeld Firefox herkent -moz-appearance. Zodra Firefox appearance gaat herkennen, zal dit moz-appearance overrulen, omdat het er later in staat. Dat ze er beide in staan, is dus geen enkel probleem.

In dit voorbeeld worden appearance en hyphens gebruikt.

appearance

Op dit moment moet je nog het volgende schrijven:

{-moz-appearance: ...; -webkit-appearance: ...; appearance: ...;}

In de toekomst kun je volstaan met:

{appearance: ...;}

hyphens

Op dit moment moet je nog het volgende schrijven:

{-ms-hyphens: ...; -webkit-hyphens: ...;, hyphens: ...;}

In de toekomst kun je volstaan met:

{hyphens: ...;}

Inmiddels is de algemene mening dat 'vendor prefixes', zoals deze voorvoegsels in het Engels heten, geen groot succes zijn. Eén van de grootste problemen: veel sitemakers gebruiken alleen de -webkit-variant. Daar kwamen ze in het verleden nog mee weg, omdat Apple op mobiel zo'n beetje 'n monopolie had. Inmiddels is dat niet meer zo, maar deze gewoonte bestaat nog steeds. Waardoor 'n site alleen in op webkit georiënteerde browsers goed is te bekijken.

Dit is zo'n groot probleem dat andere browsers soms de variant met -webkit- ook maar zijn gaan implementeren, naast de standaard. Want als 'n site het niet goed doet in 'n bepaalde browser, krijgt in de regel niet de site maar de browser de schuld.

Vanwege alle problemen met 'vendor prefixes' worden deze niet meer gebruikt. Nieuwe, experimentele css-eigenschappen zitten inmiddels achter een zogenaamde vlag: de gebruiker moet iets veranderen in de instellingen, waarna de eigenschap gebruikt (en getest) kan worden. Als alles werkt, zoals het hoort te werken, schakelt de browsermaker de vlag standaard in.

Voorlopig zijn we echter nog niet van deze voorvoegsels af. Als je ze gebruikt, gebruik dan álle varianten, en eindig met de variant zonder voorvoegsel, zoals die uiteindelijk ooit gebruikt gaat worden. Als je alleen de -webkit-variant gebruikt, ben je in feite 'n onbetaalde reclamemaker voor Apple.

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 alleen <header>, <nav> en <main> gebruikt. Deze drie elementen gedragen zich als een gewone <div>, maar dan een <div> met semantische inhoud.

<header>

Een <header> gedraagt zich als een gewone <div>, maar dan een <div> met een semantische betekenis: de header van de pagina of een onderdeel daarvan.

Een <header> mag vaker op één pagina worden gebruikt. De <header> hoort altijd bij de eerste voorouder, die een <body>, <main>, <article>, <aside>, <nav>, <section>, <blockquote>, <details>, <dialog>, <fieldset>, <figure> of <td> is.

Als de eerste voorouder <body> is, zoals hier het geval is, is de <header> de <header> van de hele pagina.

<nav>

Ook <nav> gedraagt zich als een gewone <div>, maar dan een <div> met een semantische betekenis: navigatie. Hierdoor kunnen schermlezers, zoekmachines, en dergelijke gelijk zien dat hierin links zijn ondergebracht, waarmee je naar andere pagina's en dergelijke kunt gaan.

Omdat <nav> alleen aangeeft dat hierin een of andere vorm van navigatie is ondergebracht, maar niet wat voor navigatie, staat bovenin de <nav> 'Navigatie voorbeeld' in een <h2>. Deze <h2> staat onzichtbaar buiten het scherm geparkeerd, maar schermlezers lezen hem gewoon voor.

In het voorbeeld staat maar één soort navigatie, maar bijvoorbeeld op de site staan niet alleen de links van het voorbeeld, maar ook de navigatie voor de site zelf. Door op de site beide <nav>'s van een verborgen kop te voorzien, kunnen schermlezers en dergelijke achterhalen, om welke navigatie het gaat.

<main>

Hierbinnen staat de belangrijkste inhoud van de pagina (in dit voorbeeld is dat alleen opvultekst).

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.

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 drie WAI-ARIA-codes gebruikt: aria-hidden, aria-label en aria-labelledby.

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.

Iets boven de <ul> staat een <label>:

<label id="toon-menu" for="checkbox-voor-smal" aria-hidden="true">Menu </label>

Deze <label> hoort bij input#checkbox-voor-smal, waarmee het menu getoond en verborgen kan worden. De <label> zet het woordje 'Menu ' bovenaan de pagina met daarachter, afhankelijk van de staat van het menu, het woordje 'openen' of 'sluiten'.

Om de <input> goed te laten werken, moet de <label> na de <input> staan in de html. Voor de <input> staat nog een <h2> met de titel van het menu, die buiten het scherm wordt geparkeerd, zodat deze onzichtbaar is. Een schermlezer leest die <h2> echter gewoon voor, zodat de gebruiker van de schermlezer weet, waarvoor het menu dient.

Nadat de schermlezer de <h2> met 'Navigatie voorbeeld' heeft voorgelezen, wordt het aankruisvakje gemeld. Vervolgens staat er echter nog het woordje 'Menu ' in de html, met daarachter 'openen' of 'sluiten'. Ook dit wordt voorgelezen, wat hoogst verwarrend is.

Daarom wordt de hele <label> met aria-hidden="true" verborgen voor schermlezers. Voor de gewone werking van de pagina maakt dit niets uit, alleen schermlezers negeren de <label>. (Dat de functie van het aankruisvakje nu onduidelijk is, wordt gelijk hieronder opgelost.)

aria-label

Hier gelijk boven is de <label> bij het aankruisvakje met aria-hidden="true" verborgen voor schermlezers. Nu is echter volstrekt onduidelijk, waarvoor het aankruisvakje dient. Daarom wordt dit met aria-label bij het aankruisvakje zelf opgegeven:

<input id="checkbox-voor-smal" type="checkbox" aria-label="Vink aan om menu te openen">

De tekst 'Vink aan om menu te openen' is niet zichtbaar, maar wordt wel voorgelezen door schermlezers.

aria-labelledby

Bovenaan een <nav> hoort een titel te staan, zodat schermlezers weten, waarvoor het menu in de <nav> dient. Voor mensen die de pagina kunnen zien, zal dat zo al duidelijk zijn, maar voor gebruikers van een schermlezer niet.

Vaak zijn op een pagina meerdere menu's aanwezig, en dan is het helemaal belangrijk dat duidelijk is, waar het menu voor dient. Daarom wordt bij de <nav> verwezen naar de al eerder voor schermlezers opgegeven <h2> met 'Navigatie voorbeeld':

<nav aria-labelledby="navigatie-vb">

Door naar de id van de <h2 id="navigatie-vb">Navigatie voorbeeld</h2> te verwijzen, wordt de inhoud van de <h2> gekoppeld aan het menu.

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.

De tabindex kan drie verschillende waarden hebben: -1, 0 of een positief getal.

In principe is de volgorde bij gebruik van de Tab-toets als volgt: eerst worden alle positieve getallen in volgorde afgewerkt. Als twee tabindexen dezelfde waarde hebben, wordt de volgorde in de html aangehouden. Een waarde van '0' wordt, afhankelijk van browser en besturingssysteem, verschillend behandeld, waarover iets hieronder bij Tabindex="0" meer.

tabindex="-1"

Een negatieve waarde van -1 zorgt ervoor dat het element volledig wordt genegeerd door de Tab-toets. Zelfs een link met een negatieve tabindex wordt volledig genegeerd. Normaal genomen heeft een tabindex="-1" maar één nut: je kunt dan met behulp van JavaScript toch focus aan het element geven, zonder dat gebruikers van de Tab-toets erdoor worden gehinderd.

In dit voorbeeld wordt tabindex="-1" niet gebruikt.

tabindex="..."

Op de plaats van de puntjes moet een positief getal worden ingevuld: het volgnummer. Een element met een positieve tabindex wordt altijd bezocht bij gebruik van de Tab-toets, ook als dit element normaal genomen zou worden genegeerd. Elementen met een tabindex met een positief volgnummer worden altijd als eerste bezocht, voor elementen als een link of tekstveld zonder tabindex, en ook voor elementen met tabindex="0".

Hierbij wordt de volgorde van de volgnummers aangehouden: van laag naar hoog.

In dit voorbeeld wordt een positieve tabindex niet gebruikt.

tabindex="0"

Volgens de specificatie van html 4.01 moest een tabindex="0" pas worden bezocht, nadat tabindexen met een positief nummer waren bezocht. Sommige browsers hielden zich hier echter niet aan: een tabindex="0" werd gewoon tussen de positieve tabindexen gezet.

In html5 is de situatie nog fijner. Nu staat er alleen dat, wat betreft de volgorde, de browser mag doen wat hij wil. Oftewel: doe maar raak. Maar hoe dan ook: als je tabindex="0" gebruikt, kan een element focus krijgen met behulp van de Tab-toets. Ook als dat element normaal genomen geen focus kan krijgen.

(In de praktijk blijkt trouwens dat alle browsers de volgorde van de html aanhouden bij tabindex="0", nadat eerst alle tabindexen met een positief nummer zijn bezocht.)

In het voorbeeld heeft <main> een tabindex="0"

<main id="content" lang="en" tabindex="0">

Bovenaan de pagina staat een zogenaamde skip-link, een link waarmee in één keer het menu kan worden gepasseerd. Dit is van belang voor gebruikers van de Tab-toets en voor schermlezers. Deze hoeven zich nu niet op elke pagina eerst door een (lang) menu heen te werken. (Schermlezers hebben ook nog andere manieren om een menu in één keer te passeren).

In het voorbeeld staat een skip-link naar het element <main>:

<a id="skippy" href="#content">Skip menu</a>

In Verteller, de schermlezer van Windows, werkt deze skip-link alleen maar, als <main> een tabindex heeft.

Muis, toetsenbord, touchpad en touchscreen

Vroeger, toen het leven nog mooi was en alles beter, waren er alleen monitors. Omdat kinderen daar niet af konden blijven met hun tengels, besloten fabrikanten dan maar touchscreens te gaan maken, omdat je die mag aanraken. Het bleek makkelijker te zijn om volwassenen ook te leren hoe je 'n scherm vies maakt, dan om kinderen te leren met hun vingers van de monitor af te blijven.

Zo ontstonden touchscreens en kreeg het begrip ellende een geheel nieuwe lading. In de perfecte wereld van vroeger, waarin alleen desktops bestonden, werkten dingen als hoveren, klikken en slepen gewoon. Zonder dat je eerst 'n cursus hogere magie op Zweinstein hoefde te volgen. Zelfs in JavaScript was het nog wel te behappen, ook voor mensen zoals ik die toevallig niet Einstein heten.

Op dit moment kun je computerschermen ruwweg in twee soorten indelen: schermen die worden aangeraakt, en schermen die worden bediend met hulpmiddelen als een toetsenbord, muis of touchpad. Omdat ook computerschermen zich kennelijk vermengen, bestaan er inmiddels ook schermen die zowel van aanraken als van muizen houden.

Hieronder staat een lijstje met dingen die zijn aangepast voor de verschillende soorten schermen, zodat dit voorbeeld overal werkt. Een touchpad werkt ongeveer hetzelfde als een muis. Als hieronder iets over een muis staat, geldt dat ook voor een touchpad.

:hover

Omdat :hover mogelijk niet werkt, als css uitstaat, ontbreekt of onvolledig is geïmplementeerd, moet je nooit belangrijke informatie alleen met behulp van :hover tonen.

Je hovert over een element, als je met behulp van muis of touchpad de cursor boven dat element brengt. Hoveren kan over álle elementen. Het wordt veel gebruikt om iets van uiterlijk te laten veranderen, een pop-up te laten verschijnen, en dergelijke.

Op een touchscreen wordt hoveren vaak hetzelfde afgehandeld als een aanraking.

Bij gebruik van een muis is er een verschil tussen hoveren en klikken, maar op een touchscreen is dat verschil er niet: je raakt een touchscreen aan of niet. Dat levert vooral soms problemen op, als bij een element :hover én klikken worden gebruikt, zoals bij een link die bij hoveren erover verkleurt. Omdat deze combinatie niet wordt gebruikt in dit voorbeeld, spelen deze problemen niet. Een aanraking op een touchscreen werkt in dit geval hetzelfde als hoveren met een muis.

:focus

Omdat :focus mogelijk niet werkt, als css uitstaat, ontbreekt of onvolledig is geïmplementeerd, moet je nooit belangrijke informatie alleen met behulp van :focus tonen.

De meeste mensen gaan met een muis naar een link, invoerveld, en dergelijke. Waarna ze vervolgens klikken om de link te volgen, tekst in te voeren, of wat ze ook maar willen doen. (Dit geldt uiteraard niet voor touchscreens.)

Er is echter 'n tweede manier om naar links, invoervelden, en dergelijke te gaan: met behulp van de Tab-toets kun je naar links, invoervelden, en dergelijke 'springen'. (Over het gebruik van de Tab-toets staat meer bij Tabindex en Tab-toets.)

Waar je staat, wordt door alle browsers aangegeven met een of ander kadertje. De link en dergelijke met het kadertje eromheen 'heeft focus'. Dat wil zeggen dat je die link volgt, als je op de Enter-toets drukt, of dat je in dat veld tekst kunt gaan invoeren, enzovoort

:focus wordt in dit voorbeeld alleen gebruikt om voor gebruikers van de Tab-toets de skip-link zichtbaar te maken.

:active

Omdat :active mogelijk niet werkt, als css uitstaat, ontbreekt of onvolledig is geïmplementeerd, moet je nooit belangrijke informatie alleen met behulp van :active tonen.

Een element is actief, als de muis wordt ingedrukt boven dat element. Op sommige touchscreens is het element actief, als het wordt aangeraakt. :active wordt niet gebruikt in dit voorbeeld.

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 9 november 2020.

Onder dit kopje staat alleen maar, hoe en waarin is getest. Alle eventuele problemen, ook die met betrekking tot zoomen, lettergroottes, toegankelijkheid, uit staan 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!

Dit voorbeeld is getest op de volgende systemen:

Desktopcomputers

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

OS X 10.14.6 ('Mojave') (1680 x 1050 px, resolution: 96 ppi, device-pixel-ratio: 1):
Firefox, Safari, Google Chrome en Microsoft Edge, in grotere en kleinere browservensters.

Linux (Kubuntu 18.04 LTS, 'Bionic Beaver') (2560 x 1080 px, resolution: 96 ppi):
Firefox en Google Chrome, in grotere en kleinere browservensters.

Laptops

Windows 8.1 (1366 x 768 px, resolution: 135 ppi):
Bureaublad-versie: Firefox, Google Chrome, Internet Explorer 11 en Edge, in grotere en kleinere browservensters.
Startscherm-versie: Internet Explorer 11.

Windows 10 (1600 x 900 px, resolution: 106 ppi):
Firefox, Google Chrome, Internet Explorer 11 en Edge, in grotere en kleinere browservensters.

Tablets

iPad met iOS 12.4.9 (2048 x 1536 px, device-pixel-ratio: 2:
Safari, Chrome, Firefox en Microsoft Edge (alle portret en landschap).

iPad met iPadOS 14.2 (2160 x 1620 px, 264 ppi):
Safari, Chrome, Firefox en Microsoft Edge (alle portret en landschap).

Android 4.4.2 ('Kitkat') (1280 x 800 px, resolution: 149 ppi):
Firefox en Chrome (alle portret en landschap).

Android 4.4.2 ('Kitkat') (2560 x 1600 px, resolution: 299 ppi):
Firefox en Chrome (alle portret en landschap).

Android 6.0 ('Marshmallow') (1920 x 1200 px, resolution: 224 ppi):
Samsung Internet, Firefox en Chrome (alle portret en landschap).

Android 8.1.0 ('Oreo') (1920 x 1200 px, resolution: 218 ppi):
Samsung Internet, Firefox, Microsoft Edge en Chrome (alle portret en landschap).

Android 10 (2000 x 1200 px, resolution: 225 ppi):
Samsung Internet, Firefox, Microsoft Edge en Chrome (alle portret en landschap).

Smartphones

iPhone met iOS 10.3.1 (1334 x 750 px, 326 ppi) (gesimuleerd in Xcode):
Safari (portret en landschap).

iPhone met iOS 12.4 (1334 x 750 px, 326 ppi) (gesimuleerd in Xcode):
Safari (portret en landschap).

iPhone met iOS 14.2 (1334 x 750 px, 326 ppi):
Safari, Chrome, Firefox en Microsoft Edge (alle portret en landschap).

Android 7.0 ('Nougat') (1280 x 720 px, resolution: 294 ppi):
Samsung Internet, Firefox, Microsoft Edge en Chrome (alle portret en landschap).

Android 9.0 ('Pie') (1920 x 1080 px, resolution: 424 ppi):
Samsung Internet, Firefox, Microsoft Edge en Chrome (alle 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, iPadOs en Android, 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 in Edge is niet getest zonder JavaScript, omdat Microsoft het onmogelijk heeft gemaakt dit uit te zetten. Ten slotte 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.

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

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

VoiceOver is een in iOS en OS X ingebouwde schermlezer. Er is getest in combinatie met Safari op iOS 12.4.9 en 14.1, iPadOS 14.2 en OS X 10.14.6.

ChromeVox is een schermlezer in de vorm van een extensie bij Google Chrome. Er is getest op een systeem met Kubuntu Linux 18.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 → Schermlezers, tekstbrowsers, en dergelijke.)

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 html-validator, de css met de css-validator van w3c. 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 wat betreft toegankelijkheid aanpassingen en problemen hier bij elkaar in dit hoofdstukje.

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 geen problemen aanwezig zijn, staat in een smal groen kadertje 'Geen problemen'. Bij een onderwerp over toegankelijkheid zijn er soms geen problemen, maar alleen aanpassingen. Ook in dat geval staat bovenaan in een smal groen kadertje 'Geen problemen'. Daaronder staan dan de aanpassingen.

Als in een onderdeel één of meer problemen worden besproken, staat van elk probleem in een breed rood kadertje een korte samenvatting daarvan.

Als bij het probleem een oplossing wordt gegeven, staat de samenvatting in een rode stippellijn.

Als bij het probleem geen oplossing is gevonden, staat de samenvatting in een rode ononderbroken lijn.

Zonder JavaScript

Geen problemen.

Omdat JavaScript niet wordt gebruikt, heeft het aan- of uitstaan van JavaScript geen enkel effect.

Zonder css

Geen problemen.

Alle links en tekst worden gewoon getoond. De links werken gewoon. Maar de lay-out is natuurlijk volledig verstoord. Ook worden de (nu overbodige) <input> en <label> om in smallere browservensters het menu te openen getoond.

Zonder afbeeldingen

Geen problemen.

Er zijn geen afbeeldingen, maar de links werken nog steeds.

Zonder css én zonder afbeeldingen

Geen problemen.

Alle links en tekst worden gewoon getoond. De links werken gewoon, maar er zitten uiteraard uiteraard geen afbeeldingen in de links. De lay-out is volledig verstoord. Ook worden de (nu overbodige) <input> en <label> om in smallere browservensters het menu te openen getoond.

Gebruikers Tab-toets

Geen problemen.

Alle links zijn met de Tab-toets bereikbaar.

Tekstbrowsers

Geen problemen.

Lynx en WebbIE tonen alle links en tekst, maar ook de (nu overbodige) <input> en <label> om in smallere browservensters het menu te openen.

Schermlezers

Probleem: in TalkBack op Android 6 en eerder en in iOS 12 en eerder werkt de skip-link niet.

Als een schermlezer de pagina voorleest, wordt eerst het menu voorgelezen. Dat kan behoorlijk irritant zijn, zeker als het menu wat langer is en op 'n (groot) aantal pagina's bovenaan de pagina staat. Daarom is voor het menu een skip-link neergezet, waarmee het menu in één keer gepasseerd kan worden.

Deze skip-link is normaal genomen onzichtbaar, maar dat zou voor schermlezers geen probleem horen te zijn: ook als een link buiten het browservensters staat, zou deze horen te werken. En inmiddels is dat ook zo in de meeste schermlezers.

In TalkBack, de schermlezers van Android, werkt een link buiten het browservenster pas in Android versie 7 en later.

In VoiceOver werkt op iOS 12 en eerder een link binnen de pagina gewoon helemaal nooit. Hij wordt wel netjes afgehandeld door VoiceOver, maar vervolgens gaat het voorlezen gewoon op dezelfde plaats verder. In iOS 13 (en iPadOS 13) en later is dit eindelijk opgelost.

Zoomen en andere lettergrootte

Geen problemen.

Wijzigingen

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

:

Nieuw opgenomen.

6 april 2009:

Tekst aangepast aan de nieuw verschenen Internet Explorer 8. De code is niet veranderd.

26 oktober 2020:

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-045-dl.html: de pagina met het voorbeeld.

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

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

045-css-dl:

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

menu-045-hulp-dl.css: stylesheet voor de hulppagina achter de knoppen in het menu.

045-files-dl:

menu-045-menu-achter-dl.html: hulppagina achter de knoppen in het menu.

045-pics:

zes afbeeldingen voor gebruik in het menu. De afbeeldingen zijn afkomstig van de helaas niet meer bestaande site www.davidpye.com en kunnen vrij worden gebruikt.

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.

In tegenstelling tot wat meestal het geval is, wijkt in dit voorbeeld de code op de site behoorlijk af van de code in de download. Het menu van de site en het menu van het voorbeeld vonden elkaar niet zo aardig, vandaar. Hierdoor sluit de uitleg hier en daar niet goed aan op de code van het voorbeeld op de site. Als je dat verwarrend vindt, kun je het best het voorbeeld downloaden. In de download sluiten uitleg en code wel goed op elkaar aan.

<!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 html5 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 breedte van de <div> met de zwarte rand aangepast aan de breedte van het browservenster.

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="skippy" href="#content">Skip menu</a>

Sommige mensen gebruiken niet de muis, maar de Tab-toets om links, tekstvelden, en dergelijke af te lopen. Dat kan zijn vanwege een handicap, maar soms is het gewoon ook veel sneller dan de muis, bijvoorbeeld in formulieren.

Als bovenaan de pagina een menu met links staat, moet de gebruiker eerst door al die links heen. Voor elke link moet één keer de Tab-toets worden ingedrukt. Nu valt dat hier wel mee, omdat het om slechts zes links gaat (en er bovendien geen 'echte' inhoud op de pagina is). Maar als het om een menu met 37 links gaat dat je elke pagina opnieuw weer tegenkomt, kan dat aardig gaan vervelen. Daarom is bovenaan de pagina een zogenaamde 'skip-link' geplaatst.

Omdat het een gewone link is, wordt deze bij gebruik van de Tab-toets bezocht, krijgt focus. Als de gebruiker dan op Enter drukt, wordt de link gevolgd. In dit geval is het een link naar het begin van de echte inhoud van de pagina bij <main>. Op deze manier kan in één keer een heel menu worden gepasseerd.

Normaal genomen is de skip-link links buiten het scherm geparkeerd en daardoor onzichtbaar. Zodra de link focus heeft, wordt deze met behulp van css op het scherm geplaatst. Als de Tab-toets nogmaals wordt ingedrukt, of als de link wordt gevolgd, verliest de skip-link weer focus en verdwijnt weer van het scherm. Hierdoor verpest de skip-link niet de hele lay-out.

Als mensen de Tab-toets niet gebruiken, krijgen ze de skip-link helemaal niet te zien.

In de meeste schermlezers werkt deze link ook. Maar schermlezers hebben ook andere manieren om een serie links te passeren. In welke schermlezers een skip-link wel en niet werkt, is te vinden bij Bekende problemen (en oplossingen) onder het kopje Schermlezers.

<nav aria-labelledby="navigatie-vb">

Binnen deze <nav> staat het menu. Voor mensen die goed kunnen zien, zal duidelijk zijn, waar dit menu voor is bedoeld. Maar voor gebruikers van een schermlezer is dat niet zo vanzelfsprekend. Daarom wordt met aria-labelledby="navigatie-vb" de <nav> aan het element met id="navigatie-vb" gekoppeld. Dat is de h2#navigatie-vb die in de html gelijk onder <nav> staat. Hierdoor weten schermlezers dat deze <nav> bij 'Navigatie voorbeeld' hoort, want dat is de tekst in h2#navigatie-vb. (Overigens mag het met aria-labelledby gekoppelde element overal staan, het hoeft niet gelijk onder <nav> te staan.)

<h2 id="navigatie-vb">Navigatie voorbeeld</h2>

Voor mensen die goed kunnen zien, zal duidelijk zijn waar het menu voor dient. Voor mensen die niet of slecht kunnen zien, zal dat mogelijk niet direct duidelijk zijn. Daarom deze <h2> aan de <nav> met het menu gekoppeld.

Bij #navigatie-vb wordt de <h2> links buiten het browservenster geparkeerd, waardoor deze niet zichtbaar is. Maar schermlezers lezen hem gewoon voor.

In dit voorbeeld staat in de download maar één menu, maar op de site staan twee menu's. Als er meer dan één <nav> met een menu aanwezig is, is het helemaal belangrijk op deze of een soortgelijke manier aan schermlezers te laten weten, waar het menu voor dient.

De <h2> heeft nog een laatste functie voor schermlezers: navigeren. Schermlezers kunnen snel naar elementen met een speciale semantische functie zoals <nav>, <header>, <main>, en dergelijke gaan. Ze horen dan de inhoud van de <h2>.

Maar veel gebruikers van een schermlezer navigeren met behulp van de <h>'s: ze springen van kopregel naar kopregel. Ook in dat geval komen ze bovenaan het menu uit en horen, waarvoor het menu is bedoeld.

<input id="checkbox-voor-smal" type="checkbox" aria-label="Vink aan om menu te openen">

In smallere browservensters wordt het menu alleen getoond, als een aankruisvakje is aangevinkt. Met behulp van aria-label wordt voor schermlezers aangegeven, waar het aankruisvakje voor is bedoeld: 'Vink aan om menu te openen'. Deze tekst wordt niet getoond op het scherm, maar wordt wel voorgelezen door schermlezers.

<label id="toon-menu" for="checkbox-voor-smal" aria-hidden="true">Menu </label>

Deze <label> hoort bij input#checkbox-voor-smal, het aankruisvakje om het menu te tonen. In de <label> staat 'Menu ', dit wordt altijd getoond. Zolang het menu is gesloten, wordt hierachter bij #toon-menu::after het woordje 'openen' gezet.

Als het menu is geopend, wordt bij #checkbox-voor-smal:checked + #menubalk-voor-smal #toon-menu::after het woordje 'openen' vervangen door het woordje 'sluiten'.

Als een schermlezer het menu opent, wordt hierdoor gelijk na het openen van het menu in veel schermlezers 'Menu sluiten' voorgelezen. Heel verwarrend. Daarom wordt de <label> met behulp van aria-hidden="true" verborgen voor schermlezers. Bij input#checkbox-voor-smal is met aria-label="Vink aan om menu te openen" voor schermlezers al aangegeven, waar het aankruisvakje voor dient.

<a href="045-files-dl/menu-045-achter-dl.html">Paarden<img src="045-pics/paard.gif" width="100" height="100" alt=""></a>

De inhoud van de link bestaat uit het woordje 'Paarden' en een afbeelding. Het woordje 'Paarden' wordt door een schermlezer netjes voorgelezen, met de vermelding dat het om een link gaat. Daarna gaat de schermlezer de alt-tekst bij de afbeelding voorlezen. En als die er niet is, wordt iets als 'afbeelding 045-pics/paard.gif' of een andere tongbreker voorgelezen.

Om aan de schermlezer duidelijk te maken dat de afbeelding niets toevoegt aan de link, wordt alt="" toegevoegd aan de <img>. Hiermee geef je aan dat de afbeelding genegeerd mag worden door schermlezers, omdat deze alleen illustratief is.

<main id="content" lang="en" tabindex="0">

Binnen <main> staat de belangrijkste inhoud van de pagina. In dit geval is dat alleen opvultekst. De skip-link boven het menu linkt naar main#content.

De tekst binnen <main> is (grotendeels) Engels. De toevoeging lang="en" geeft dat aan. De taal is van belang voor schermlezers, automatisch afbreken, automatisch genereren van aanhalingstekens, juist gebruik van decimale punt of komma, en dergelijke.

tabindex="0" is nodig voor Verteller, de schermlezer van Windows, omdat de skip-link anders niet werkt. (Meer over tabindex is te vinden bij Tabindex en Tab-toets.)

<h1 lang="nl">

Gelijk hierboven is aangegeven dat de inhoud van <main> Engelstalig is. Dat geldt voor de <p>'s in <main>, maar de <h1> in <main> is Nederlandstalig. Daarom wordt dit voor de <h1> met lang="nl" aangegeven. De taal is van belang voor schermlezers, automatisch afbreken, automatisch genereren van aanhalingstekens, juist gebruik van decimale punt of komma, en dergelijke.

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.)

In tegenstelling tot wat meestal het geval is, wijkt in dit voorbeeld de code op de site behoorlijk af van de code in de download. Het menu van de site en het menu van het voorbeeld vonden elkaar niet zo aardig, vandaar. Hierdoor sluit de uitleg hier en daar niet goed aan op de code van het voorbeeld op de site. Als je dat verwarrend vindt, kun je het best het voorbeeld downloaden. In de download sluiten uitleg en code wel goed op elkaar aan.

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.)

css voor alle vensters

/* menu-045-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.

max-width: 1500px;

Maximumbreedte.

Om in brede browservensters een wel heel enthousiaste regellengte te voorkomen, wordt een maximumbreedte opgegeven.

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 waarde is opgegeven, krijgen deze 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, rechts en links auto, wat hier hetzelfde betekent als evenveel. Hierdoor staat <body>, en daarmee de hele pagina, altijd horizontaal gecentreerd binnen z'n ouder.

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 staat <main> uiteindelijk altijd horizontaal gecentreerd binnen het venster, ongeacht hoe breed dit is.

header

Alle <header>'s.

Binnen de <header> staan dingen als de skip-link en het menu. Het is een soort <div> met een speciale betekenis. Een uitgebreidere beschrijving staat bij <header>.

position: relative;

Om nakomelingen te kunnen positioneren ten opzichte van <header>, moet <header. zelf een andere positie dan statisch hebben. Omdat verder niets wordt opgegeven voor top en dergelijke, heeft dit geen enkele invloed op <header> zelf.

#skippy

Alle elementen met id="skippy". Dit is een skip-link, waarmee gebruikers van schermlezers en de Tab-toets in één keer het hele menu kunnen passeren. (Deze skip-link werkt niet in oudere versies van iOS en Android. Meer daarover is te vinden bij Bekende problemen (en oplossingen) onder het kopje Schermlezers.)

background: white;

Witte achtergrond.

Dit wordt tot de essentiële code gerekend, omdat de tekst in de skip-link anders nauwelijks is te lezen.

width: 10em;

Breedte.

Als eenheid wordt de relatieve eenheid em gebruikt, omdat bij een vaste eenheid als px de breedte niet mee verandert met de lettergrootte. Zoomen kan altijd, ongeacht de eenheid die je gebruikt.

font-size: 1.5em;

Grotere letter dan normaal.

Als eenheid wordt de relatieve eenheid em gebruikt, omdat bij gebruik van een absolute eenheid zoals px niet alle browsers de lettergrootte kunnen veranderen. Zoomen kan wel altijd, ongeacht welke eenheid voor de lettergrootte wordt gebruikt.

line-height: 5em;

Regelhoogte. Omdat geen gewone hoogte is opgegeven, is dit tevens de hoogte van de link.

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. Zoomen kan wel altijd, ongeacht welke eenheid voor de lettergrootte wordt gebruikt.

text-align: center;

Tekst horizontaal centreren.

border: red solid 3px;

Opvallende rode rand.

position: absolute;

Om de <a> op de juiste plaats neer te kunnen zetten.

Er wordt gepositioneerd ten opzichte van het 'containing block'. Dat is de eerste voorouder die zelf een bepaalde eigenschap heeft, zoals een andere positie dan statisch. Hier is dat <header>, die bij header een relatieve positie heeft gekregen.

Een <a> is van zichzelf een inline-element, waardoor eigenschappen als breedte niet gebruikt kunnen worden. Door de <a> absoluut te positioneren verandert deze in een soort blok-element, waardoor dit soort eigenschappen wel is te gebruiken.

top: 20px;

20 px vanaf de bovenkant neerzetten.

left: -20000px;

Ver links buiten het scherm parkeren, waardoor de link onzichtbaar is. Als de link door gebruik van de Tab-toets de focus krijgt, wordt deze bij #skippy:focus binnen het scherm gezet en daarmee zichtbaar.

z-index: 30;

Normaal genomen worden elementen in de volgorde van de html op het scherm gezet. Wat later in de html staat, wordt over eerdere elementen gezet. Om te zorgen dat de skip-link altijd bovenaan staat, krijgt deze een hogere z-index.

Een z-index werkt alleen in bepaalde omstandigheden. Eén van die omstandigheden is een absolute positie. Die is iets hierboven aan de <input> gegeven, dus dat is geregeld.

nav

Alle <nav>'s. Dat is er hier maar één: het menu staat erin.

position: fixed;

Er wordt gepositioneerd ten opzichte van het 'containing block'. Dat is bij een fixed positie normaal genomen het venster van de browser. Hierdoor scrolt de <nav> niet mee met de pagina.

top: 1rem;

Bovenaan de pagina staat een menubalk. Daarom wordt de <nav> iets lager neergezet. Als het menu wordt geopend, komt dit nu onder de menubalk te staan.

Als eenheid wordt de relatieve eenheid rem gebruikt, omdat bij gebruik van een absolute eenheid zoals px de afstand van de bovenkant niet mee verandert met de lettergrootte. Zoomen kan wel altijd, ongeacht welke eenheid wordt gebruikt.

De minder bekende rem is ongeveer hetzelfde als de em. Alleen is de lettergrootte bij rem gebaseerd op de lettergrootte van het <html>-element, waardoor de rem overal op de pagina precies even groot is, ook als de bezoeker de lettergrootte heeft veranderd. Bij de em kan de lettergrootte worden beïnvloed door de voorouders van het element, bij de rem niet.

#navigatie-vb

Het element met id="navigatie-vb. Dit is een <h2>, waarin voor schermlezers de functie van het menu staat: 'Navigatie voorbeeld'.

position: absolute;

Om de <h2> op de juiste plaats neer te kunnen zetten.

Er wordt gepositioneerd ten opzichte van het 'containing block'. Dat is de eerste voorouder die zelf een bepaalde eigenschap heeft, zoals een andere positie dan statisch. Hier is dat <nav>, die bij nav een fixed positie heeft gekregen.

left: -20000px;

Ver links buiten het scherm parkeren. De <h2> is nu niet zichtbaar op het scherm, maar wordt door schermlezers gewoon voorgelezen.

#checkbox-voor-smal

Het element met id="checkbox-voor-smal". Als deze <input type="checkbox"> is aangevinkt, wordt in smallere browservenster het menu getoond.

-moz-appearance: none; -webkit-appearance: none; appearance: none;

Hier staat in feite drie keer hetzelfde: appearance: none;. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms- en -webkit-.

Een aankruisvakje werkt in de schermlezers TalkBack op Android 6 en eerder en in VoiceOver op iOS 12 en eerder alleen, als de <input> binnen het browservenster staat. (In alle andere geteste schermlezers werkt de <input> ook, als de <input> onzichtbaar buiten het venster staat.) Daarom wordt het aankruisvakje binnen het venster gezet.

Het aankruisvakje dat wordt gebruikt om het menu te openen is nou niet echt wonderschoon. Daarom wordt het aankruisvakje verborgen met behulp van bovenstaande regel. De standaardweergave wordt hierdoor uitgeschakeld, waarna er (bijna) niets meer overblijft van het aankruisvakje.

width: 1px; height: 1px;

In sommige browsers wordt met behulp van de regel gelijk hierboven de standaardweergave wel verwijderd, maar het aankruisvakje blijft toch nog duidelijk zichtbaar. Hier wordt het heel klein gemaakt, waardoor het feitelijk onzichtbaar wordt.

Breedte en hoogte helemaal verwijderen kan niet, want ook dan werkt het niet meer in de schermlezers TalkBack op Android 6 en eerder en in VoiceOver op iOS 12 en eerder.

position: fixed;

Er wordt gepositioneerd ten opzichte van het 'containing block'. Dat is bij een fixed positie normaal genomen het venster van de browser. Hierdoor scrolt de <input> niet mee met de pagina.

Een <input> is van zichzelf een inline-element. Hierdoor zijn eigenschappen als breedte en hoogte niet te gebruiken. Door de <input> fixed te positioneren verandert het in een soort blok-element, waardoor deze eigenschappen wel zijn te gebruiken.

top: 10px; left: 10px;

10 px vanaf de bovenkant en vanaf links neerzetten. Nu staat het op dezelfde hoogte als de tekst in de bij de <input> horende <label> en is volledig onzichtbaar.

z-index: 20;

Normaal genomen worden elementen in de volgorde van de html op het scherm gezet. Wat later in de html staat, wordt over eerdere elementen gezet. Om te zorgen dat de <input> altijd bovenaan staat, krijgt deze een hogere z-index. Als de <input> niet bovenaan staat, werkt deze niet in de schermlezers TalkBack op Android 6 en eerder en in VoiceOver op iOS 12 en eerder.

Een z-index werkt alleen in bepaalde omstandigheden. Eén van die omstandigheden is een fixed positie. Die is iets hierboven aan de <input> gegeven, dus dat is geregeld.

#menubalk-voor-smal

Het element met id="menubalk-voor-smal". Dit is een <div>, waarbinnen de <label> voor input#checkbox-voor-smal staat.

Je zou de bij deze <label> horende <input> binnen de <label> kunnen zetten:

<label id="toon-menu" aria-hidden="true">Menu <input id="checkbox-voor-smal" type="checkbox" aria-label="Vink aan om menu te openen"></label>

Om het menu te openen wordt echter verderop de selector #checkbox-voor-smal:checked ~ ul gebruikt. En een selector met ~ werkt alleen, als de elementen voor en na de ~ dezelfde ouder hebben. Als de <input> binnen de <label> wordt gezet, hebben input#checkbox-voor-smal en ul niet meer dezelfde ouder, waardoor die selector niet meer werkt. Daarom wordt in dit geval de <label> na de erbij horende <input> gezet.

background: linear-gradient(to bottom, #fff, #ccc);

Als achtergrond wordt een gradiënt gebruikt: een verlopende kleur.

Je kunt een gradiënt zelf uitvogelen, maar vaak is het makkelijker om gebruik te maken van een gradiënt-editor. Op de pagina met links zijn onder het kopje CSS → Online uitproberen, code genereren, en dergelijke links naar gradiënt-editors te vinden.

In dit geval is geen gradiënt-editor gebruikt, omdat het hier om een heel simpele gradiënt gaat.

linear-gradient valt in een aantal delen uiteen:

to bottom: de kant waar de gradiënt naartoe gaat. Omdat alleen de onderkant is opgegeven, loopt de gradiënt loodrecht van boven naar onder. Eigenlijk hoeft to bottom niet te worden opgegeven, want dat is de standaardwaarde: van boven naar beneden. Voor de duidelijkheid is dat toch gedaan.

#fff: de eerste kleur is #fff (wit). Omdat geen plaats is opgegeven, begint de gradiënt helemaal bovenaan met deze kleur. (Je kunt ook #fff 0% opgeven, maar dat is precies hetzelfde.)

#ccc: de tweede (en laatste) kleur is #ccc (lichtgrijs). Omdat geen plaats is opgegeven, eindigt de gradiënt helemaal onderaan met deze kleur. (Je kunt ook #ccc 100% opgeven, maar dat is precies hetzelfde.)

De geleidelijke overgang van de kleur #fff helemaal bovenaan naar hier #ccc aan de onderkant wordt door de browser geregeld.

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: 100%;

Bij een fixed gepositioneerd element is een breedte in procenten ten opzichte van het venster van de browser. De <div> is dus altijd even breed als het venster, ongeacht de breedte van het venster.

line-height: 1.85rem;

Regelhoogte. Omdat geen gewone hoogte is opgegeven, is dit ook de hoogte van de <div>.

Als eenheid wordt de relatieve eenheid rem gebruikt, omdat bij gebruik van een absolute eenheid zoals px de regelhoogte niet mee verandert met de lettergrootte. Zoomen kan wel altijd, ongeacht welke eenheid voor de lettergrootte wordt gebruikt.

De minder bekende rem is ongeveer hetzelfde als de em. Alleen is de lettergrootte bij rem gebaseerd op de lettergrootte van het <html>-element, waardoor de rem overal op de pagina precies even groot is, ook als de bezoeker de lettergrootte heeft veranderd. Bij de em kan de lettergrootte worden beïnvloed door de voorouders van het element, bij de rem niet.

border-bottom: black solid 1px;

Zwart randje aan de onderkant.

position: fixed;

Er wordt gepositioneerd ten opzichte van het 'containing block'. Dat is bij een fixed positie normaal genomen het venster van de browser. Hierdoor scrolt div#menubalk-voor-smal niet mee met de pagina.

top: 0;

Bovenaan het venster van de browser neerzetten.

z-index: 10;

Normaal genomen worden elementen in de volgorde van de html op het scherm gezet. Wat later in de html staat, wordt over eerdere elementen gezet. Om te zorgen dat de <div> altijd bovenaan staat, krijgt deze een hogere z-index.

Een z-index werkt alleen in bepaalde omstandigheden. Eén van die omstandigheden is een fixed positie. Die is iets hierboven aan de <div> gegeven, dus dat is geregeld.

#toon-menu

Het element met id="toon-menu". De <label> die bij input#checkbox-voor-menu hoort. De <input> kan ook worden bediend door deze <label> aan te raken of aan te klikken.

In deze <label> staat het woordje 'Menu '.

font-size: 0.9em;

ets kleinere letter dan normaal.

Als eenheid wordt de relatieve eenheid em gebruikt, omdat bij gebruik van een absolute eenheid zoals px niet alle browsers de lettergrootte kunnen veranderen. Zoomen kan wel altijd, ongeacht welke eenheid voor de lettergrootte wordt gebruikt.

text-decoration: underline;

Door de tekst te onderstrepen gaat de <label> op een link lijken, waardoor het duidelijk zal zijn dat het menu wordt geopend en gesloten door aanraken van of klikken op de <label>.

margin-left: 4px;

Kleine afstand tussen tekst in en linkerkant van de <label>.

#toon-menu::after

#toon-menu: het element met id="toon-menu". De <label> die hoort bij input#checkbox-voor-smal, waarmee in smallere browservensters het menu kan worden getoond en verborgen.

::after: met behulp van ::after wordt bij het element label#menubalk-voor-smal een pseudo-element gemaakt. Dit pseudo-element wordt gebruikt om het woordje 'openen' weer te geven.

content: "openen";

In smallere browservensters is het menu bij openen van de pagina verborgen. In label#toon-menu staat het woordje 'Menu '. Hier wordt daar het woordje 'openen' achter gezet. Zodra het menu wordt getoond, wordt bij #checkbox-voor-smal:checked + #menubalk-voor-smal #toon-menu::after 'openen' vervangen door 'sluiten'.

nav ul

Alle <ul>'s binnen een <nav>. Dat is er hier maar één: de <ul> met het menu.

(Je zou hier kunnen volstaan met de selector ul, maar vaak zullen op een pagina meerdere <ul>'s aanwezig zijn. Daarom wordt hier voor de zekerheid aangegeven dat het expliciet om de <ul> binnen de <nav> gaat.)

background: rgba(255, 255, 255, 0.8);

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 255 is opgegeven, levert dit een witte 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.8. Hierdoor zie je de tekst onder het menu nog enigszins door de achtergrond heen, maar zijn de afbeeldingen en tekst in de links toch goed zichtbaar.

display: flex;

De waarde flex is onderdeel van een hele reeks eigenschappen en waarden, die bij elkaar 'flexbox' worden genoemd. Met display: flex; wordt de <ul> in een zogenaamde 'flex container' veranderd. Dit maakt het veel makkelijker om de directe kinderen van dit element, de 'flex items', op een bepaalde plaats neer te zetten. De directe kinderen van <main> zijn hier de zes <li>'s met de links.

In dit geval komen de zes <li>'s naast elkaar te staan, omdat dat de standaardinstelling van flex-direction is. Zou je hier flex-direction: column; gebruiken, dan zouden flex items onder elkaar komen te staan.

flex-wrap: wrap;

De standaardwaarde bij flex-wrap is no‑wrap: zet alle flex items, hier de zes <li>'s binnen de <ul>, naast elkaar op één regel. Als het niet meer op één regel past, maak ze dan smaller.

In dit geval gebeurt dat niet, omdat binnen de <li>'s afbeeldingen met staan met een breedte van 100 px. Maar wat er nu gebeurt, is zo mogelijk nog rampzaliger: in browservensters smaller dan 600 px verdwijnen de links aan de rechterkant gewoon buiten het venster. Omdat de <nav>, waarbinnen het hele menu staat, bij nav fixed is gepositioneerd, kan ook niet worden gescrold om de verdwenen links binnen het venster te krijgen. Bovendien zou dit ook heel onhandig zijn. Eén of meer links zijn nu gewoon volledig onbereikbaar.

De waarde wrap voorkomt al deze ellende: als de <li>'s niet meer naast elkaar op één regel passen, worden ze op meerdere regels gezet.

list-style-type: none;

De gebruikelijke balletjes en dergelijke bij een <ul> verwijderen.

padding: 0;

Sommige browsers geven standaard een padding aan de <ul>. Weghalen.

transform: translateX(-20000px);

De <ul> 20000 px naar links verplaatsen. Daarmee komt de <ul> – en daarmee ook alles wat erin zit – ver buiten het scherm te staan en wordt onzichtbaar.

Bij #checkbox-voor-smal:checked ~ ul wordt de <ul> met transform: translateX(0); binnen het scherm gezet, waardoor deze zichtbaar wordt.

nav li

Alle <li>'s binnen een <nav>. Hier is maar één <nav> aanwezig: de <nav> met het menu.

(Je zou hier kunnen volstaan met de selector li, maar vaak zullen op een pagina meerdere <ul>'s en daarmee meerdere series <li>'s aanwezig zijn. Daarom wordt hier voor de zekerheid aangegeven dat het expliciet om de <li>'s binnen de <nav> gaat.)

background: white; Een doorzichtig menu is onduidelijk Witte achtergrond.

Eerder is aan de <ul> bij nav ul een witte achtergrond gegeven. Daardoor hebben ook de in de <ul> zittende <li>'s een witte achtergrond. Maar die achtergrond is enigszins doorzichtig.

Binnen de <ul> is dat prima, maar binnen de <li>'s is dat storend. De afbeeldingen hebben een doorzichtige achtergrond, waardoor de tekst achter het menu ook door de afbeeldingen heen zichtbaar wordt, zoals op de afbeelding is te zien. Ook de tekst in de links wordt lastiger te lezen. Daarom krijgen de <li>'s hier een ondoorzichtige witte achtergrond.

width: 100px; Zonder breedte zijn de knoppen te breed

Breedte.

In elke <li> zit tekst en een <img>. Dat zijn allebei inline-elementen. Normaal genomen worden die daarom achter elkaar op dezelfde regel gezet, zoals op de afbeelding is te zien.

De afbeeldingen zijn 100 px breed. Door de <li> ook 100 px breed te maken, passen tekst en afbeelding niet meer op dezelfde regel. Hierdoor komen de afbeeldingen nu op een nieuwe regel te staan, onder de tekst.

font-size: 0.8em;

Kleinere letter dan normaal.

Als eenheid wordt de relatieve eenheid em gebruikt, omdat bij gebruik van een absolute eenheid zoals px niet alle browsers de lettergrootte kunnen veranderen. Zoomen kan wel altijd, ongeacht welke eenheid voor de lettergrootte wordt gebruikt.

text-align: center;

Tekst horizontaal centreren.

border: black solid 1px;

Zwart randje rondom de <li>'s, en daarmee rondom de tekst en de afbeelding in de links.

margin: 3px 0 0 3px;

Kleine marge aan de boven- en linkerkant, zodat de <li>'s – en daarmee de erin zittende links – niet helemaal tegen elkaar aan komen te staan.

border-radius: 15px;

Ronde hoeken.

Omdat voor alle hoeken één maat is opgegeven, worden dit vier cirkelvormige hoeken. De naam border-radius is wat ongelukkig gekozen, want ook achtergrondkleur en afbeeldingen krijgen ronde hoeken.

padding-top: 3px;

Kleine afstand aan de bovenkant tussen inhoud en buitenkant van de <li>'s.

nav a

Alle <a>'s binnen een <nav>. Hier is maar één <nav> aanwezig: de <nav> met het menu.

(Je zou hier kunnen volstaan met de selector a, maar vaak zullen op een pagina meerdere <a>'s aanwezig zijn. Daarom wordt hier voor de zekerheid aangegeven dat het expliciet om de <a>'s binnen de <nav> gaat.)

color: black;

Standaard is de kleur van tekst in een <a> blauw. Dat is hier niet nodig, het is zo al duidelijk dat het hier om links gaat. Bovendien is in dit geval de blauwe kleur foeilelijk.

text-decoration: none;

Standaard wordt tekst in een link onderstreept. Ook dat is hier niet nodig en ook dat is hier foeilelijk.

nav img

Alle <img>'s binnen een <nav>. Hier is maar één <nav> aanwezig: de <nav> met het menu.

(Je zou hier kunnen volstaan met de selector img, maar vaak zullen op een pagina meerdere <img>'s aanwezig zijn. Daarom wordt hier voor de zekerheid aangegeven dat het expliciet om de <img>'s binnen de <nav> gaat.)

margin-top: -20px; Zonder correctie staan de tekeningen te laag

Door bij nav li een breedte van 100 px aan de <li>'s te geven, komen tekst en afbeelding in de <li> niet naast elkaar, maar onder elkaar te staan. Dat ziet er wat vreemd uit, want boven sommige afbeeldingen ontstaan relatief hoge witte ruimtes.

Door de <img>'s met een negatieve marge aan de bovenkant 20 px naar boven te verplaatsen, sluiten tekst en afbeeldingen in de links beter op elkaar aan.

main

Alle <main>'s. Dat is er maar één, de belangrijkste inhoud van de pagina staat erin. Hier is dat alleen opvultekst.

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: block;

Ouder browsers kennen <main> niet. Onbekende elementen worden standaard als inline-element weergegeven. Nu is <main> overal een blok-element.

margin: 2.2rem 3px 3px;

Omdat voor links geen waarde is opgegeven, krijgt link automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 2.2rem 3px 3px 3px in de volgorde boven – rechts – onder – links.

Aan de bovenkant een marge van 2,2 rem, aan de andere drie kanten een marge van 3 px.

Als eenheid wordt aan de bovenkant de relatieve eenheid rem gebruikt, omdat bij gebruik van een absolute eenheid zoals px de hoogte van de marge niet mee verandert met de lettergrootte. Hierdoor zou, als de lettergrootte wordt verhoogd, <main> onder de menubalk aan de bovenkant kunnen komen te staan, want deze heeft bij #menubalk-voor-smal een regelhoogte van 1,85 rem gekregen.

Zoomen kan wel altijd, ongeacht welke eenheid wordt gebruikt.

De minder bekende rem is ongeveer hetzelfde als de em. Alleen is de lettergrootte bij rem gebaseerd op de lettergrootte van het <html>-element, waardoor de rem overal op de pagina precies even groot is, ook als de bezoeker de lettergrootte heeft veranderd. Bij de em kan de lettergrootte worden beïnvloed door de voorouders van het element, bij de rem niet.

border: black solid 1px;

Zwart randje.

padding: 5px;

Aan alle kanten wat afstand tussen tekst in en buitenkant van <main>.

h1

Alle <h1>'s. Dat is er maar één: de belangrijkste kopregel.

font-size: 1.2em;

Een <h1> heeft van zichzelf een wel heel erg grote letter. Dat wordt hier teruggebracht tot een kleine vergroting.

Als eenheid wordt de relatieve eenheid em gebruikt, omdat bij gebruik van een absolute eenheid zoals px niet alle browsers de lettergrootte kunnen veranderen. Zoomen kan wel altijd, ongeacht welke eenheid voor de lettergrootte wordt gebruikt.

margin-top: 0;

Een <h1> heeft van zichzelf een marge aan boven- en onderkant. De marge aan de bovenkant wordt hier weggehaald.

-ms-hypens: auto; -webkit-hyphens: auto; hyphens: auto; Kopregel met en zonder afbreken

Hier staat in feite drie keer hetzelfde: hyphens: auto;. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms- en -webkit-.

Hiermee wordt automatisch afbreken van woorden aangezet. Dit voorkomt in smallere browservensters lelijke open ruimtes. Op de afbeelding staat automatisch afbreken links aan en rechts uit. Hoewel een browser soms op vreemde plaatsen afbreekt ('inschuifme-nu'), ziet het er rechts nog steeds beter uit dan links.

Automatisch afbreken werkt alleen, als bij <body> het lang-attribuut wordt gebruikt om de taal van het document aan te geven (en eventueel een andere taal bij elementen met een afwijkende taal).

De meeste browsers ondersteunen dit inmiddels of binnenkort. Eventueel zou je aan de html op bepaalde plaatsen nog &shy; kunnen toevoegen voor browsers die afbreken niet ondersteunen: inschuif&shy;menu. Nu wordt 'inschuifmenu', als dat zo uitkomt, afgebroken tussen 'inschuif' en 'menu', waarbij dan ook een koppelteken verschijnt.

#checkbox-voor-smal:checked + #menubalk-voor-smal #toon-menu::after

Voor dit pseudo-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.

#toon-menu::after {content: "openen";}

#checkbox-voor-smal:checked: het element met id="checkbox-voor-smal", maar alleen als dit is aangevinkt. Als deze <input> is aangevinkt, wordt in smallere browservensters het menu getoond.

+: het element achter de + moet in de html direct volgen op het element voor de +. In dit geval gaat het om div#menubalk-voor-smal die gelijk op input#checkbox-voor-smal volgt. Beide elementen moeten ook nog dezelfde ouder hebben. Dat is hier het geval, ze hebben beide als ouder <nav>.

#menubalk-voor-smal: de <div> waarin de <label> met het woordje 'Menu ' zit.

#toon-menu: het element met id="toon-menu" binnen div#menubalk-voor-smal. Dit is de <label> die bij input#checkbox-voor-smal hoort.

::after: met behulp van ::after wordt bij het element label#toon-menu een pseudo-element gemaakt. Dit pseudo-element wordt gebruikt om het woordje 'sluiten' weer te geven.

De hele selector in gewone mensentaal: doe iets met het pseudo-element bij label#toon-menu binnen div#menubalk-voor-smal, maar alleen als de direct daarvoor zittende input#checkbox-voor-smal is aangevinkt.

content: "sluiten";

Bij het openen van de pagina in smallere browservensters is het menu verborgen. Achter het woordje 'Menu ' in label#toon-menu staat dan het woordje 'openen'. Als input#checkbox-voor-smal is aangevinkt, wordt het menu getoond. Het woordje 'openen' wordt nu vervangen door 'sluiten'.

#checkbox-voor-smal:checked ~ ul

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 ul {background: rgba(255, 255, 255, 0.8); display: flex; flex-wrap: wrap; list-style-type: none; padding: 0; transform: translateX(-20000px);}

#checkbox-voor-smal:checked: het element met id="checkbox-voor-smal", maar alleen als dit is aangevinkt. Als deze <input> is aangevinkt, wordt in smallere browservensters het menu getoond.

~: het hierachter staande element moet ergens in de html staan, na het hiervoor staande element. Het hoeft er, anders dan bij de +, niet gelijk op te volgen, als het maar ergens na het eerste element in de html staat.

De enige voorwaarde is verder dat het voor en het na de ~ staande element dezelfde ouder hebben. Dat is hier het geval: input#checkbox-voor-smal voor de ~ en ul na de ~ hebben beide als ouder de <nav>.

De hele selector in normale mensentaal: die iets met de <ul> die ergens in de html op input#checkbox-voor-smal volgt, maar alleen als die <input> is aangevinkt.

transform: translateX(0);

Eerder is de <ul> met het menu bij nav ul met transform: translateX(‑20000px); onzichtbaar links buiten het scherm geparkeerd. Nu wordt de <ul>, en daarmee het menu, binnen het scherm gezet, waardoor dit zichtbaar wordt.

De hele opmaak is al eerder geregeld, alleen het zichtbaar maken gebeurt hier.

css voor vensters minimaal 760 px breed

@media screen and (min-width: 760px)

De css die hier tot nu toe staat, geldt voor alle browservensters.

De css die binnen deze media query staat, geldt alleen voor vensters die minimaal 760 px breed zijn. In deze bredere vensters is het menu altijd zichtbaar.

@media: geeft aan dat het om css gaat die alleen van toepassing is, als aan bepaalde voorwaarden wordt voldaan. Al langer bestond de mogelijkheid om met behulp van zo'n @media-regel css voor bijvoorbeeld printers op te geven. css3 heeft dat uitgebreid tot bepaalde fysieke eigenschappen, zoals de breedte en hoogte van het venster van de browser.

screen: deze regel geldt alleen voor schermweergave.

and: er komt nog een voorwaarde, waaraan moet worden voldaan.

(min-width: 760px): het venster moet minimaal 760 px breed zijn. Is het venster smaller, dan wordt de css die binnen deze media-regel staat genegeerd.

Gelijk na deze regel komt een { te staan, en aan het einde van de css die binnen deze query valt een bijbehorende afsluitende }. Die zijn in de regel hierboven weggevallen, maar het geheel ziet er zo uit:

@media screen and (min-width: 760px) { body {color: silver;} (...) rest van de css voor deze @media-regel (...) footer {color: gold;} }

Voor de eerste css binnen deze media-regel staat dus een extra {, en aan het eind staat een extra }.

Als je nou 'n mobieltje hebt met een resolutie van – ik roep maar wat – 1024 x 768 px, dan geldt deze media query toch niet voor dat mobieltje. Terwijl dat toch echt meer dan 760 px breed is. Een vuig complot van gewetenloze multinationals? Voordat je je gaat beklagen bij Radar, zou ik eerst even verder lezen.

Steeds meer mobiele apparaten, maar ook steeds meer gewone beeldschermen, hebben een hogere resolutiedichtheid. Dat wil zeggen dat ze kleinere pixels hebben, die dichter bij elkaar staan. Daardoor zijn foto's, tekst, en dergelijke veel scherper weer te geven. Hoe kleiner de puntjes (de pixels) zijn, waaruit een afbeelding is opgebouwd, hoe duidelijker het wordt.

Er ontstaat alleen één probleem: als je de pixels twee keer zo klein maakt, wordt ook wat je ziet twee keer zo klein. En inmiddels zijn er al apparaten met pixels die meer dan vier keer zo klein zijn. Een lijntje van 1 px breed zou op die apparaten minder dan 'n kwart van de oorspronkelijke breedte krijgen en vrijwel onzichtbaar zijn. Een normale foto zou in een thumbnail veranderen. Kolommen zouden heel smal worden. Tekst zou onleesbaar klein worden. Allemaal fantastisch scherp, maar je hebt 'n vergrootglas nodig om 't te kunnen zien.

Om dit te voorkomen wordt een verschil gemaakt tussen css-pixels en schermpixels (in het Engels 'device-pixels'). De css-pixels zijn gebaseerd op de – tot voor kort – normale beeldschermen van de desktop. 1 css-pixel is op zo'n beeldscherm 1 pixel. Het aantal schermpixels is het werkelijk op het apparaat aanwezige aantal pixels (dat is het aantal pixels, waarvoor je hebt betaald).

Dat eerder genoemde mobieltje van 1024 x 768 px heeft wel degelijk het aantal pixels, waarvoor je hebt betaald. Maar die zitten dichter bij elkaar. Op een gewoon beeldscherm zitten 96 pixels per inch, wat wordt uitgedrukt met de eenheid ppi ('pixels per inch'). (Vaak wordt foutief de eenheid dpi ('dots per inch') gebruikt. Die eenheid is voor printers.) Als dat mobieltje een resolutie van 192 ppi heeft, 192 pixels per inch, zijn de pixels ervan twee keer zo klein als op een origineel beeldscherm. Er zijn per inch twee keer zoveel schermpixels aanwezig.

Om nu te voorkomen dat alles op dat mobieltje twee keer zo klein wordt, geeft het mobieltje niet het echte aantal schermpixels (1024 x 768), maar een lager aantal css-pixels door bij een media query. De 192 ppi van het mobieltje is twee keer zo veel als de 96 ppi van een normaal beeldscherm. Het aantal css-pixels is dan het aantal schermpixels gedeeld door 2. 1024 x 768 gedeeld door 2 is 512 x 384 px. Het aantal css-pixels is 512 x 384 px en zit daarmee dus ruim onder de 760 px van deze media query. Je bent dus niet opgelicht, of in ieder geval niet wat betreft het aantal pixel.

Door deze truc is een lijn van 1 px breed op een normaal beeldscherm ook op het mobieltje nog steeds 1 px breed, alleen wordt die ene (css-)pixel opgebouwd uit twee schermpixels (feitelijk vier, want het verhaal geldt voor breedte én hoogte). De dikte van het lijntje is hetzelfde, maar het is veel fijner opgebouwd. Bij lijntjes is dat verschil bijvoorbeeld in bochten goed te zien.

Hetzelfde verhaal geldt voor hogere resoluties, Een tablet met een breedte van 4096 schermpixels en een ppi van 384 (vier keer de originele dichtheid) geeft 4096 gedeeld door 4 = 1024 css-pixel door. Het lijntje van 1 px breedte op de originele monitor is nog steeds 1 css-pixel breed op de tablet, maar die ene css-pixel is nu opgebouwd uit zestien schermpixel.

(Overigens kun je met behulp van media query's ook testen op de resolutie met gebruik van het sleutelwoord 'resolution'. Apple gebruikt het niet-standaard 'device-pixel-ratio', maar het idee is hetzelfde. Dit kan bijvoorbeeld handig zijn om te bepalen, hoe groot een foto moet zijn.)

Kort samengevat: omdat niet het aantal schermpixels (waarvoor je hebt betaald), maar het aantal css-pixels (de door de ontwerper bedoelde afmeting) wordt doorgegeven, wordt voorkomen dat een hogeresolutiescherm onleesbaar klein wordt.

body

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. (Alleen wat binnen deze media query geldig is, wordt binnen dit blokje herhaald.)

body {background: #ff9; color: black; max-width: 1500px; font-family: Arial, Helvetica, sans-serif; margin: 0 auto;}

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.

display: flex;

De waarde flex is onderdeel van een hele reeks eigenschappen en waarden, die bij elkaar 'flexbox' worden genoemd. Met display: flex; wordt <body> in een zogenaamde 'flex container' veranderd. Dit maakt het veel makkelijker om de directe kinderen van dit element, de 'flex items', op een bepaalde plaats neer te zetten. De directe kinderen van <body> zijn hier <header> met het menu en <main> met de opvultekst.

In dit geval komen <header> met het menu en <main> met de opvultekst naast elkaar te staan, omdat dat de standaardinstelling van flex-direction is. Zou je hier flex-direction: column; gebruiken, dan komen de flex items onder elkaar te staan.

font-size: 110%;

Iets groter dan standaard. 't Zal de leeftijd zijn, maar ik vind de standaardgrootte wat te klein.

Als eenheid wordt de relatieve eenheid % gebruikt, omdat bij gebruik van een absolute eenheid zoals px niet alle browsers de lettergrootte kunnen veranderen. Zoomen kan wel altijd, ongeacht welke eenheid voor de lettergrootte wordt gebruikt.

#skippy:focus

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. (Alleen wat binnen deze media query geldig is, wordt binnen dit blokje herhaald.)

#skippy {background: white; width: 10em; font-size: 1.5em; line-height: 5em; text-align: center; border: red solid 3px; position: absolute; top: 20px; left: -20000px; z-index: 30;}

Als het element met id="skippy" de focus heeft.

Bij openen van de pagina staat deze skip-link onzichtbaar links buiten het scherm. Alleen door een schermlezer of de Tab-toets te gebruiken, is deze link te bereiken. Door deze link te volgen, kan het menu in één keer worden gepasseerd.

left: 100px;

De skip-link op 100 px van links neerzetten. Hierdoor wordt deze zichtbaar, waardoor gebruikers van de Tab-toets hem kunnen zien.

#checkbox-voor-smal, #menubalk-voor-smal

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. (Alleen wat binnen deze media query geldig is, wordt binnen dit blokje herhaald.)

#checkbox-voor-smal {-moz-appearance: none; -webkit-appearance: none; appearance: none; width: 1px; height: 1px; position: fixed; top: 10px; left: 10px; z-index: 20;}

#menubalk-voor-smal {background: linear-gradient(to bottom, #fff 0%, #ccc 100%); color: black; width: 100%; line-height: 1.85rem; border-bottom: black solid 1px; position: fixed; top: 0; z-index: 10;}

De elementen met id="checkbox-voor-smal' en "menubalk-voor-smal". De elementen die in smallere browservensters het menu tonen en verbergen.

display: none;

Verbergen. In deze bredere browservensters is het menu altijd zichtbaar.

nav

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. (Alleen wat binnen deze media query geldig is, wordt binnen dit blokje herhaald.)

nav {position: fixed; top: 1rem;}

Alle <nav>'s. Dat is er hier maar één: het menu staat erin.

position: static;

De <nav>, en daarmee het erin zittende menu, mag in bredere browservensters gewoon meescrollen met de pagina.

nav ul

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. (Alleen wat binnen deze media query geldig is, wordt binnen dit blokje herhaald.)

nav ul {background: rgba(255, 255, 255, 0.8); display: flex; flex-wrap: wrap; list-style-type: none; padding: 0; transform: translateX(-20000px);}

Alle <ul>'s binnen een <nav>. Dat is er hier maar één: de <ul> met het menu.

(Je zou hier kunnen volstaan met de selector ul, maar vaak zullen op een pagina meerdere <ul>'s aanwezig zijn. Daarom wordt hier voor de zekerheid aangegeven dat het expliciet om de <ul> binnen de <nav> gaat.)

background: none;

De eerder opgegeven doorzichtige witte achtergrond weghalen.

flex-direction: column;

Bij nav ul is de <ul> veranderd in een zogenaamde 'flex container'. De directe kinderen van de <ul>, hier de zes <li>'s, veranderen daarmee in 'flex items'. Standaard worden deze naast elkaar neergezet.

Door de manier waarop flexbox ruimte verdeelt, komen de <li>'s onder elkaar te staan, met rechts daarvan de tekst. (Je kunt dat bij flexbox tamelijk gedetailleerd aanpassen, maar dat gebeurt hier niet.) Als er heel weinig tekst in <main> staat, komt er ruimte voor twee of meer <li>'s naast elkaar, links van de tekst in <main>.

Nu worden de <li>'s altijd onder elkaar gezet, ongeacht hoeveel of hoe weinig er in <main> staat.

margin: 10px 0 0 10px;

Kleine marge boven en links.

Met deze marge aan de bovenkant komt bovenkant van de eerste tekening in het menu gelijk te staan met de bovenkant van <main>.

transform: translateX(0);

Eerder is de <ul> met transform: translateX(-20000px); links buiten het scherm gezet. Hier moet het menu altijd zichtbaar zijn, dus wordt de <ul> binnen het scherm gezet.

main

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. (Alleen wat binnen deze media query geldig is, wordt binnen dit blokje herhaald.)

main {background: white; color: black; margin: 2.2rem 3px 3px; border: black solid 1px; padding: 5px;}

Alle <main>'s. Dat is er maar één, de belangrijkste inhoud van de pagina staat erin. Hier is dat alleen opvultekst.

columns: 2;

In deze bredere browservensters wordt de tekst over twee kolommen verdeeld, zodat de regels niet te lang en daardoor moeilijk leesbaar worden.

Dit demonstreert gelijk, waarom columns nauwelijks bruikbaar is: als de kolommen te hoog worden, moet vanaf de onderkant van 'n kolom terug naar boven worden gescrold om de volgende kolom te kunnen lezen. Dat is ongelooflijk onhandig. Daarom is deze eigenschap op dit moment alleen bruikbaar voor hele korte teksten. Er wordt wel aan gewerkt om dat op te lossen met een nieuw soort overflow, maar het zal nog wel even duren, voordat dat klaar is.

Maar goed, voor deze opvultekst maakt dat weinig uit.

column-gap: 24px;

24 px ruimte tussen de kolommen.

column-rule: black solid 1px;

Zwart lijntje tussen de kolommen.

margin: 14px;

Aan alle kanten een marge. Met deze marge aan de bovenkant komt de bovenkant van <main> gelijk te staan met de bovenkant van de eerste tekening in het menu.

padding: 12px;

Kleine afstand tussen rand van en tekst in <main>

h1

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. (Alleen wat binnen deze media query geldig is, wordt binnen dit blokje herhaald.)

h1 {font-size: 1.2em; margin-top: 0; -ms-hypens: auto; -webkit-hyphens: auto; hyphens: auto;}

Alle <h1>'s. Dat is er maar één: de belangrijkste kopregel.

-ms-hyphens: manual; -webkit-hyphens: manual; hyphens: manual;

Hier staat in feite drie keer hetzelfde: hyphens: manual;. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms- en -webkit-.

Eerder is voor smallere browservensters automatisch afbreken aangezet. In deze bredere vensters is dat niet nodig, want lege ruimtes door langere woorden vallen hier niet zo op. En je voorkomt dat de browser hersenloos gaat afbreken op plaatsen, waar een mens dat nooit zou doen.