Skip links en inhoudsopgave

Navigatie site

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

Bij focus verandert de rand van de rechthoek geleidelijk van kleur - uitleg

Laatst aangepast: .

Afbeelding 1: rechthoek met zwarte rand, waarvan bij focus de kleur van de rand verandert

Korte omschrijving

Als de rechthoek focus krijgt door aanraken of -klikken of door de Tab-toets te gebruiken, verandert zwarte rand geleidelijk van kleur.

BELANGRIJK

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

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

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

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

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

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

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

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

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

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

Opmerkingen

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

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

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

Achterliggend idee

De rechthoek is een doodgewone <div> met een zwarte border. Door het toevoegen van tabindex="0" kan deze <div> door aanraken, klikken of door gebruik van de Tab-toets de focus krijgen. Zodra de <div> de focus krijgt, begint de rand te verkleuren. Gedurende acht seconden verkleurt de rand geleidelijk vanaf de hoek linksboven via links, onder, rechts en boven, om weer in de hoek linksboven te eindigen. De verkleuring begint met groen en eindigt via geel en oranje met rood.

In werkelijkheid verkleurt de rand van de <div> helemaal niet. Er worden vier <span>'s over de rand van de <div> gezet, voor elke kant één. Die <span>'s bevatten een gradiënt en die gradiënt wordt geleidelijk aan zichtbaar, waardoor steeds meer van de zwarte rand van de <div> onder de <span>'s verdwijnt. In onderstaande afbeelding zijn de vier <span>'s niet op, maar naast de zwarte rand van de <div> geplaatst:

Afbeelding 2: randen staan buiten de div en zijn daardoor zichtbaar

De gekleurde strepen zijn de vier <span>'s. Als je die niet naast, maar op de zwarte rand van de <div> zet, heb je de zogenaamde verkleuring van de zwarte rand. Inderdaad, zoals vaker met css: u wordt geheel en al gratis en voor niets in de maling genomen.

(Degene die met alleen css en html een zwarte border met een vloeiende rondgaande beweging kan veranderen in een verlopende kleur, zou onmiddellijk worden voorgedragen voor de Nobelprijs voor de css.)

De vier <span>'s zitten in de html onder de <div> met de zwarte rand. Door <div> en <span>'s in een gezamenlijke div#wrapper met een relatieve positie te zetten, kunnen de <span>'s op de juiste plaats worden neergezet: precies boven de zwarte rand, waar de betreffende <span> bij hoort.

De <span> links heeft een hoogte van 0 px. Zodra de <div> de focus krijgt, groeit die hoogte met behulp van transition gedurende 1,3 seconde naar 100%: even hoog als de <div>. Waarna de zwarte rand links door de gradiënt in de <span> links wordt afgedekt. En er voor het oog op lijkt, dat de zwarte linkerrand is verkleurd.

De <span> onder heeft een breedte van 0 px. Zodra de <div> de focus krijgt, groeit die breedte met behulp van transition gedurende 2,7 seconde naar 100%: even breed als de <div>. Waarna de zwarte rand onder door de gradiënt in de onderste <span> wordt afgedekt. De verandering van deze <span> begint na 1,3 seconde, waardoor de verandering van de onderste <span> aansluit op de verandering van de <span> links.

Ook de <span> rechts heeft een hoogte van 0 px. Zodra de <div> de focus krijgt, groeit de hoogte van deze <span> gedurende 1,3 seconde van 0 px naar 100%: even hoog als de <div>. Deze verandering begint na 4 seconden, zodat deze verandering weer aansluit op de verandering van de onderste <span>. Omdat deze <span> met bottom: 0; aan de onderkant van de zwarte <div> is vastgezet, groeit deze <span. van onder naar boven.

Blijft nog over de bovenste <span>. En die bovenste <span> heeft een probleem. De gradiënt is links rood en rechts oranje. De <span> (en daarmee de gradiënt) moet vanaf rechts naar links groeien, om aan te sluiten op de <span> rechts. Daardoor begint de <span> dus, als deze van 0 px breedte naar de volle breedte gaat, met rood. Geleidelijk aan komt daar dan steeds meer oranje bij. Precies de verkeerde volgorde, want de verkleuring moet met oranje beginnen en met rood eindigen.

Je kunt de gradiënt wel van oranje links naar rood rechts laten verlopen, maar dan is de gradiënt aan het eind van de verandering ook rechts oranje en links rood. En sluit dus niet aan op de <span> rechts. Dus dat schiet niet op.

Dit is op geen enkele manier op te lossen: óf de kleur is verkeerd tijdens de beweging, óf de kleur is aan het eind van de beweging verkeerd.

De bovenste <span> heeft daarom vanaf het begin al de volle breedte. Waardoor oranje netjes rechts en rood netjes links staat. De bovenste <span>, en daarmee de erin zittende gradiënt, verandert dus helemaal niet van breedte. Deze bovenste <span> wordt verborgen door boven deze <span> nog een andere <span> te zetten met een zwarte achtergrond. Deze andere <span> is precies even hoog als de rand van de <div>, waardoor de <div> een gewone rand aan de bovenkant lijkt te hebben. Terwijl je in werkelijkheid dus die extra <span> ziet.

De <span> met de zwarte achtergrond is even breed als de <div>. Als de rand aan de bovenkant moet gaan verkleuren, wordt de extra <span> vanaf rechts verkleind. Daardoor wordt vanaf rechts steeds meer zichtbaar van de bovenste <span> en van de daarin zittende gradiënt. En lijkt de zwarte rand aan de bovenkant van kleur te veranderen.

Deze verandering begint na een vertraging van 5,3 seconde en duurt 2,7 seconde. Daardoor sluit deze verandering aan op de verandering van de <span> rechts.

Aan de bovenkant wordt u dus niet gratis en voor niets één keer, maar twee keer in de maling genomen. Maar voor het oog voldoet het. Doet toch 'n beetje aan Asscher en de PvdA denken. Als ze in de regering zitten, voeren ze 'n inktzwart neoliberaal beleid uit. In de oppositie kleuren ze met alle winden mee. En als ze straks weer in de regering zitten, zie je daar niets meer van terug.

Voor de breedte en hoogte van de <div> wordt als eenheid de rem gebruikt. Deze werkt ongeveer hetzelfde als de bekendere eenheid em, maar is gebaseerd op de lettergrootte van <html>. Daardoor is de rem overal op de pagina even groot. Anders dan bij de em hebben eventuele voorouders met een ander lettergrootte geen invloed op de rem. Als de gebruiker de lettergrootte van de browser verandert, wordt in feite de lettergrootte van <html>, de rem, verandert.

De <div> is 12 rem hoog en 24 rem breed. Als de lettergrootte wordt veranderd, blijven deze verhoudingen hetzelfde, want 24 rem is altijd twee keer zoveel als 12 rem, ongeacht de grootte van de rem.

Er is voor de rem gekozen, omdat met deze relatieve eenheid de kleuren in de gradiënts het best kunnen worden bepaald. Standaard is 1 rem (ongeveer) 16 px. De <div> is dus standaard 192 px hoog en 384 px breed. In smallere browservensters is dat te breed, en al helemaal als de gebruiker de lettergrootte heeft verhoogd. Als de gebruiker de lettergrootte verdubbeld, wordt 1 rem 32 px. De <div> wordt dan 384 px hoog en 768 px breed.

Daarom wordt een maximumhoogte en ‑breedte opgegeven in vw. 1 vw is 1% van de breedte van het browservenster. De maximumhoogte is half zo groot als de maximumbreedte, precies dezelfde verhouding als de <div> met de zwarte rand heeft. Hierdoor blijven ook in smallere vensters de verhoudingen hetzelfde.

De vier <span>'s hebben elk als achtergrond een gradiënt. De kleuren van die gradiënts sluiten op elkaar aan: van groen via geel en oranje naar rood. Maar hoe krijg je die kleuren nou zo, dat ze op elkaar aansluiten?

De kleuren zijn groen – geel – oranje – rood. Aan het begin groen, aan het eind rood. Met daartussen drie lijnstukken: groen/geel, geel/oranje en oranje/rood. En er zijn vier <span>'s. Je kunt dus niet simpelweg 'n <span> met 'n gradiënt van groen naar geel, eentje van geel naar oranje, en eentje van oranje naar rood maken. Want dan houd je aan de bovenkant 'n bloterik over: de vierde <span>.

Om de juiste gradiënts te kunnen maken, zijn de vier <span>'s even achter elkaar gezet, als één grote lijn. De lengte van die lijn is 12 rem + 24 rem + 12 rem + 24 rem = 72 rem. Omdat de meeste grafische programma's niet met de rem uit de voeten komen, wordt dat omgerekend naar px. Dat maakt verder niets uit, want het gaat om verhoudingen: de <span> links is een zesde van de totale lengte, de onderste <span> is een derde van de totale lengte, enzovoort. Of dat nou in px, rem of kerstboom is, maakt verder niets uit.

De standaardgrootte van de rem is 16 px. De lijn wordt dan 1152 px lang. De lijn begint links met groen (lime), op 33,3% is de lijn geel (yellow), op 66,6% is de lijn oranje (orange), en helemaal aan het eind is de lijn rood (red).

Geel ligt op 33,3% vanaf links op de lijn, dat is op 384 px vanaf links. De <span> links is 192 px hoog. Geel komt daardoor op de onderste <span> op 192 px vanaf links te staan. Om de juiste kleur van de linkeronderhoek te vinden, kun je met een kleurenkiezer kijken, welke kleur op 192 px vanaf links op de lijn ligt. Dat blijkt #7fff00 te zijn, iets tussen groen en geel in. De gradiënt voor de <span> links eindigt met #7fff00, de gradiënt voor de onderste <span> begint daarmee. Op de afbeelding hieronder is dat weergegeven:

Afbeelding 3
Afbeelding 3: op bovenstaande afbeelding zijn de vier <span>'s met kleuren achter elkaar gezet. De ononderbroken lijntjes binnen de balk geven de lengte van de <span>'s aan: links van 0 tot 192 px, onder van 192 tot 576 px, rechts van 576 tot 768 px, en boven van 768 tot 1152 px.
Aan de bovenkant staan de gevonden punten voor de kleuren, aan de onderkant staan de hoeken. (De hoeken zijn hetzelfde als de begin- en eindpunten van de <span>'s). Alleen de onderste <span> (van 192 tot 576 px) heeft een extra punt nodig voor yellow. Bij de andere drie <span>'s beslaat het kleurverloop de volle breedte of hoogte van de <span>. Die drie <span>'s kunnen dus volstaan met een simpele gradiënt met alleen kleuren aan begin en einde, zonder tussenliggende punten.

Op dezelfde manier kun je punten voor de gradiënts van de <span>'s rechts en boven vinden. (Overigens is het volstrekt niet nodig om dit op de pixel precies te doen. Niemand merkt het, als het eerste punt van de gradiënt niet op 192 px vanaf links, maar op 195 px vanaf links komt te staan.)

Op bepaalde punten is gevonden, welke kleur de verandering daar moet hebben. Dat moet worden omgezet naar de vier afzonderlijke <span>'s.

De <span> links krijgt een gradiënt die verloopt van lime naar #7fff00.

De <span> onder begint links met #7fff00, moet op 192 px vanaf links (dat is in bovenstaande kleurenbalk 384 px vanaf links) geel (yellow) krijgen, en rechts aan het eind #ffd200.

De <span> rechts loopt van #ffd200 aan de onderkant naar oranje (orange) aan de bovenkant. En de bovenste <span> loopt van oranje (orange) rechts naar rood (red) links.

Het punt voor geel in de onderste <span> is wat lastig. Eerder is gevonden dat dat op 192 px vanaf links moet liggen. Dat is in bredere browservensters halverwege de onderste <span>, want die is in bredere vensters 384 px breed.

Maar in smallere browservensters is de onderste <span> (veel) smaller. Als je dan geel op 192 px vanaf links legt, klopt de kleurverdeling niet meer. 192 px is dan niet meer halverwege de onderste <span>, maar (veel) meer naar rechts. Hoe smaller het venster, hoe groter de afwijking.

Je zou dat kunnen oplossen door niet 192 px, maar 50% te nemen als punt voor geel. Maar dat werkt ook niet, want de breedte van de <span> verandert van 0 naar 384 px. Op het ogenblik dat de <span> bijvoorbeeld 100 px breed is, heb je dan links #7fff00, en op 50 px (50%) geel. Bij elke verandering van de breedte van de <span> verandert het punt voor geel mee.

Gewoon weglaten van het punt voor geel werkt ook niet, want dan verandert de kleur van de gradiënt in één keer van van #7fff00 links naar #ffd200 rechts, waarbij geel helemaal niet meer meedoet.

Om dit op te lossen wordt die 192 px voor geel weer omgerekend naar de relatieve eenheid rem: 12 rem. De <span> is 24 rem breed, dus 12 rem is ook halverwege.

De rem is gekoppeld aan de lettergrootte van de browser. In smallere browservensters, zoals op mobieltjes, is de lettergrootte meestal ook (veel) kleiner. Daarmee is de 12 rem op mobieltjes ook (veel) minder dan 12 rem in een breed venster. Dit lost het probleem grotendeels op: 12 rem blijft ongeveer halverwege de onderste <span>, ongeacht de breedte van het venster.

In de geteste mobieltjes was het smalste browservenster 320 px, en daarin leek de kleur voor het oog volkomen geleidelijk te verlopen. Alleen in nog (veel) smallere vensters zou je nu in theorie nog een afwijking kunnen zien.

Zodra de <div> de focus weer verliest, komt zonder vertraging weer de oorspronkelijke zwarte kleur van de rand terug. (Voor dat wonder van ontaarde techniek Internet Explorer is daarvoor een extra transition: 0s; nodig.)

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

Een positieve tabindex wordt in dit voorbeeld 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 dit voorbeeld heeft de <div> met de zwarte rand een tabindex="0" gekregen:

<div id="demo" tabindex="0">

Hierdoor kan deze <div> focus krijgen, waardoor met behulp van de pseudo-class :focus de kleur van de rand kan worden veranderd.

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 dit 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, e.d.

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, e.d. 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, e.d. te gaan: met behulp van de Tab-toets kun je naar links, invoervelden, e.d. '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 e.d. 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.

Het kadertje dat de focus aangeeft, moet nooit zonder meer worden weggehaald. Gebruikers van de Tab-toets hebben dan geen idee meer, waar ze zijn. In dit voorbeeld verkleurt de rand van div#demo, als deze focus heeft. Maar als een rand verkleurt, betekent dat niet automatisch dat het element met die rand focus heeft. Je kunt die rand bijvoorbeeld ook vanzelf laten verkleuren, na een bepaalde tijd of zo. Daarom wordt ook hier het kadertje toch niet weggehaald, ook al is dat misschien soms iets minder mooi. (Dit is eigenlijk geen afdoende oplossing. Hierover is meer te vinden bij Bekende problemen (en oplossingen) onder het kopje Gebruikers Tab-toets.)

Normaal genomen wordt een <div> door de Tab-toets genegeerd, maar door het toevoegen van tabindex="0" kan de <div> met de zwarte rand toch focus krijgen. Als de Tab-toets nogmaals wordt ingedrukt, verliest de <div> de focus weer.

Door diezelfde tabindex kan een <div>, als erop wordt geklikt, de focus krijgen. Op een touchscreen wordt een aanraking hetzelfde afgehandeld als een klik, dus ook bij een aanraking krijgt de <div> de focus. Als het scherm ergens buiten de <span>'s wordt aangeraakt, verliest de <span> de focus weer en verdwijnen de vervangende afbeeldingen.

Behalve op iOS en iPadOS. Daar verliest een element pas de focus, als een ander element de focus krijgt. En in het voorbeeld zijn zulke elementen er niet: alleen de <div> met de zwarte rand kan de focus krijgen. Met behulp van extra code (zoals een ander element dat de focus kan krijgen), kan dit worden opgelost, maar dat is in dit voorbeeld niet gedaan. Om op iOS en iPadOS de zwarte rand weer terug te krijgen, moet de pagina opnieuw worden geladen.

: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 12 oktober 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.8 (2048 x 1536 px, device-pixel-ratio: 2:
Safari, Chrome, Firefox en Microsoft Edge (alle portret en landschap).

iPad met iPadOS 14.0.1 (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.0.1 (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.8 en 14.0.1, iPadOS 14.0.1 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.

JavaScript wordt niet gebruikt, dus het uit- of aanstaan van JavaScript heeft geen enkele invloed.

Zonder css

Geen problemen.

De lay-out is verdwenen, maar alle tekst en dergelijke is gewoon nog aanwezig.

Gebruikers Tab-toets

Probleem: het is in veel browsers onduidelijk, dat de <div> met de zwarte rand focus heeft.

Je kunt met behulp van de Tab-toets de <div> met de zwarte rand de focus geven. De zwarte rand begint dan te verkleuren. Focus wordt normaal genomen aangegeven met een kadertje rondom het element met focus. Bij een <div> doen echter niet alle browsers dat. Je kunt dus niet altijd zien, dat de <div> de focus heeft.

Als de <div> de focus heeft, begint de rand te verkleuren. Dat valt op. Maar zo'n verkleuring kan op allerlei manieren beginnen, dat hoeft niet iets met focus te maken te hebben. Bovendien is een verkleuring iets totaal anders dan het gebruikelijke kadertje, waaraan gebruikers gewend zullen zijn.

In dit voorbeeld is hier geen aandacht aan besteed, maar bij echt gebruik zou dit wel moeten.

Je zou dit kunnen doen met de nieuwe pseudo-class :focus-visible, met eventueel wat JavaScript voor oudere browsers. Hierover is meer te vinden op de pagina met links onder het kopje CSS → Selectors, specifiteit, class, id, erfelijkheid (inheritance), en dergelijke.

Tekstbrowsers

Geen problemen.

WebbIE en Lynx laten gewoon de tekst zien.

Schermlezers

Geen problemen.

Schermlezers lezen gewoon netjes de tekst voor.

Het effect van de verkleurende rand valt meestal weg, omdat schermlezers vaak een eigen toegankelijkheidsfocus hebben. Daardoor is de verkleuring niet of slecht te zien. Soms begint het verkleuren zodra de toegankelijkheidsfocus op div#demo staat, soms verkleurt de rand helemaal niet.

Een gedetailleerd overzicht van wat er precies bij elke versie van elke geteste schermlezer op elk besturingssysteem gebeurt is niet zo zinvol, want dit lijkt per versie te verschillen. Het komt er gewoon op neer dat de verkleurende rand niet werkt, maar dat tekst en dergelijke gewoon worden voorgelezen.

Zoomen en andere lettergrootte

Geen problemen.

Bij zoomen is er sowieso geen enkel probleem, omdat alles dan in gelijke mate verandert.

Bij een andere lettergrootte is er ook geen probleem, omdat de meeste maten met de eenheid rem aan de lettergrootte zijn gekoppeld, waardoor de verhoudingen hetzelfde blijven.

Alle browsers

Probleem: alleen een verkleuring is onvoldoende als melding.

Als je de verkleurende rand zou willen gebruiken als waarschuwing voor verstreken tijd of zo, is dat niet voldoende. Mensen die moeite hebben met het zien van kleuren, zullen dat niet goed kunnen zien. Daarom moet je, als je dit echt wilt gebruiken, iets toevoegen. Je zou bijvoorbeeld de rand ook geleidelijk dikker kunnen maken, of een teller kunnen toevoegen.

Wijzigingen

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

:

Nieuw opgenomen.

Inhoud van de download en licenties

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

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

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

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

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

kader-129-dl.html: de pagina met het voorbeeld.

kader-129.pdf: deze uitleg (aangepast aan de inhoud van de download).

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

129-css-dl:

kader-129-dl.css: stylesheet voor kader-129-dl.html.

HTML

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

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

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

<!doctype html>

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

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

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

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

<html lang="nl">

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

<meta charset="utf-8">

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

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

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

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

<div id="demo" tabindex="0">

Omdat een <div> normaal genomen geen focus kan krijgen, reageert een <div> niet op een aanraking, een klik, of de Tab-toets. Door het toevoegen van tabindex="0" kan de <div> wel focus krijgen. Hierdoor kan in de css in selectors de pseudo-class :focus worden gebruikt, waardoor de <div> wel gaat reageren op een aanraking, een klik en de Tab-toets.

CSS

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

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

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

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

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

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

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

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

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

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

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

/* kader-129-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.

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.

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;

Slim om te doen vanwege verschillen tussen browsers.

main

Alle <main>'s. Dat is er maar één. De belangrijkste inhoud van de pagina staat erin. In dit voorbeeld is dat de hele pagina.

display: block;

Oudere browsers kennen <main> niet. Standaard worden onbekende elementen als inline-element weergegeven, waardoor eigenschappen als breedte niet gebruikt kunnen worden. Nu geven alle browsers <main> als blok-element weer.

width: 24rem;

Breedte.

De rem werkt ongeveer hetzelfde als de bekendere eenheid em. De em is gebaseerd op de lettergrootte van het element: als de lettergrootte verandert, verandert bijvoorbeeld een breedte die is opgegeven in em mee met de lettergrootte.

De rem werkt net zo, maar is gebaseerd op de lettergrootte van <html>. Daardoor is de rem overal op de pagina even groot, ongeacht wat eventuele voorouders van het element aan de lettergrootte veranderen. Als je de lettergrootte van de browser verandert, verander je in feite de lettergrootte van het <html>-element. De rem verandert mee met die lettergrootte.

De reden waarom hier rem als eenheid wordt gebruikt, is te vinden bij De <div> is 12 rem hoog...

max-width: 90vw;

In smallere browservensters zou <main> te breed worden voor het venster. Je moet dan horizontaal gaan scrollen om alles te zien, wat bijzonder vervelend is. Daarom wordt hier een maximumbreedte opgegeven.

1 vw is 1% van de breedte van het browservenster. <main>, en daarmee alles wat erin zit, wordt dus nooit breder dan 90% van de breedte van het venster, ongeacht de breedte van het venster.

margin: 0 auto;

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

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

<body> is een blok-element en wordt hierdoor normaal genomen even breed als z'n ouder <html>. <html> is het buitenste element en wordt hierdoor normaal genomen even breed als het venster van de browser. Uiteindelijk staat <main> hierdoor altijd horizontaal gecentreerd binnen het venster van de browser, ongeacht de breedte van het venster.

padding-top: 20px;

Kleine afstand tussen de inhoud van <main> en de bovenkant van het browservenster.

#wrapper

Het element met id="wrapper". De overkoepelende <div> waar de hele constructie in zit.

position: relative;

Door de <div> relatief te positioneren, wordt het mogelijk nakomelingen van de <div> te positioneren ten opzichte van de <div>. Omdat verder niets wordt opgegeven voor top en dergelijke, heeft dit verder geen invloed op de <div> zelf.

#demo

Het element met id="demo". Dit is de <div> met de zwarte rand.

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.

box-sizing: border-box;

Normaal genomen worden border en padding bij de breedte opgeteld. Hier komt dat slecht uit, omdat het daardoor moeilijker wordt de <span>'s met de gradiënts precies boven de zwarte randen van de <div> neer te zetten.

Nu worden padding en border niet bij de breedte opgeteld, maar vallen deze binnen de breedte van div#demo.

height: 12rem;

Hoogte

De rem werkt ongeveer hetzelfde als de bekendere eenheid em. De em is gebaseerd op de lettergrootte van het element: als de lettergrootte verandert, verandert bijvoorbeeld een breedte die is opgegeven in em mee met de lettergrootte.

De rem werkt net zo, maar is gebaseerd op de lettergrootte van <html>. Daardoor is de rem overal op de pagina even groot, ongeacht wat eventuele voorouders van het element aan de lettergrootte veranderen. Als je de lettergrootte van de browser verandert, verander je in feite de lettergrootte van het <html>-element. De rem verandert mee met die lettergrootte.

De reden waarom hier rem als eenheid wordt gebruikt, is te vinden bij De <div> is 12 rem hoog...

max-height: 45vw;

1 vw is 1% van de breedte van het browservenster. <main>, en daarmee alles wat erin zit, wordt dus nooit hoger dan 90% van de breedte van het venster, ongeacht de breedte van het venster.

In het algemeen is het een slecht idee om een hoogte of maximumhoogte op te geven aan een blok-element. Als de inhoud ervan te hoog is voor het element, komt het teveel onder het blok-element te staan. Maar randen, achtergrond, en dergelijke blijven hetzelfde, want die hebben een vaste hoogte, dus dat kan forse problemen opleveren.

div#demo is gelijk hierboven 12 rem hoog gemaakt. Omdat het een blok-element is, wordt de <div> normaal genomen automatisch even breed als z'n ouder div#wrapper. Dat is ook een blok-element, dus ook div#wrapper wordt normaal genomen even breed als z'n ouder <main>. <main> heeft bij main een breedte van 24 rem gekregen. Dat is te breed voor smallere browservensters, daarom is met max-width: 90vw; ook een maximumbreedte opgegeven: 90% van de breedte van het venster.

div#demo is dus normaal genomen 24 rem breed en 12 rem hoog: twee keer zo breed als hoog, een verhouding van 2 : 1. Maar in smallere browservensters wordt de breedte 90% van het venster. Om de verhouding 2 : 1 hetzelfde te houden, wordt hier een maximumhoogte van 45 vw opgegeven, de helft van de maximumbreedte van 90 vw.

Omdat er een maximumhoogte is opgegeven, mag er niet te veel tekst en dergelijke in de <div> zitten, want bij een grotere letter of zo past de tekst niet meer in de <div>. Wat er niet in past wordt standaard toch weergegeven, zodat geen tekst en dergelijke verdwijnt. Maar bijvoorbeeld de achtergrondkleur van de <div> groeit niet mee. Dus dit kan forse problemen opleveren.

Dat wordt hieronder opgelost met overflow: auto;: als de inhoud van div#demo er niet meer in past, verschijnt een scrollbalk. Maar binnen een <div> moeten scrollen om de inhoud ervan te lezen en zo is – vriendelijk gezegd – niet helemaal een reden om in gejuich en gejubel en vreugdegezang uit te barsten. Daarom werkt dit voorbeeld alleen maar goed, als er niet al te veel tekst en dergelijke in div#demo zit. Of als het geen <div> is, maar bijvoorbeeld een <textarea>, waarbij een scrollbalk toch al niet ongebruikelijk is.

overflow: auto;

Als dat nodig is, kan de inhoud van de <div> worden gescrold. Afhankelijk van browser en besturingssysteem kan een verticale scrollbalk verschijnen. Meer uitleg staat gelijk hierboven bij max-height: 45vw;.

border: black solid 3px;

Zwarte rand.

#demo p

Alle <p>'s in het element met id="demo". Dat is er hier maar één: de <p> met de tekst.

margin: 0;

Standaard heeft een <p> een marge aan boven- en onderkant. Die wordt hier weggehaald.

padding: 5px;

Kleine ruimte tussen inhoud en buitenkant van de <p>.

#onder

Het element met id="onder". Dit is de <span> die voor de verkleuring aan de onderkant zorgt.

background: linear-gradient(to right, #7fff00, yellow 12rem, #ffd200);

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 vier gradiënts gaat, die op elkaar moeten aansluiten. Hoe de juiste kleuren hier zijn gevonden, is te vinden bij De vier <span>'s hebben...

linear-gradient valt in een aantal delen uiteen:

to right: de kant waar de gradiënt naartoe gaat. Omdat alleen de rechterkant is opgegeven, loopt de gradiënt horizontaal van links naar rechts.

#7fff00: de eerste kleur is #7fff00 (iets vaags tussen lichtgroen en geel in). Omdat geen plaats is opgegeven, begint de gradiënt helemaal links met deze kleur. (Je kunt ook #7fff00 0% opgeven, maar dat is precies hetzelfde.)

yellow 12rem: de tweede kleur is yellow (geel). Hier is wel een plaats opgegeven: 12rem. Dat wil zeggen dat de gradiënt op 12 rem vanaf links geel is. Omdat de <span> 24 rem breed is, is dat halverwege de <span>. (Dat is te zeggen: nu is de <span> nog 0 px breed, maar bij #demo:focus ~ #onder wordt de <span> 24 rem breed.)

De rem werkt ongeveer hetzelfde als de bekendere eenheid em. De em is gebaseerd op de lettergrootte van het element: als de lettergrootte verandert, verandert bijvoorbeeld een breedte die is opgegeven in em mee met de lettergrootte.

De rem werkt net zo, maar is gebaseerd op de lettergrootte van <html>. Daardoor is de rem overal op de pagina even groot, ongeacht wat eventuele voorouders van het element aan de lettergrootte veranderen. Als je de lettergrootte van de browser verandert, verander je in feite de lettergrootte van het <html>-element. De rem verandert mee met die lettergrootte.

De reden waarom hier rem als eenheid wordt gebruikt, is te vinden bij Het punt voor geel in de onderste <span>...

De geleidelijke overgang van de kleur #7fff00 helemaal rechts naar hier geel wordt door de browser geregeld.

#ffd200: de derde (en laatste) kleur is #ffd200 (iets tussen geel en oranje in). Omdat geen plaats is opgegeven, eindigt de gradiënt helemaal rechts met deze kleur. (Je kunt ook #ffd200 100% opgeven, maar dat is precies hetzelfde.)

De geleidelijke overgang van de middelste kleur geel naar de kleur #ffd200 aan het eind wordt door de browser geregeld.

height: 3px;

Hoogte. De <span> is precies even hoog als de rand van div#demo, want deze rand moet later worden afgedekt door de <span>.

position: absolute;

Om de <span> 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 div#wrapper, de ouder van de <span>. Deze heeft bij #wrapper een relatieve positie gekregen.

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

right: 100%; bottom: 0; left: 0;

De combinatie van right en left zorgt ervoor dat de <span> helemaal geen breedte heeft. Hierdoor is de <span> onzichtbaar. Als div#demo focus krijgt, wordt de <span> bij #demo:focus ~ #onder even breed gemaakt als div#demo met de zwarte rand, waardoor de gradiënt in de <span> de rand aan de onderkant van div#demo verbergt.

Een absolute positie in procenten, zoals bij right: 100%; geldt 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 div#wrapper, de ouder van de <span>. Deze heeft bij #wrapper een relatieve positie gekregen. De rechterkant van de <span> komt dus op 100% van de rechterkant van div#wrapper te staan. Dat is hetzelfde als helemaal links.

Met left: 0; wordt ook de linkerkant van de <span> helemaal links in div#wrapper gezet. Als zowel de rechter- als de linkerkant van de <span> helemaal rechts in div#wrapper staan, heeft de <span> geen enkele breedte, want linker- en en rechterzijkant staan op precies dezelfde plek.

Later wordt right bij #demo:focus ~ #onder helemaal rechts in div#wrapper gezet, waardoor de <span> even breed wordt als div#demo met de zwarte rand. Daardoor bedekt de gradiënt in de <span> dan de zwarte rand aan de onderkant van div#demo. Omdat right wordt veranderd en left hetzelfde blijft, groeit de <span> van links naar rechts: de zwarte rand aan de onderkant lijkt van links naar rechts te verkleuren.

bottom: 0; zet de <span> precies over de zwarte rand aan de onderkant van div#demo. transition: 0s;

Dit is alleen nodig voor Internet Explorer 11. Een uitgebreide uitleg is te vinden bij transition: 0s;.

#rechts

Het element met id="rechts". Dit is de <span> die voor de verkleuring rechts zorgt.

background: linear-gradient(to top, #ffd200, orange);

Als achtergrond wordt een gradiënt met twee kleuren gebruikt. Een uitgebreide beschrijving van een gradiënt met twee kleuren staat bij background: linear-gradient(to bottom, lime, #7fff00);.

De enige verschillen: door het gebruikte to top lopen de kleuren hier van onder naar boven. De onderste kleur is #ffd200 (iets tussen geel en oranje in), de bovenste kleur is orange (oranje).

width: 3px;

Breedte. De <span> is precies even breed als de rand van div#demo, want deze rand moet later worden afgedekt door de <span>.

height: 0;

Helemaal geen hoogte. Hierdoor is de <span> onzichtbaar. Als div#demo focus krijgt, wordt de <span> bij #demo:focus ~ #rechts even hoog gemaakt als div#demo met de zwarte rand, waardoor de gradiënt in de <span> de rechterrand van div#demo verbergt.

position: absolute;

Om de <span> 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 div#wrapper, de ouder van de <span>. Deze heeft bij #wrapper een relatieve positie gekregen.

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

right: 0;

De <span> helemaal rechts neerzetten, zodat deze over de rechterrand van div#demo komt te staan.

bottom: 0;

Helemaal onderaan neerzetten.

De <span> heeft iets hierboven een hoogte van 0 px gekregen. Die hoogte wordt later bij #demo:focus ~ #rechts even hoog gemaakt als de hoogte van div#demo. Daardoor bedekt de gradiënt in de <span> dan de zwarte rechterrand van div#demo. Omdat de <span> onderaan is gepositioneerd, groeit de hoogte van onder naar boven: de zwarte linkerrand lijkt van onder naar boven te verkleuren.

transition: 0s;

Dit is alleen nodig voor Internet Explorer 11. Een uitgebreide uitleg is te vinden bij transition: 0s;.

#boven

Het element met id="boven". Dit is de <span> die voor de verkleuring aan de bovenkant zorgt.

background: linear-gradient(to left, orange, red);

Als achtergrond wordt een gradiënt met twee kleuren gebruikt. Een uitgebreide beschrijving van een gradiënt met twee kleuren staat bij background: linear-gradient(to bottom, lime, #7fff00);.

De enige verschillen: door het gebruikte to left lopen de kleuren hier van rechts naar links. De kleur rechts is orange (oranje), de kleur links is red (rood).

width: 100%;

Breedte.

Iets hieronder wordt de <span> absoluut gepositioneerd. Een breedte in procenten van een absoluut gepositioneerd element is 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 div#wrapper, de ouder van de <span>. Deze heeft bij #wrapper een relatieve positie gekregen. De <span> is dus even breed als div#wrapper.

Omdat div#demo, de <div> met de zwarte rand, ook even breed is als div#wrapper, beslaat de <span> de volle breedte van div#demo.

height: 3px;

Hoogte. De <span> is precies even hoog als de rand van div#demo, want deze rand moet later worden afgedekt door de <span>.

position: absolute;

Om de <span> 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 div#wrapper, de ouder van de <span>. Deze heeft bij #wrapper een relatieve positie gekregen.

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

top: 0;

Zet de <span> precies over de zwarte rand aan de bovenkant van div#demo.

#verberg

Het element met id="verberg". Bovenop de zwarte rand aan de bovenkant van div#demo staat span#boven, een <span> met een gradiënt als achtergrond. Om deze <span> te verbergen, wordt over deze <span> een andere <span> met een zwarte achtergrond gezet: span#verberg. Hierdoor lijkt div#demo ook aan de bovenkant een zwarte rand te hebben.

background: black;

Zwarte achtergrond.

height: 3px;

Hoogte. De randen rechts, onder en links van div#demo zijn 3 px breed, dus ook deze <span> krijgt die breedte. Hierdoor lijkt div#demo één doorlopende zwarte rand te hebben.

position: absolute;

Om de <span> 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 div#wrapper, de ouder van de <span>. Deze heeft bij #wrapper een relatieve positie gekregen.

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

top: 0;

Zet de <span> precies aan de bovenkant van div#demo.

right: 0; left: 0;

De span wordt gepositioneerd ten opzichte van div#wrapper, zoals iets hierboven beschreven bij position: absolute;. Door de <span> helemaal rechts én helemaal links te positioneren, wordt de <span> even breed als div#wrapper. En omdat div#demo, de <div> met de zwarte randen, ook zo breed is, beslaat de <span> de volledige breedte aan de bovenkant van div#demo, van helemaal rechts tot helemaal links.

Als div#demo focus krijgt, wordt bij #demo:focus ~ #verberg right: 0; veranderd in right: 100%;.waardoor de rechterkant van de <span> helemaal links in div#wrapper komt te staan.

Een absolute positie in procenten zoals hier right: 100%; geldt 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 div#wrapper, de ouder van de <span>. Deze heeft bij #wrapper een relatieve positie gekregen. De rechterkant van de <span> komt dus op 100% van de rechterkant van div#wrapper te staan. Dat is hetzelfde als helemaal links.

Als zowel de linker- als de rechterkant van de span#verberg helemaal links in div#wrapper staan, is de <span> onzichtbaar. Daardoor wordt de eronder zittende span#boven met de gradiënt zichtbaar. Omdat alleen right wordt veranderd, lijkt de zwarte rand aan de bovenkant van rechts naar links te verkleuren.

transition: 0s;

Dit is alleen nodig voor Internet Explorer 11. Een uitgebreide uitleg is te vinden bij transition: 0s;.

#demo:focus ~ #onder

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.

#onder {background: linear-gradient(to right, #7fff00, yellow 12rem, #ffd200); width: 0; height: 3px; position: absolute; right: 100%; bottom: 0; left: 0; transition: 0s;}

Het element met id="onder" dat in de html volgt op het element met id="demo", maar alleen als div#demo focus heeft. Dit is span#onder, die zorgt voor de verkleuring van de zwarte rand aan de onderkant van div#demo.

right: 0;

Bij #onder is de rechterkant van span#onder met right: 100%; helemaal links in div#wrapper gezet. Omdat ook de linkerkant van span#onder daar staat, kreeg span#onder daardoor een breedte van 0 px. Oftewel: onzichtbaar.

Hier wordt de rechterkant van de <span> met right: 0; helemaal rechts neergezet. De <span> wordt daardoor even breed als div#wrapper. En omdat div#demo ook die breedte heeft, dekt de gekleurde achtergrond van de <span> nu de hele zwarte rand aan de onderkant van div#demo af, over de volle breedte.

transition: 2.7s 1.3s linear;

Een uitgebreid verhaal over transition staat bij transition: 1.3s linear;. Hier staan alleen de verschillen met die transition.

De eerste waarde die een tijdsduur aangeeft is 2.7s, 2,7 seconde. De verandering duurt hier 2,7 seconde.

Er is hier een tweede waarde met een tijdsduur: 1.3s, 1,3 seconde. Deze tweede waarde geeft een vertraging aan: de verandering begint pas na 1,3 seconde. Omdat de verkleuring van de rand links 1,3 seconde duurt, sluit de verkleuring van de rand onderaan hier naadloos op aan.

Bij #onder is de rechterkant van de <span> met right: 100%; helemaal links neergezet. Hierboven wordt de rechterkant met right: 0; helemaal rechts neergezet. Daardoor groeit de <span> van links naar rechts. De zwarte rand aan de onderkant van div#demo verkleurt van links naar rechts.

#demo:focus ~ #rechts

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.

#rechts {background: linear-gradient(to top, #ffd200, orange); width: 3px; height: 0; position: absolute; right: 0; bottom: 0; transition: 0s;}

Het element met id="rechts" dat in de html volgt op het element met id="demo", maar alleen als div#demo focus heeft. Dit is span#rechts, die zorgt voor de verkleuring van de zwarte rechterrand van div#demo.

height: 100%;

Bij #rechts heeft de <span> een hoogte van 0 px gekregen, waardoor deze onzichtbaar is. Hier wordt de <span> even hoog gemaakt als div#demo, waardoor de gekleurde <span> de zwarte rechterrand van div#demo volledig bedekt. Een uitgebreider verhaal staat bij span#links onder het kopje height: 100%;.

transition: 1.3s 4s linear;

Een uitgebreid verhaal over transition staat bij transition: 1.3s linear;. Hier staan alleen de verschillen met die transition.

De eerste waarde die een tijdsduur aangeeft is 1.3s, 1,3 seconde. De verandering duurt hier 1,3 seconde.

Er is hier een tweede waarde met een tijdsduur: 4s, 4 seconde. Deze tweede waarde geeft een vertraging aan: de verandering begint pas na 4 seconde. Omdat de verkleuring van de randen links en onder samen 4 seconde duurt, sluit de verkleuring van de rand links hier naadloos op aan.

Bij #rechts is de onderkant van de <span> met bottom: 0; helemaal onderaan neergezet. Daardoor groeit de hoogte van de <span> van onder naar boven. De zwarte rechterrand van div#demo verkleurt van onder naar boven.

#demo:focus ~ #verberg

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.

#verberg {background: black; height: 3px; position: absolute; top: 0; right: 0; left: 0; transition: 0s;}

Het element met id="verberg" dat in de html volgt op het element met id="demo", maar alleen als div#demo focus heeft. Dit is span#verberg, die de gekleurde <span> aan de bovenkant verbergt onder z'n zwarte achtergrond.

right: 100%;

Bij #verberg is de rechterkant van span#verberg met right: 0; helemaal rechts in div#wrapper gezet. Omdat de linkerkant van span#verberg met left: 0; helemaal links is neergezet, dekt de zwarte achtergrond van de <span> de eronder zittende gekleurde span#boven helemaal af, over de volle breedte. Daardoor lijkt div#demo ook aan de bovenkant een zwarte rand te hebben.

Hier wordt de rechterkant van de <span> met right: 100%; helemaal links neergezet. Daardoor wordt de breedte van de <span> 0 px, oftewel: onzichtbaar. De eronder zittende span#boven met de gekleurde achtergrond is nu volledig zichtbaar.

transition: 2.7s 5.3s linear;

Een uitgebreid verhaal over transition staat bij transition: 1.3s linear;. Hier staan alleen de verschillen met die transition.

De eerste waarde die een tijdsduur aangeeft is 2.7s, 2,7 seconde. De verandering duurt hier 2,7 seconde.

Er is hier een tweede waarde met een tijdsduur: 5.3s, 5,3 seconde. Deze tweede waarde geeft een vertraging aan: de verandering begint pas na 5,3 seconde. Omdat de verkleuring van de randen links, onder en rechts samen 5,3 seconde duurt, sluit de verkleuring van de rand aan de bovenkant hier naadloos op aan.

Omdat right wordt veranderd (van right: 0; (helemaal rechts) naar right: 100%; (helemaal links) wordt de <span> van rechts naar links kleiner. De zwarte rand aan de bovenkant van div#demo verkleurt daardoor van rechts naar links.