Skip links en inhoudsopgave

Uitleg pagina met afbeelding, beschrij­ving en prijs van gereedschappen

Laatst aangepast: .

Afbeelding, naam en omschrijving van gereedschap in smalle en brede vensters

Korte omschrijving

Lijst met gereedschappen. Van elk gereedschap zijn een afbeelding, omschrijving, prijs en soms nog 'n toevoeging aanwezig.

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, kun je bovenaan de pagina de hele handel 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

De afbeeldingen zijn afkomstig van wpclipart.com.

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

Deze pagina is in feite één grote verzameling definitielijsten (<dl>). Elk stuk gereedschap heeft een eigen lijst. De 'data term' (<dt>) bestaat uit de naam en de prijs van het gereedschap. Bij elke <dt> horen twee <dd>'s (dd = 'data definition'): een afbeelding en een beschrijving. Samen vormen die een beschrijving van het betreffende stuk gereedschap.

Het lijkt op het eerste oog misschien vreemd om een <dl> te gebruiken, maar volgens de specificatie kan dit gewoon. Elke combinatie van een naam met een omschrijving kan in principe in een <dl> worden gezet.

Een definitielijst is feitelijk heel handig hiervoor, omdat je meerdere <dd>'s mag gebruiken bij dezelfde <dt>. Daardoor krijg je ook zonder css 'n redelijk samenhangende lay-out.

Met behulp van css worden de verschillende onderdelen op de juiste plaats gezet, wordt de juiste lettergrootte ingesteld, enzovoort. Allemaal niet zo heel bijzonder. Het belangrijkste is dat het ook zonder css goed toegankelijk is.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

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

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

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

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

Enkele tips die helpen bij toegankelijkheid:

Getest in

Laatst gecontroleerd op 9 januari 2021.

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 20.04 LTS, 'Focal Fossa') (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.5 (2048 x 1536 px, device-pixel-ratio: 2:
Safari, Chrome, Firefox en Microsoft Edge (alle portret en landschap).

iPad met iPadOS 14.3 (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 ('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.3 (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, 9 en 10

VoiceOver is een in iOS en OS X ingebouwde schermlezer. Er is getest in combinatie met Safari op iOS 12.5 en 14.3, iPadOS 14.3 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 20.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 enkele invloed.

Zonder css

Geen problemen.

Tekst en afbeelding worden gewoon weergegeven. Omdat gebruik is gemaakt van een <dl>, is er zelfs nog sprake van enige lay-out: de <dd>'s met afbeeldingen en omschrijving springen iets in ten opzichte van de <dt> met de naam en prijs.

Zonder afbeeldingen

Geen problemen.

In plaats van de afbeelding wordt de alt-tekst bij de afbeelding weergegeven.

Zonder css én zonder afbeeldingen

Geen problemen.

Zelfde als iets hierboven beschreven bij Zonder css, maar nu zijn de afbeeldingen vervangen door de bij de afbeelding horende alt-tekst.

Gebruikers Tab-toets

Geen problemen.

Het gebruik van een <dl> heeft geen enkele invloed op de Tab-toets.

Tekstbrowsers

Geen problemen.

Alle tekst wordt correct weergegeven.

Schermlezers

Geen problemen.

Alle geteste schermlezers geven de tekst correct weer. Afhankelijk van de schermlezers wordt soms ook nog gemeld dat het om een lijst gaat, en welk onderdeel van de lijst wordt voorgelezen.

Zoomen en andere lettergrootte

Geen problemen.

Zoomen levert geen enkel probleem op.

Als de letters worden vergroot tot meer dan ongeveer 180%, komen kopje en prijs in bredere browservensters niet naast, maar onder de omschrijving te staan. Een echt probleem is dit niet, want het is nog steeds duidelijk wat de naam en wat de beschrijving is.

Wijzigingen

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

:

Nieuw opgenomen.

10 april 2009:

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

1 januari 2021:

Volledig herschreven. De belangrijkste veranderingen:

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.

tekst-047-dl.html: de pagina met het voorbeeld.

tekst-047.pdf: deze uitleg (aangepast aan de inhoud van de download).

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

047-css-dl:

tekst-047-dl.css: stylesheet voor tekst-047-dl.html.

047-pics:

Negen afbeeldingen, afkomstig van www.wpclipart.com. De afbeeldingen zijn publiek domein.

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 in smallere vensters de omschrijving niet tussen afbeelding en naam gezet, maar eronder.

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.

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

css voor alle vensters

/* tekst-047-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: linear-gradient(to bottom, #cacaca, #fefffc);

Als achtergrond wordt een gradiënt gebruikt: een verlopende 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.

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

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

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

Omdat dit is opgegeven bij <body>, is de gradiënt even hoog als de hele pagina. De browser past het verloop van de gradiënt automatisch aan de hoogte van de pagina aan.

color: #444;

Voorgrondkleur #444: donkergrijs.

Als je geen zwart gebruikt voor tekst, is het belangrijk te letten op voldoende contrast met de achtergrondkleur. De hier gebruikte kleur heeft voldoende contrast met de hierboven als achtergrond gebruikte gradiënt. (Op de pagina met links vind je onder het kopje Toegankelijkheid → Contrast en kleurenblindheid websites met contrast-checkers.)

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. Hier is dat de hele pagina.

display: block;

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

width: 770px;

Breedte.

Omdat <main> een blok-element is, wordt het normaal genomen even breed als z'n ouder <body>. Dat is ook een blok-element en wordt daarom normaal genomen ook weer even breed als z'n ouder <html>. Omdat <html> het buitenste element is, wordt dat normaal genomen even breed als het venster van de browser. Dit zou betekenen dat <main>, en daarmee de inhoud ervan, in brede vensters onleesbaar lange regels met tekst zou krijgen. Deze breedte voorkomt dat.

max-width: 96%;

Hier gelijk boven is een breedte van 770 px opgegeven. In browservensters smaller dan 760 px zou hierdoor horizontaal gescrold moeten worden om alles te kunnen zien. Daarom wordt de breedte hier beperkt tot 96%.

Een breedte in procenten is ten opzichte van de ouder van het element. Dat is hier <body>. Zoals iets hierboven bij <width> beschreven, wordt <body> even breed als het venster van de browser. Hierdoor wordt <main> nooit breder dan 96% van de breedte van het venster.

margin: 4px auto 40px;

Omdat voor links geen waarde is opgegeven, krijgt links automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 4px auto 40px auto in de volgorde boven – rechts – onder – links.

Boven een kleine afstand tot de bovenkant van het browservenster. Onderaan een marge van 40 px, zodat duidelijk is dat het eind van de pagina is bereikt.

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

Omdat <body> even breed is als het venster van de browser, zoals iets hierboven bij width wordt beschreven, staat <main> hierdoor altijd horizontaal gecentreerd binnen het venster van de browser, ongeacht de breedte van het venster.

h1

Alle <h1>'s. Dat is er maar één. De belangrijkste titel van de pagina staat erin.

font-size: 1.2em;

Een <h1> is van zichzelf wel heel erg enthousiast groot. Dat wordt hier wat minder gemaakt.

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;

Horizontaal centreren.

margin: 0;

Standaard heeft een <h1> een marge aan boven- en onderkant. Die is hier niet welkom.

border: solid #616161 1px;

Randje.

border-bottom: none;

Aan de onderkant is geen randje nodig, want daar staat het randje van de bovenste <dl> al.

padding: 5px;

Kleine ruimte tussen buitenkant van en tekst in de <h1>.

dl

Alle <dl>'s. Elk stuk gereedschap staat in 'n eigen <dl>.

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 <dl> 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 <dt> met de naam en de prijs, en de twee <dd>'s met de afbeelding en de beschrijving.

flex-wrap: wrap; Afbeelding, naam en omschrijving staan op één regel en zijn daardoor te breed

De standaardwaarde bij flex-wrap is no‑wrap zet alle flex items, hier de <dt> en de twee <dd>'s, naast elkaar op één regel. Als het niet meer op één regel past, maak ze dan smaller. Dat is wat op de afbeelding in een browservenster met een breedte van 320 px gebeurt: de <dt> en de <dd>'s zijn zo smal gemaakt dat ze naast elkaar op één regel passen.

Althans: voor zover dat kan. Een flex item wordt nooit smaller dan z'n inhoud. Op de afbeelding is het resultaat te zien in een browservenster van 320 px breed, als flex-wrap: no-wrap; wordt gebruikt: alles op één regel zetten. Ook als de flex items zo smal mogelijk worden gemaakt passen ze nog niet op één regel. In dat geval moet horizontaal worden gescrold om alles te kunnen zien. Los van dat dit foeilelijk is, is dat horizontaal moeten scrollen ook gruwelijk onhandig en alleen aan te raden voor winkels die ook een Schermbonker verkopen.

De breedte van de <dd> met de afbeelding wordt bepaald door de breedte van de afbeelding.

De breedte van de <dd> met de tekst wordt bepaald door het langste woord (bij 'Trepaneerboor' is dat 'bureaucrautenkop', niet zichtbaar op de afbeelding).

De breedte van de <dt> met de naam en prijs wordt bepaald door de lengte van het langste woord, wat overal de naam is.

(Overigens verschilt die minimale breedte wat tussen verschillende browsers. Zo zet Firefox 'Trepaneerboor' op een kleine afstand van de afbeelding neer, maar het precies vergelijkbare 'Auwauwauwtang' niet. Bij de Vullingsloper staan dan weer meerdere woorden naast elkaar, dus die <dd> zou eigenlijk wat smaller moeten zijn. Ook tussen browsers onderlinge zijn hierbij wat verschillen in weergave. Maar het gaat niet om grote afwijkingen van het begrip 'smalste inhoud'.)

De waarde wrap voorkomt dit smaller worden: als de <dt> en de <dd>'s niet meer naast elkaar op één regel passen zonder ze te versmallen, worden ze op meerdere regels gezet.

margin: 0 0 10px;

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

Browsers geven standaard een marge aan boven- en onderkant van een <dl>. Hier wordt de marge aan de bovenkant weggehaald en blijft alleen aan de onderkant een marge van 10 px over.

border: black solid 1px;

Zwart randje.

border-top: #616161 solid 3px;

Aan de bovenkant een bredere donkergrijze rand.

dt

Alle <dt>'s. In elke <dt> staan een naam en een prijs van een stuk gereedschap.

Een <dt> is een blok-element. Normaal genomen wordt dit automatisch even breed als z'n ouder <dl> en komt het op een nieuwe regel te staan. Maar omdat <dl> bij dl met display: flex; in een flex container is veranderd, is de <dt> in een flex item veranderd. Daardoor werkt dat hier anders dan normaal.

display: flex;

De <dt> is een direct kind van de <dl>, die bij dl met display: flex; in een flex container is veranderd. Daardoor is de <dt> in een flex item veranderd, waardoor deze makkelijker op de juiste plaats kan worden neergezet.

Er is niets op tegen om vervolgens van de <dt> zelf ook weer een flex container te maken. Hierdoor wordt het ook weer makkelijker de directe kinderen van de <dt>, die nu ook weer flex items zijn, op een bepaalde plaats neer te zetten. De directe kinderen van de <dt> zijn de <span> met de naam en de <span> met de prijs.

flex: 1 0 auto;

flex is een zogenaamde 'shorthand': een eigenschap die eigenlijk uit meerdere eigenschappen is samengesteld. In dit geval zijn dat flex-grow, flex-shrink en flex-basis. De eerste waarde achter flex hoort bij flex-grow, de tweede bij flex-shrink en de derde bij flex-basis.

Er wordt aangeraden hier altijd de shorthand te gebruiken, omdat deze drie eigenschappen elkaar sterk beïnvloeden. Als je er eentje vergeet, valt die terug op z'n standaardwaarde en dat kan lastig te vinden problemen opleveren. Als je ze alle drie gebruikt, zie je altijd wat de waarde bij elk van de drie eigenschappen is.

De namen staan te ver naar links

flex-grow: de eerste waarde 1 hoort hierbij. In principe wordt een flex item niet breder dan nodig is om de inhoud ervan weer te geven. In het voorbeeld levert dat zelfs in de kleinste browservensters geen probleem op, want alleen de afbeelding en de naam met de prijs komen naast elkaar te staan. (Voor bredere vensters wordt dat later aangepast.)

Op de afbeelding hebben de <dt>'s met de naam en de prijs een rood randje gekregen. Ze zijn niet groter dan nodig is om de inhoud ervan weer te geven. Maar daardoor komen naam en prijs niet netjes rechts onder elkaar te staan.

De standaardwaarde bij flex-grow is 0: het flex item (hier de <dt>) mag niet groter worden dan nodig is om de inhoud ervan weer te geven, ook al is er nog ruimte over in flex container <dl>. Door de waarde bij flex-grow te veranderen in 1, mag het flex item (hier de <dt>) groeien en gebruikt eventuele overblijvende ruimte in de flex container <dl>. Daardoor wordt de volledige ruimte rechts van de afbeelding gebruikt en kunnen naam en prijs netjes rechts onder elkaar worden gezet.

flex-shrink: de tweede waarde 0 hoort hierbij. Dit is de tegenhanger van flex-grow. Deze eigenschap bepaalt of het flex-item eventueel mag krimpen. De standaardwaarde is hier 1: krimpen mag. Hier is dat niet nodig, dus dit wordt veranderd in 0: krimpen mag niet. (Overigens maakt dat hier weinig uit, want er is voldoende ruimte, dus krimpen is hoe dan ook niet nodig.)

flex-basis: dit is de 'ideale' breedte. Deze breedte krijgt het flex item, voordat er wordt gegroeid of gekrompen. Hier is dat niet van belang, omdat naam en prijs zelfs in de smalste browservensters passen. Daarom wordt als waarde auto opgegeven: bekijk het maar, doe waar je zin in hebt, zoek het maar uit, en als je morgen 'n kater hebt, moet je niet bij mij komen klagen.

flex-direction: column;

De standaardwaarde bij flex-wrap is no‑wrap: zet alle flex items, hier de twee <span>'s met naam en prijs, binnen <dt>, naast elkaar op één regel.

Hier moet de naam van het artikel boven de prijs komen te staan. Met behulp van deze regel worden de <span>'s niet naast, maar onder elkaar gezet. De waarde van flex-direction heeft invloed op de richting, waarin een aantal andere eigenschappen van flexbox werken, zoals het hieronder gebruikte justify-content.

justify-content: space-between;

Als er in flex container <dt> ruimte over is, zet die lege ruimte dan gelijkelijk verdeeld tussen de flex items. In dit geval zijn er maar twee flex items: de twee <span>'s met naam en prijs. Hierdoor komt de naam boven in de <dt> te staan en de prijs onderaan.

Omdat hier gelijk boven de flex items met behulp van flex-direction: column; niet naast, maar onder elkaar zijn gezet, komt de lege ruimte onder de eerste <span> en boven de tweede <span> te staan.

De prijs staat altijd onderin

<dt> is een flex item, omdat bij dl ouder <dl> met display: flex; is veranderd in een flex container. Op deze regel staat nog een ander flex item: de <dd> met de afbeelding. Flexbox maakt automatisch naast elkaar staande flex items even hoog. Hierdoor komt de prijs altijd op gelijke hoogte van de onderkant van de afbeelding te staan, ongeacht de hoogte van de afbeelding, zoals op de afbeelding is te zien.

order: 2;

Met behulp van de flexbox-eigenschap order kan de volgorde van weergave op het scherm worden aangepast.

Binnen flex container <dl> staan drie flex items: <dt> en twee <dd>'s. De volgorde in de html is:

<dl> <dt> (naam en prijs) </dt> <dd> (afbeelding) </dd> <dd> (tekst) </dt> </dl>
Weergave met en zonder gewijzigde volgorde

Op de afbeelding links is de weergave in dezelfde volgorde als de volgorde in de html: de <dt> met naam en prijs staat voor de <dd> met de afbeelding.

Op de afbeelding rechts heeft de <dt> order: 2; gekregen. Bij .pic krijgt dd.pic, de <dd> met de afbeelding, order: 1;. Hierdoor wordt de <dd> met afbeelding nu voor de <dt> met naam en prijs gezet, wat hier duidelijker is.

(De standaardwaarde van order is 0. Om te voorkomen dat dd.tekst, de <dd> met de tekst, helemaal vooraan wordt gezet, krijgt deze bij .tekst order: 3;.)

Schermlezers lezen nog steeds volgens de volgorde in de html voor. Daarom moet je erg voorzichtig zijn met het gebruik van order, want dit kan heel verwarrend zijn. In dit geval speelt dat niet, want de <dt> met de naam wordt nog steeds als eerste voorgelezen, gevolgd door de alt-tekst van de afbeelding, gevolgd door de tekst.

text-align: right;

Tekst rechts uitlijnen.

padding-right: 5px;

Kleine afstand tussen tekst en rechterkant van de <dd>.

.naam

De elementen met class="naam". In deze <span>'s zit de naam van het gereedschap.

Een <span> is een inline-element. Normaal genomen wordt dit niet breder dan nodig is om de inhoud ervan weer te geven. Maar omdat omdat ouder <dt> bij dt met display: flex; in een flex container is veranderd, is de <span> in een flex item veranderd. Daardoor werkt dat hier anders dan normaal.

Bij <dt> is met flex-direction: column; opgegeven dat de flex items (de twee <span>'s met naam en prijs) onder elkaar moeten staan. Hierdoor worden deze twee <span>'s automatisch even breed als hun ouder flex container <dt>. (Zou de standaardwaarde flex-direction: row; worden gebruikt, dan zouden ze automatisch even hoog worden als de <dt>.)

Bij dt is ook met justify-content: space-between; opgegeven dat eventuele overblijvende ruimte tussen de flex items, tussen de twee <span>'s, moet worden neergezet. Omdat de twee <span>'s boven elkaar staan, betekent 'tussen' hier onder de eerste <span> en boven de tweede <span>. Hierdoor komt de <span> met de naam bovenin <dt> te staan, en de <span> met de prijs onderin.

font-size: 1.2em;

Grotere letter.

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.

letter-spacing: 1px;

Letters iets uit elkaar neerzetten.

.ondertitel

Alle elementen met class="ondertitel". Bij sommige artikelen staat onder de naam in een <span> een korte extra ondertitel.

max-width: 50vw; Naam met te brede ondertitel

Op de afbeelding is de tekst '(Ook bekend als Bevrijdingstang)' de ondertitel bij de naam. Omdat achter 'Auwauwauwtang' in de html een <br> staat, komt deze op een nieuwe regel te staan.

span.ondertitel staat echter binnen span.naam, wat een flex item is. Hierdoor komt de ondertitel op één regel te staan, waardoor naam en ondertitel niet meer naast de afbeelding passen. Door de breedte te beperken, wordt dit voorkomen.

De eenheid vw is gebaseerd op de breedte van het venster van de browser. 1 vw is 1% van de breedte van het venster, en 50 vw is 50% van de breedte. De <span> met de ondertitel wordt hierdoor nooit breder dan 50% van de breedte van het venster, ongeacht de breedte van het venster. Nu passen naam en ondertitel wel naast de afbeelding.

float: right;

Omdat een <span> een inline-element is, kan de hierboven gebruikte eigenschap max-width niet worden gebruikt. Door de <span> naar rechts te floaten, verandert deze in een soort blok-element en kan deze eigenschap wel worden gebruikt.

(Je zou hetzelfde kunnen bereiken door een <br> tussen 'als' en 'Bevrijdingstang' te zetten. Maar dan moet je bij elke ondertitel kijken, waar die <br> neergezet moet worden. En als je 'n ondertitel zou veranderen, moet je mogelijk de <br> op een andere plaats zetten. Daarom is float veiliger: dit werkt altijd, ongeacht hoelang de woorden in de ondertitel zijn.)

font-size: 0.7em;

Kleinere letter.

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.

letter-spacing: 0;

span.ondertitel staat binnen span.naam, die bij .naam met letter-spacing: 1px; wat ruimte tussen de letters heeft gekregen. Die wordt hier voor de ondertitel weer weggehaald.

.pic

Alle elementen met class="pic". Elke afbeelding zit in een dd.pic.

Een <dd> is een blok-element. Normaal genomen wordt dit automatisch even breed als z'n ouder <dl> en komt het op een nieuwe regel te staan. Maar omdat <dl> bij dl met display: flex; in een flex container is veranderd, is de <dd> in een flex item veranderd. Daardoor werkt dat hier anders dan normaal.

order: 1;

In de html staat dd.pic na de <dt> met naam en prijs. Normaal genomen zou de <dd> met de afbeelding daardoor na de <dt> met naam en prijs op het scherm komen te staan.

Door met order deze volgorde van weergave te veranderen, komt op het scherm de <dd> met de afbeelding voor de <dt> met naam en prijs te staan. Een uitgebreider verhaal staat bij <dt> onder het kopje order: 2;.

width: 126px; Tekst staat niet netjes uitgelijnd

In bredere browservensters komt de tekst niet onder afbeelding, naam en prijs, maar ernaast te staan. Omdat de breedte van de afbeeldingen varieert, komt de tekst hierdoor niet netjes links uitgelijnd onder elkaar te staan. Op de afbeelding is dit te zien: de tekst bij de smalle afbeelding staat verder naar links dan de andere tekst. Door de <dd> een breedte te geven, wordt dit opgelost.

De breedste afbeelding is 120 px breed. Daar komt nog een witte border van 3 px aan alle kanten bij. Als de <dd>'s met de afbeelding 126 px breed wordt gemaakt, past ook de breedste afbeelding erin.

margin: 0;

Een <dd> krijgt standaard een marge links. Die is hier niet welkom.

.pic img

Alle <img>'s binnen een element met class="pic". De afbeeldingen.

border: white solid 3px;

⁠Witte rand.

De afbeeldingen hebben allemaal een witte achtergrond. Door de witte rand de afbeelding nu niet direct tegen de grijze achtergrond aan.

.tekst

Alle elementen met class="tekst". In dd.tekst zit de omschrijving van de artikelen.

Een <dd> is een blok-element. Normaal genomen wordt dit automatisch even breed als z'n ouder <dl> en komt het op een nieuwe regel te staan. Maar omdat <dl> bij dl met display: flex; in een flex container is veranderd, is de <dd> in een flex item veranderd. Daardoor werkt dat hier anders dan normaal.

order: 3;

In de html staat dd.tekst na de <dt> met naam en prijs en na de <dd> met de afbeelding. Normaal genomen zou de dd.tekst daardoor na de <dt> met naam en prijs en na de <dd> met de afbeelding op het scherm komen te staan.

Bij dt en .pic is de volgorde van weergeven echter met order: 2; en order: 1; veranderd: eerst de <dd> met de afbeelding, dan de <dt> met naam en prijs.

De standaardwaarde van order is 0. Als dd.tekst de standaardwaarde 0 zou houden, zou de <dd> met de tekst als eerste worden weergegeven. Deze regel zorgt ervoor dat de tekst als laatste wordt weergegeven.

Een uitgebreider verhaal staat bij <dt> onder het kopje order: 2;.

font-size: 0.9em;

Iets kleinere letter.

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

Een <dd> krijgt standaard een marge links. Die is hier niet welkom.

border-top: black solid 1px;

Zwart randje aan de bovenkant.

padding: 3px;

Kleine afstand tussen tekst in en buitenkant van de <dd>.

.extra

Alle elementen met class="extra". Bij sommige teksten staat nog een toevoeging in een kleinere letter. Die zit in p.extra.

font-size: 0.8em;

Kleinere letter.

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: 3px 0 0;

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

Een <p> heeft van zichzelf een marge aan boven- en onderkant. De marge aan de bovenkant wordt verkleind tot 3 px, de marge aan de onderkant wordt weggehaald.

.extra strong

Alle <strong>'s binnen een element met class="extra". Deze tekst wordt benadrukt.

color: #960;

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

Als je geen zwart gebruikt voor tekst, is het belangrijk te letten op voldoende contrast met de achtergrondkleur. De hier gebruikte kleur heeft voldoende contrast met de hierboven als achtergrond gebruikte gradiënt. (Op de pagina met links vind je onder het kopje Toegankelijkheid → Contrast en kleurenblindheid websites met contrast-checkers.)

font-weight: normal;

Tekst binnen <strong> wordt automatisch vet weergegeven, hier wordt dat veranderd in normale tekst.

letter-spacing: 2px;

Kleine afstand tussen de letters.

css voor vensters minimaal 600 px breed

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

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 600 px breed zijn. In deze bredere vensters wordt de tekst niet onder, maar tussen afbeelding en naam gezet.

@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: 600px): het venster moet minimaal 600 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: 600px) { 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 soms toch niet voor dat mobieltje. Terwijl dat toch echt meer dan 600 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 grens 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.M

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

dt

Deze selector werkt alleen in browservensters minimaal 600 px breed. Voor andere vensters is de uitleg hieronder niet van belang.

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

dt {display: flex; flex: 1 0 auto; flex-direction: column; justify-content: space-between; order: 2; text-align: right; padding-right: 5px;}

Alle <dt>'s. In elke <dt> staan een naam en een prijs van een stuk gereedschap.

Een <dt> is een blok-element. Normaal genomen wordt dit automatisch even breed als z'n ouder <dl> en komt het op een nieuwe regel te staan. Maar omdat <dl> bij dl met display: flex; in een flex container is veranderd, is de <dt> in een flex item veranderd. Daardoor werkt dat hier anders dan normaal.

flex: 0 0 12em;

flex is een zogenaamde shorthand: een eigenschap die eigenlijk uit meerdere eigenschappen bestaat. Hier zijn dat flex-grow, flex-shrink en flex-basis.

flex-grow: de eerste waarde 0 hoort hierbij. De waarde 0 betekent: niet groeien.

flex-shrink: de tweede waarde 0 hoort hierbij. De waarde 0 betekent: niet krimpen.

flex-basis: de derde waarde 12em hoort hierbij. Dit is de breedte die <dt> moet krijgen. Met deze breedte past de langste naam er nog in, terwijl de <dt> niet meer ruimte inneemt, dan nodig is.

Als eenheid wordt de relatieve eenheid em gebruikt. Deze is gekoppeld aan de lettergrootte van het element: bij een grotere of kleinere lettergrootte, wordt de em ook groter of kleiner. Hierdoor verandert de breedte van de <dt> mee met de lettergrootte. Bij een absolute eenheid als px zou tekst al snel buiten de <dt> komen te staan, omdat de breedte van <dt> niet mee zou veranderen.

Omdat een breedte van 12 em is opgegeven en groeien en krimpen wordt verboden, heeft de <dt> altijd dezelfde breedte: niet meer dan nodig is om naam en prijs weer te geven. Hierdoor blijft er zoveel mogelijk ruimte over voor de tekst met de omschrijving.

Een uitgebreider verhaal over flex staat bij flex: 1 0 auto;.

order: 3;

In de html staat de <dt> binnen de <dl> op de eerste plaats. Eerder is de <dt> bij dt met order: 2; op de tweede plaats op het scherm gezet: na dd.pic met de afbeelding, maar nog voor dd.tekst met de omschrijving.

Hier wordt de <dt> helemaal achteraan op het scherm gezet: na de <dd> met de afbeelding, en na de <dd> met de tekst.

Een uitgebreider verhaal over order staat bij order: 2;.

.tekst

Deze selector werkt alleen in browservensters minimaal 600 px breed. Voor andere vensters is de uitleg hieronder niet van belang.

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

.tekst {flex: 0 1 auto; order: 3; font-size: 0.9em; margin: 0; border-top: black solid 1px; padding: 3px;}

Alle elementen met class="tekst". In dd.tekst zit de omschrijving van de artikelen.

Een <dd> is een blok-element. Normaal genomen wordt dit automatisch even breed als z'n ouder <dl> en komt het op een nieuwe regel te staan. Maar omdat <dl> bij dl met display: flex; in een flex container is veranderd, is de <dd> in een flex item veranderd. Daardoor werkt dat hier anders dan normaal.

flex: 1 0 200px;

flex is een zogenaamde shorthand: een eigenschap die eigenlijk uit meerdere eigenschappen bestaat. Hier zijn dat flex-grow, flex-shrink en flex-basis.

flex-grow: de eerste waarde 1 hoort hierbij. De waarde 1 betekent: dd.tekst mag groeien. Iets hierboven bij dt is met flex: 0 0 12em; opgegeven dat de <dt> met naam en prijs niet mag groeien. Bij dd.img, de <dd> met de afbeelding, is niets opgegeven. Daarom houdt dd.img de standaardwaarde 0: niet groeien. dd.img wordt niet breder dan nodig is om de inhoud ervan weer te geven, de erin zittende afbeelding.

Kortom: als er ruimte over is, mag van de drie flex items alleen dd.tekst groeien. Eventueel overblijvende ruimte wordt volledig toegewezen aan de <dd> met de tekst.

flex-shrink: de tweede waarde 0 hoort hierbij. De waarde 0 betekent: niet krimpen.

flex-basis: de derde waarde 200px hoort hierbij. Dit is de breedte die dd.tekst krijgt, voordat eventueel wordt gekrompen of gegroeid. Omdat dd.tekst alleen mag groeien, is dit in feite een minimumbreedte.

Een uitgebreider verhaal over flex staat bij flex: 1 0 auto;.

Als eenheid bij de derde waarde, die voor flex-basis, wordt de absolute eenheid px genomen. Deze eenheid verandert niet mee met een eventueel door de gebruiker veranderde lettergrootte.

Bij de achter dd.tekst op het scherm staande <dt> met de naam is voor de breedte de relatieve eenheid em gebruikt: bij een grotere lettergrootte, wordt de breedte juist wel groter. Dat is ook nodig, want anders zou bij een grotere lettergrootte de naam er mogelijk niet meer in passen.

Als je nou ook bij dd.tekst de breedte zou laten groeien, wordt het geheel mogelijk te breed om in smallere browservensters nog naast elkaar te kunnen staan.

Nu kan de de <dt> met de naam groeien bij een grotere lettergrootte, is dd.tekst altijd minimaal 200 px breed, en als er ruimte over is, wordt die door dd.tekst gebruikt.

Ook in smallere browservensters kan nu de lettergrootte worden vergroot, zonder dat dit tot grote rampen leidt.

order: 2;

In de html staat dd.tekst na de <dt> met naam en prijs en na de <dd> met de afbeelding. Normaal genomen zou dd.tekst daardoor na de <dt> met naam en prijs en na de <dd> met de afbeelding op het scherm komen te staan.

Bij dt en .pic is de volgorde van weergeven echter met order: 3; en order: 1; veranderd: eerst dd.pic met de afbeelding, de <dt> met naam en prijs als derde.

Hier wordt dd.tekst op de tweede plaats op het scherm gezet: na de <dd> met de afbeelding, maar voor de <dt> met naam en prijs.

Een uitgebreider verhaal over order staat bij order: 2;.

font-size: 1em;

Lettergrootte vergroten naar de standaardlettergrootte.

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.

border: none;

Het eerder opgegeven randje aan de bovenkant weghalen.

padding: 2px 14px;

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

Boven en onder een kleine afstand tussen de buitenkant van de <dd> en de tekst erin. Rechts en links een wat grotere padding voor wat afstand tussen de tekst, de ervoor staande afbeelding en de erachter staande naam.

css voor vensters minimaal 760 px breed

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

De opbouw van deze regel staat beschreven bij @media screen and (min-width: 600px). Er is één verschil: de breedte van het browservenster moet minimaal 760 px zijn.

In browservensters van deze grootte worden een aantal dingen vergroot, zoals de lettergrootte.

body

Deze selector werkt alleen in browservensters minimaal 760 px breed. Voor andere vensters is de uitleg hieronder niet van belang.

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: #fefffc linear-gradient(to bottom, #cacaca, #fefffc); color: #444; font-family: Arial, Helvetica, sans-serif; margin: 0;}

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.

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.

main

Deze selector werkt alleen in browservensters minimaal 760 px breed. Voor andere vensters is de uitleg hieronder niet van belang.

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 {display: block; width: 770px; max-width: 96%; margin: 4px auto 40px;}

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

margin-top: 20px;

Kleine afstand tussen inhoud van de pagina en bovenkant van het browservenster.

h1

Deze selector werkt alleen in browservensters minimaal 760 px breed. Voor andere vensters is de uitleg hieronder niet van belang.

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; text-align: center; margin: 0; border: solid #616161 1px; border-bottom: none; padding: 5px;}

Alle <h1>'s. Dat is er maar één. De belangrijkste titel van de pagina staat erin.

font-size: 2em;

Een iets grotere letter geven.

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.

font-weight: normal;

Een <h> is van zichzelf vet. Dat is in deze bredere vensters niet mooi, daarom wordt dat hier veranderd naar normaal.

dl

Deze selector werkt alleen in browservensters minimaal 760 px breed. Voor andere vensters is de uitleg hieronder niet van belang.

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

dl {display: flex; flex-wrap: wrap; margin: 0 0 10px; border: black solid 1px; border-top: #616161 solid 3px;}

Alle <dl>'s. Elk stuk gereedschap staat in 'n eigen <dl>.

border-width: 3px 0 0;

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

De eerder opgegeven border wordt weggehaald, behalve aan de bovenkant van de <dl>.

.naam

Deze selector werkt alleen in browservensters minimaal 760 px breed. Voor andere vensters is de uitleg hieronder niet van belang.

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

.naam {font-size: 1.2em; letter-spacing: 1px; text-align: right;}

De elementen met class="naam". In deze <span>'s zit de naam van het gereedschap.

font-size: 1.5em;

Grotere letter.

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.

.ondertitel

Deze selector werkt alleen in browservensters minimaal 760 px breed. Voor andere vensters is de uitleg hieronder niet van belang.

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

.ondertitel {max-width: 50vw; float: right; font-size: 0.7em; letter-spacing: 0;}

Alle elementen met class="ondertitel". Bij sommige artikelen staat onder de naam in een <span> een korte extra ondertitel.

font-size: 0.55em;

Kleinere letter.

Iets hierboven is de lettergrootte in span.naam met font-size: 1.5em; tamelijk groot gemaakt. Omdat span.ondertitel binnen span.naam staat, erft span.ondertitel de lettergrootte van span.naam. Daarom moet de lettergrootte van span.ondertitel tamelijk veel worden verkleind. Uiteindelijk wordt de lettergrootte dan 0,55 x 1,5 = 0,825 em, iets kleiner dan standaard.

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.

.extra

Deze selector werkt alleen in browservensters minimaal 760 px breed. Voor andere vensters is de uitleg hieronder niet van belang.

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

.extra {font-size: 0.8em; margin: 3px 0 0;}

Alle elementen met class="extra". Bij sommige teksten staat nog een toevoeging in een kleinere letter. Die zit in p.extra.

font-size: 0.7em;

Kleinere letter.

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.