Uitleg makkelijk aan te passen verticale staafdiagrammen

Semantische elementen

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

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

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

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

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

Html5 heeft een aantal nieuwe elementen, die speciaal zijn bedoeld om de opbouw van een pagina aan te geven. Deze elementen gedragen zich als een gewone <div>, maar dan een <div> met een semantische betekenis. Hierdoor kunnen schermlezers, zoekmachines, en dergelijke beter zien, hoe de pagina is samengesteld. De meeste schermlezers kunnen dit soort elementen ook gebruiken om snel door de pagina te navigeren. In dit voorbeeld wordt hiervan alleen <main> gebruikt.

WAI-ARIA-codes

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

Er worden in dit voorbeeld drie WAI-ARIA-codes gebruikt: aria-hidden, role="img" en aria-label.

Zonder css

Probleem: zonder css worden alleen de percentages en getallen getoond.

Omdat de staafdiagrammen, op de percentages en getallen na, volledig met css worden gemaakt, zijn ze zonder css onzichtbaar. Alleen de percentages en getallen worden dan getoond op een volstrekt onduidelijke manier. Ook de voor schermlezers bedoelde <h1> en tekst aan het begin worden getoond.

Dit is eventueel op te lossen door een tekst met de omschrijving van het staafdiagram toe te voegen en die tekst met display: none; te verbergen. Als css uitstaat of om wat voor reden dan ook niet werkt, zijn de diagrammen onzichtbaar. Maar deze tekst zal dan juist zichtbaar worden, want die wordt met behulp van css verborgen.

In het voorbeeld is dit niet gedaan. Normaal genomen zal trouwens in de tekst bij een staafdiagram iets van een omschrijving staan, dus vaak zal een verborgen tekst niet nodig zijn.

Tekstbrowsers

Probleem in Lynx: de staafdiagrammen worden niet getoond.

Voor Lynx geldt precies hetzelfde als hier gelijk boven bij Zonder css staat.

Probleem in WebbIE: WebbIE toont alleen de voor schermlezers bedoelde <h1> en tekst aan het begin.

Ook WebbIE toont de staafdiagrammen niet. Maar omdat WebbIE wel de css uitvoert, worden ook de percentages en getallen verborgen. Het heeft ook geen nut om een beschrijving van de staafdiagrammen toe te voegen en die te verbergen met iets als display: none;, want WebbIE verbergt ze dan netjes.

WebbIE heeft de mogelijkheid de pagina als gewone pagina weer te geven. Dat is hier het enige wat werkt. Maar dat is natuurlijk geen echte oplossing, want dan is het geen tekstbrowser meer.

Schermlezers

Geen problemen.

Schermlezers lezen een omschrijving van de staafdiagrammen voor. Meer hierover is te vinden bij WAI-ARIA-codes.

Omdat veel gebruikers van schermlezers door een pagina navigeren met behulp van de <h>'s in de pagina, is voor schermlezers een buiten het scherm geparkeerde <h1> aangebracht. Verder is ook een onzichtbare beschrijving van de pagina aangebracht. Meer hierover is te vinden bij h1, h1 + p.

Zoomen en andere lettergrootte

Geen problemen.

Zoomen gaat op de gebruikelijke manier. Om de tekst probleemloos te kunnen vergroten, zijn wel wat aanpassingen nodig.

Op de linkerafbeelding heeft de tekst de standaardlettergrootte, op de rechterafbeelding is de tekst twee keer vergroot tot 200%.

In het Nederlands wordt een getal vast aan het erop volgende procentteken geschreven. Wat de browser betreft zijn getal en procentteken daarom één woord. Bij een grotere lettergrootte zou het procentteken daardoor rechts buiten het staafdiagram komen te staan.

Om dat te voorkomen wordt tussen getal en procentteken een onzichtbare spatie neergezet. Bij '30%' ziet dat er zo uit in de html: <span>30&#8203;%</span>. Van deze spatie merk je niets, maar als getal en procentteken te breed worden voor het staafdiagram, wordt het procentteken nu – net als bij een gewoon los woord – op een nieuwe regel gezet. Dat is wat op de rechterafbeelding gebeurt.

In het eerste diagram past het vergrote '10%' niet binnen de zwarte achtergrond van het staafdiagram. Daarom wordt '10' naar boven verplaatst, waarbij de tekstkleur het omgekeerde van de achtergrondkleur wordt (wit op wit zou wat lastig lezen).

De '63%' in het zesde diagram past ook zonder vergroting niet binnen het kleine blokje met een hoogte van 3%. Daarom wordt deze tekst niet in, maar boven het kleine blokje gezet. Ook deze waarde wordt naar boven toe vergroot.

Als de '10' tot en met '60' in het zesde staafdiagram een procentteken zouden krijgen, passen die bij een vergroting niet meer binnen hun vakje. Daarom krijgt in het zesde diagram alleen het bovenste '63%' een procentteken.

In alle andere diagrammen is er voldoende ruimte om de tekst probleemloos tot 200% te vergroten.

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

Het attribuut 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 (ä 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 de regel 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 deze 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 deze 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 staafdiagrammen 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.

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. Als een iPad in portretstand bijvoorbeeld 768 px breed is, wordt de pagina ook 768 px breed.

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.

<link rel="stylesheet" href="081-css-dl/figuren-081-dl.css">

Dit is een koppeling naar een extern stijlbestand, waarin de css staat. In html5 is de toevoeging type="text/css" niet meer nodig, omdat dit standaard al zo staat ingesteld. Je moet uiteraard de naam van en het pad naar het stijlbestand aanpassen aan de naam en plaats, waar je eigen stijlbestand staat.

Voordeel van een extern stijlbestand is onder andere dat deze geldig is voor alle pagina's, waaraan deze is gelinkt. 'n Verandering in de lay-out hoef je dan maar in één enkel stijlbestand aan te brengen, in plaats van in elke pagina apart. Op een grotere site kan dit ontzettend veel werk schelen. Bovendien hoeft de browser zo'n extern stijlbestand maar één keer te downloaden, ongeacht hoeveel pagina's er gebruik van maken. Zou je de css in elke pagina opnieuw aanbrengen, dan worden de te downloaden bestanden veel groter.

In dit voorbeeld heeft een extern stijlbestand eigenlijk geen nut, omdat er maar één pagina is die dit stijlbestand gebruikt. In dit geval kun je de css beter in de <head> van de html-pagina zelf zetten. Voor de omvang maakt het hier niets uit, want de css wordt hoe dan ook altijd precies één keer gedownload, en nooit vaker. Voor het onderhoud maakt het ook geen verschil, want ook hier hoef je de css maar op één plaats te wijzigen. Maar het scheelt wel een extra aanroep naar de server, omdat geen apart stijlbestand hoeft te worden gedownload.

Dat opnemen in de <head> gaat heel simpel: je kopieert gewoon het hele stijlbestand en zet dat bovenin de <head>, tussen <style> en </style>:

Maar zodra een stijlbestand op meerdere pagina's wordt gebruikt, wat meestal het geval zal zijn, is een extern stijlbestand beter.

(De reden dat er toch een extern stijlbestand is, terwijl hierboven omstandig wordt beweerd dat dat in dit voorbeeld eigenlijk geen nut heeft: overzichtelijkheid. Nu kun je html en css los van elkaar bekijken.)

<div id="een" role="img" aria-label="Eerste diagram: voor 10% gevuld met zwarte achtergrond">

De <div> met het eerste diagram. De andere zeven <div>'s met diagrammen zijn op dezelfde manier opgebouwd.

Een diagram is eigenlijk een soort afbeelding. Maar omdat deze 'afbeelding' in een <div> zit, is dat voor schermlezers onduidelijk. Daarom wordt voor schermlezers role="img" toegevoegd, waarmee voor schermlezers duidelijk is dat het om een afbeelding gaat. Meer hierover is te vinden bij WAI-ARIA-codes.

Alleen hebben schermlezers niets aan een afbeelding, als daar geen beschrijving van wordt gegeven. Daarom wordt voor schermlezers met behulp van aria-label een omschrijving van het diagram toegevoegd. Meer hierover is te vinden bij WAI-ARIA-codes.

Door de combinatie role="img" en aria-label is het diagram nu min of meer een gewone afbeelding met alt-tekst.

<span aria-hidden="true">10&#8203;%</span>

Deze <span> hoort bij het eerste diagram, maar bij de andere diagrammen werkt het op dezelfde manier.

Gelijk hierboven is het diagram voor schermlezers omschreven. Als dat niet wordt voorkomen, worden de percentages en getallen in de diagrammen voorgelezen, want het is gewone tekst. Omdat het diagram voor schermlezers al is omschreven, is het alleen maar verwarrend als de schermlezer vervolgens nog percentages of getallen gaat voorlezen. Daarom worden deze verborgen met behulp van aria-hidden="true".

In het Nederlands staat geen spatie tussen het procentteken en het voorafgaande getal. Daarom is dit, wat de browser betreft, één woord. Bij een grotere lettergrootte wordt dit 'woord' daardoor breder dan het diagram en komt rechts daarbuiten te staan.

Om dit te voorkomen wordt een onzichtbare spatie (officieel 'zero width space') tussen het getal en het procentteken gezet: ​. Met een standaardlettergrootte zie je hier niets van, maar wat de browser betreft zijn getal en procentteken nu twee aparte woorden: als getal en procentteken bij een grotere letter te breed worden, komt het procentteken op een nieuwe regel te staan, onder het getal. Net zoals dat bij twee losse woorden zou gebeuren.

​ is een zogenaamde utf-8-code. utf-8 is een standaard, waarin (bijna) alle tekens van (bijna) alle talen zijn gestandaardiseerd. Plus nog heel veel wiskundige symbolen, runentekens, emoticons, enzovoort, enzovoort. Elk teken heeft een aparte code binnen dit systeem.

Het teken & geeft aan dat dit het begin is van een speciale code. De ; aan het eind geeft het einde van de speciale code aan.

De meest gebruikte tekens hebben een naam, omdat dat voor mensen makkelijker is te onthouden. Zo kun je het copyright teken schrijven als ©.

Omdat in utf-8 een ongelooflijk aantal tekens is gecodeerd, heeft niet elk teken een naam. Maar elk teken kan ook met een volgnummer worden opgezocht.

Het teken # geeft aan dat hierachter een getal volgt. (In dit geval is het een gewoon tientallig getal. Je kunt ook een hexadecimaal getal gebruiken, dan volgt hierna nog een x.)

8203 is het volgnummer (officieel het 'codepoint') van deze onzichtbare spatie.

Wat de browser betreft is deze spatie nu een doodnormaal letterteken, net zoals een gewone spatie of de letter 'a'.

main

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

Breedte

Hier gelijk boven is een breedte van 400 px opgegeven. Daardoor zou je in browservensters minder dan 400 px breed horizontaal moeten scrollen om alles te zien. Daarom wordt hier een maximumbreedte opgegeven.

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 94 vw is 94% van de breedte. <main> wordt hierdoor nooit breder dan 94% van de breedte van het venster, ongeacht de breedte van het venster. Daardoor wordt ook alles wat in <main> zit niet breder dan het venster.

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

Boven en onder geen marge. Links en rechts auto, wat hier hetzelfde betekent als evenveel. Hierdoor komt <main> altijd horizontaal gecentreerd binnen ouder <body> te staan. <body> is een blok-element en wordt daarom normaal genomen even breed wordt als ouder <html>. Omdat <html> het buitenste element is, wordt dit normaal genomen even breed als het venster van de browser.

Hierdoor staat uiteindelijk <main> altijd horizontaal gecentreerd binnen het venster van de browser, ongeacht de breedte van het venster. En daarmee ook de in <main> zittende diagrammen

Deze manier van horizontaal centreren van een blok-element werkt alleen, als het blok-element een breedte heeft, want anders zou het normaal genomen even breed worden als de ouder ervan. Dat is geregeld, want hierboven heeft <main> zowel een breedte van 400 px als een maximumbreedte van 94 vw gekregen.

h1, h1 + p

Twee selectors. De selector voor de komma is simpel: alle <h1>'s. Dat is er maar één, het is de belangrijkste kop.

De tweede selector na de komma is iets ingewikkelder:

De twee selectors in gewone taal: de <h1> en de <p> die in de html direct op die <h1> volgt.

Deze <h1> en <p> zijn bedoeld voor schermlezers. De kop van de tekst zit in een <h1>, omdat veel gebruikers van schermlezers door een pagina navigeren met behulp van de <h>'s in de pagina. Als er helemaal geen <h> aanwezig zou zijn, kunnen die gebruikers het begin van de pagina missen. In de <p> zit een korte beschrijving van de pagina.

Om de elementen op een bepaalde 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. Als zo'n voorouder er niet is, zoals hier het geval is, wordt gepositioneerd ten opzichte van het venster van de browser.

Ver boven en links buiten het browservenster neerzetten. Voor de zekerheid wordt niet alleen links buiten het venster gepositioneerd, maar ook erboven. In sommige oudere mobiele browsers kan een element dat alleen links buiten het venster staat problemen veroorzaken, zoals het blokkeren van een link.

Door de <h1> en de daarop volgende <p> buiten het browservenster te parkeren, zijn ze onzichtbaar. Omdat ze absoluut gepositioneerd zijn, hebben ze ook geen enkele invloed op de rest van de lay-out. Maar schermlezers lezen de <h1> en de <p> gewoon voor, ook al staan ze buiten het venster.

#wrapper

Het element met id="wrapper". Een <div> waar de acht <div>'s met de staafdiagrammen in zitten. Deze <div> wordt eigenlijk alleen gebruikt om de staafdiagrammen op de juiste positie neer te kunnen zetten.

De waarde flex is onderdeel van een hele reeks eigenschappen en waarden, die bij elkaar 'flexbox' worden genoemd. Met display: flex; wordt <main> 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 acht <div>'s met de staafdiagrammen.

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

De waarde van flex-direction is van belang voor een aantal andere eigenschappen van flexbox, zoals het hieronder gebruikte justify-content.

Met behulp van deze eigenschap worden de flex items, de acht <div>'s met de diagrammen, verdeeld over de flex container. Met de waarde space-between wordt de overblijvende vrije ruimte in div#wrapper gelijk verdeeld tussen de acht <div>'s: tussen elke twee diagrammen zit evenveel vrije ruimte.

#wrapper div

Alle <div>'s in het element met id="wrapper". De acht <div>'s met de staafdiagrammen.

Een groot deel van de css voor deze <div>'s is voor alle acht hetzelfde. Die kan hier in een keer worden opgegeven. Waar dat nodig is, kan dat dan later eventueel worden aangepast voor een specifieke <div>

Witte achtergrond.

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

Breedte.

Een breedte in procenten is normaal genomen ten opzichte van de ouder van het element. Dat is hier div#wrapper, een blok-element. Een blok-element wordt normaal genomen even breed als z'n ouder. De ouder van div#wrapper is <main>, die bij main een breedte van 400 px heeft gekregen.

Elke <div> in div#wrapper krijgt dus een breedte van 10% van 400 px = 40 px. Daardoor blijft er een vrije ruimte van 80 px over, die met behulp van het bij #wrapper opgegeven justify-content: space-between; gelijkelijk tussen de <div>'s wordt verdeeld.

De <div>'s mogen nooit smaller worden dan 34 px.

Zoals gelijk hierboven beschreven is de breedte van de <div>'s 10% van <main>. Bij main heeft <main> ook een maximumbreedte van 94 vw gekregen, 94% van de breedte van het browservenster. In smallere vensters worden de <div>'s hierdoor wel heel erg smal. Deze minimumbreedte voorkomt dat.

Een blok-element zoals een <div> wordt standaard niet hoger dan nodig is om de inhoud ervan weer te geven. Omdat ouder div#wrapper bij #wrapper met display: flex; in een flex container is veranderd, zijn deze <div>'s veranderd in flex items. Daardoor werkt die hoogte hier iets anders: flex items worden standaard allemaal even hoog, waarbij de hoogte wordt bepaald door de het flex item met de meeste inhoud.

Dat hoogste flex item is hier de zesde <div> met het zesde diagram, want die <div> heeft de meeste inhoud. Op de afbeelding is te zien dat de hoogte van de achtergronden van de diagrammen ten opzichte van het volledige diagram nog steeds klopt, want die is in procenten. Maar sommige percentages en getallen passen nu niet meer binnen de bijbehorende achtergronden, en dat wordt nog veel erger als de lettergrootte wordt verhoogd.

Daarom krijgen de <div>'s een hoogte van 400 px. Met die hoogte blijven de percentages en getallen ook bij een grotere letter op de juiste achtergrond staan.

Lettergrootte.

In heel smalle browservensters, zoals op heel kleine smartphones, is in sommige browsers de lettergrootte net iets te groot. Niet in alle browsers, er zitten kleine variaties in de lettergrootte. Hierdoor komt het procentteken ook bij de standaardlettergrootte op de volgende regel te staan, omdat de <div>'s met de iets hierboven opgegeven breedte van 10% net te smal zijn om getal en procentteken op één regel te zetten.

Met de min()-functie kun je twee maten opgeven, waarvan de browser dan de kleinste maat gebruikt. De twee maten worden door een komma van elkaar gescheiden.

Voor de komma staat 4vw. Dit is de maat die is bedoeld voor heel smalle browservensters. De eenheid vw is gebaseerd op de breedte van het venster. 1 vw is 1% van de breedte van het venster, en 4 vw is 4% van de breedte. In heel smalle vensters wordt de letter hierdoor iets verkleind, waardoor '4%' net op één regel past.

Zodra het browservenster (veel) breder wordt, levert een lettergrootte van 4 vw een (veel) te grote letter op. Als het venster bijvoorbeeld 1000 px breed is, wordt de lettergrootte 4% van 1000 = 40 px. In nog bredere vensters zou de letter nog (veel) groter worden. Het probleem is dan opgelost in heel smalle vensters, maar nu past geen enkel percentage of getal in bredere vensters nog in de <div>.

De tweede waarde is 0,9 em. De standaardlettergrootte is 1 em: 16 px. Zodra een browservenster minimaal ongeveer 347 px breed is, wordt een lettergrootte van 0,9 em minder dan een lettergrootte van 4 vw. In vensters breder dan ongeveer 347 px zal de browser dan een lettergrootte van 0,9 em gebruiken, waardoor percentages en getallen ook in bredere vensters binnen de <div>'s passen.

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

Zwart randje.

Dit randje geeft de buitenkant van het staafdiagram aan.

Om nakomelingen van de <div>'s te kunnen positioneren ten opzichte van de <div>'s, moeten de <div>'s zelf een andere positie dan statisch hebben. Een relatieve positie heeft verder geen invloed op de <div>'s zelf, omdat niets voor top en dergelijke wordt opgegeven.

div > span

De hele selector in gewone taal: doe iets met de <span>'s die een direct kind van de <div> zijn.

Een groot deel van de css is voor deze <span>'s hetzelfde. Die kan hier in een keer worden opgegeven. Waar nodig wordt die dan later aangepast.

Zwarte achtergrond.

Witte voorgrondkleur. Dit is onder andere de kleur van de tekst.

Breedte.

Een breedte in procenten is normaal genomen ten opzichte van de ouder van het element. Dat is hier de <div>, waar de <span> in zit. Als geen breedte wordt opgegeven, worden de <span>'s niet breder dan nodig is om de erin zittende getallen en percentages weer te geven.

Vette letter.

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

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

Tekst horizontaal centreren, zodat percentages en getallen netjes in het midden van het diagram komen te staan.

Om de <span>'s op een bepaalde 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. Dat is hier de <div>, waar de <span> in zit, want die heeft bij #wrapper div een relatieve positie gekregen.

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

Normaal genomen wordt een <div> vanaf de bovenkant gevuld. Dat is wat op de afbeelding gebeurt. (Behalve bij de zesde <div>, want die krijgt later aparte css.)

Alle verhoudingen en zo kloppen nog steeds, maar een staafdiagram wordt meestal vanaf de onderkant gevuld.

Daarom worden de <span>'s aan de onderkant van de <div> neergezet.

(Als je het diagram vanaf de bovenkant wilt vullen, moeten er ook nog wat aanpassingen worden gemaakt voor het geval de lettergrootte wordt verhoogd.)

span span

Alle <span>'s die binnen een andere <span> staan.

Veel percentages en getallen staan in een geneste <span>. Veel van de css voor de geneste <span>'s is hetzelfde, die kan hier in een keer worden opgegeven. Waar nodig wordt dat dan later aangepast.

Zwarte achtergrond.

Witte voorgrondkleur. Dit is onder andere de kleur van de tekst.

Een <span> is een inline-element. Daardoor zijn eigenschappen als breedte niet te gebruiken. Door ze te veranderen in een blok-element, zijn deze eigenschappen wel te gebruiken.

#een span

Alle <span>'s binnen het element met id="een". De <span>'s in de <div> met het eerste diagram.

Rondom deze <span> moet een marge van 2 px komen, waardoorheen je de witte achtergrond van de <div> ziet. Een marge wordt bij de breedte van het element opgeteld. Omdat de <span>'s even breed zijn als de <div>, moet er dus links en rechts 2 px worden afgetrokken van de breedte, in totaal 4 px. Omdat de <div>'s in smallere browservensters smaller zijn dan in bredere vensters, kun je niet iets simpels doen als 40 px – 4 px. (In de hoogte is er ruimte genoeg, daar speelt dit probleem niet.)

Met behulp van calc() kunnen berekeningen worden gemaakt. In dit geval wordt van de breedte van de <span> 4 px afgetrokken, waardoor er links en rechts ruimte komt voor een marge van 2 px.

De berekening wordt hier gemaakt met twee verschillende eenheden: % en px. Dat kan niet, eerst moeten alle eenheden worden omgerekend naar dezelfde eenheid. Daarom rekent de browser de eenheden om naar de eenheid px. Bij het schrijven van de code kan dat omrekenen vaak niet, omdat je niet weet hoeveel px 100% is.

De berekening wordt dan 100% van de breedte van ouder <div> min 4 px.

Een hoogte in procenten is normaal genomen ten opzichte van de ouder van het element. Dat is bij de buitenste <span> de <div>, waar de <span> in zit (voor andere <span>'s in div#een is dit niet van belang).

De <div>'s zijn bij #wrapper div 400 px hoog gemaakt, dus 10% is 40 px.

Marge van 2 px aan alle kanten. De achtergrond van de buitenste <span> is zwart. Door deze marge zie je de witte achtergrond van de <div>, waardoor het zwarte blokje dat 10% aangeeft een witte rand krijgt.

#een span span

Elke <span> binnen een andere <span> binnen het element met id="een". Binnen div#een zit maar één geneste <span>: de <span> met het percentage.

height: auto;

Alle <span>'s in div#een hebben bij #een span een hoogte van 10% gekregen. Voor de buitenste <span> is dat prima, want die zorgt voor het zwarte blokje dat de 10% aangeeft. Maar deze geneste <span> zou 10% van de 10% van de buitenste <span> worden, wat veel te weinig is.

Op de afbeelding heeft deze geneste <span> even een rode achtergrond gekregen, zodat de <span> zichtbaar wordt. De rode <span> is 10% van de buitenste <span>. Hierdoor komt de tekst te laag te staan. En nog erger: als de lettergrootte wordt verhoogd, groeit de tekst naar beneden, waardoor een (groot) deel van '10%' onder het diagram komt te staan.

Daarom wordt de hoogte hier weer teruggezet naar de standaardwaarde auto: precies hoog genoeg om de inhoud ervan weer te geven. Als die inhoud door een grotere lettergrootte toeneemt, wordt de <span> nu gewoon hoger. En omdat de <span> iets hieronder absoluut wordt gepositioneerd vanaf de onderkant van de buitenste <span>, groeit de <span> naar boven toe. De tekst komt nu nooit onder het diagram te staan.

font-size: min(3.5vw, 0.9em);

Omdat de <span>'s in het eerste staafdiagram iets smaller zijn dan de <span>'s in de andere staafdiagrammen, moet de lettergrootte iets kleiner worden. De browser kiest de kleinste van deze 2 waarden: 3.5 vw (3,5 % van de breedte van het browservenster) of 0,9 em.

Een uitgebreider verhaal over min() staat bij font-size: min(4vw, 0.9em);). Het enige verschil is dat de eerste waarde daar 4 vw is en hier 3,5 vw.

mix-blend-mode: difference;

Als de tekst wordt vergroot, is er te weinig ruimte om '10%' op het zwarte vlakje weer te geven. Daarom wordt de '10' naar boven verplaatst. Als dat zonder meer zou gebeuren, ziet dat eruit zoals op de afbeelding: de '10' houdt de witte tekstkleur, en de bij span span aan de binnenste <span> gegeven zwarte achtergrond wordt ook naar boven toe vergroot. Geen doodzonde, maar het is niet erg netjes. Bovendien is nu het zwarte vlakje dat de 10% aangeeft nauwelijks nog te onderscheiden van de zwarte achtergrond achter de '10'.

Met behulp van mix-blend-mode worden zwart en wit omgewisseld, waardoor het er ineens heel anders uitziet. Op deze afbeelding is alles nog precies hetzelfde als op de eerdere afbeelding, alleen is de zwarte achtergrond van de binnenste <span> verandert in wit. Daardoor valt die achtergrond weg tegen de witte achtergrond van de <div>. De '10' is van wit in zwart veranderd, want een witte '10' op een witte achtergrond zou je niet zien. Het ziet er netter uit en het zwarte blokje dat de 10% aangeeft, is nu nog steeds 10% hoog.

Deze verandering is gedaan met behulp van mix-blend-mode. Dit is een eigenschap die op allerlei verschillende manieren twee over elkaar heen staande elementen elkaar laat beïnvloeden. De hier gebruikte manier (officieel 'mode') is difference: verschil.

De theorie achter deze eigenschap is meestal tamelijk ingewikkeld, maar hier valt het mee. difference bepaalt het verschil tussen twee kleuren, en dat verschil is dan de nieuwe kleur. Hieronder wordt het enigszins vereenvoudigd beschreven.

Elke kleur op een scherm is samengesteld uit rood, groen en blauw. Dat kun je aangeven met rgb(), met tussen de haakjes drie getallen die de hoeveelheid rood, groen en blauw aangeven. De getallen lopen van 0 (niets) tot en met 255 (volledig, 100%).

In deze notatie is rgb(0, 0, 0) zwart: helemaal geen rood, groen en blauw. Wit is rgb(255, 255, 255): maximaal rood, groen en blauw.

De <div> heeft een witte achtergrond: rgb(255, 255, 255). De <span> heeft een zwarte achtergrond: rgb(0, 0, 0). Als je de eerste, tweede en derde waarde van elkaar aftrekt, houd je rgb(255, 255, 255) over, want 255 – 0 = 255. Het verschil tussen de witte achtergrond van de <div> en de zwarte achtergrond van de <span> is dus rgb(255, 255, 255), oftewel: wit. Waar de zwarte achtergrond van de <span> boven de witte achtergrond van de <div> staat, verandert de zwarte achtergrond in wit. Daardoor zie je de achtergrond niet meer.

Zou je de achtergrond van de <span> bijvoorbeeld rood (dat is rgb(255, 0, 0)) maken, dan zou de berekening anders worden en zou je de achtergrond nog wel zien als blauwgroen.

De tekstkleur van de <span> is wit. Dat is in rgb()-notatie rgb(255, 255, 255). De witte achtergrond van de <div> is ook rgb(255, 255, 255). Als je die weer van elkaar aftrekt, houd je rgb(0, 0, 0) over: zwart. Waar de witte tekst '10%' boven de witte <div> komt te staan, wordt de tekstkleur dus zwart.

Het maakt hierbij niet uit of hele of halve letters boven de witte achtergrond komen te staan, de kleur van de tekst verandert precies op de grens tussen de zwarte achtergrond van de <span> en de witte achtergrond van de <div>.

Om de <span> op een bepaalde 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 de buitenste <span>, die bij div > span een absolute positie heeft gekregen.

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

Vanaf de onderkant van de buitenste <span> neerzetten (dat is de eerste voorouder met een andere positie dan statisch).

Door de binnenste <span> met het percentage vanaf de onderkant neer te zetten, zal het percentage bij een grotere letter naar boven toe groeien en niet naar onderen. Daarmee wordt voorkomen dat het procentteken bij een grotere letter onder het staafdiagram komt te staan.

Maar als de <span> met het percentage op een vaste afstand vanaf de onderkant wordt neergezet, zal die bij een grotere lettergrootte vanaf die vaste afstand naar boven toe groeien. Dat is wat op de afbeelding gebeurt: het percentage in het eerste diagram staat veel hoger dan de percentages in de andere diagrammen.

Daarom wordt de afstand tot de onderkant met behulp van calc() aangepast aan de lettergrootte.

Beide waarden moesten door uitproberen worden gevonden, omdat er kleine verschillen tussen browsers en besturingssystemen zijn. Deze twee waarden leveren overal een redelijk resultaat op.

De berekening wordt hier gemaakt met twee verschillende eenheden: px en rem. Dat kan niet, eerst moeten alle eenheden worden omgerekend naar dezelfde eenheid. Daarom rekent de browser de eenheid rem om naar de eenheid px.

Bij het schrijven van de code kan dat omrekenen niet, omdat je niet weet hoe groot de lettergrootte is. Maar op het moment van weergave weet de browser dat wel.

De berekening wordt dan 36 px min 1 keer de lettergrootte van de pagina. Stel dat de lettergrootte de standaardwaarde van 16 px is. De berekening wordt dan 36 px – 16 px = 20 px. De <span> met het percentage wordt nu op 20 px vanaf de onderkant van de buitenste <span> neergezet. Dat is precies de goede hoogte: bijna bovenin het zwarte blokje.

Als de bezoeker de lettergrootte twee keer vergroot tot 32 px, wordt de berekening 36 px – 32 px = 4 px. De <span> met het percentage wordt nu op 4 px vanaf de onderkant van de buitenste <span> neergezet.

Op de afbeelding zijn het eerste en tweede diagram met verschillende lettergroottes weergegeven.

Misschien niet helemaal perfect, maar in ieder geval veel beter dan wat op de afbeelding hierboven te zien is.

#twee span

Alle <span>'s in het element met id="twee". Dat is er maar één: de <span> in het tweede diagram met het percentage.

Een hoogte in procenten is normaal genomen ten opzichte van de ouder van het element. Dat is hier het div#twee, het tweede diagram. In deze <span> staat '20%', en de hoogte van de <span> is hiermee precies 20% van div#twee.

#drie > span

De <span>'s die een direct kind zijn van het element met id="drie". Dat is er maar één: de <span> met de zwarte stippen in het derde diagram

Een uitgebreidere beschrijving van de > in de selector en wat een direct kind is, is te vinden bij div > span.

Hieronder wordt een aantal eigenschappen voor de achtergrond-afbeelding gebruikt. Veel van die eigenschappen kun je combineren in een zogenaamde 'shorthand': background. Door daarin in een bepaalde volgorde een aantal sleutelwoorden en/of waarden bij te gebruiken, kun je dan veel eigenschappen combineren in één regel.

Die shorthand wordt hier niet gebruikt om twee redenen.

* De eigenschappen die niet worden aangegeven bij de shorthand, worden teruggezet naar de standaardwaarden. Zo wordt de achtergrondkleur teruggezet naar de standaardwaarde transparent, tenzij je expliciet een standaardkleur opgeeft. Het is daardoor heel makkelijk om onbedoeld een eigenschap terug te zetten naar de standaardwaarde.

* Mede omdat een gradiënt vaak wordt gebruikt als achtergrond-afbeelding, wordt de shorthand background heel onoverzichtelijk, als naast die gradiënt ook nog een hele rits andere eigenschappen wordt gezet.

Bij div > span is de achtergrond van deze <span> zwart gemaakt. Omdat je zwarte bolletjes wat moeilijk ziet op een zwarte achtergrond, wordt de achtergrond hier wit gemaakt.

background-image: radial-gradient(black 4px, transparent 5px);

Achtergrond-afbeelding.

Vaak zul je een gewone afbeelding als achtergrond nemen, maar een gradiënt kan ook als achtergrond-afbeelding worden gebruikt. De browser maakt de gradiënt zelf, dus een url met een adres is niet nodig. De gradiënt gedraagt zich net zo als een gewone achtergrond-afbeelding. Omdat voor background-repeat niets wordt opgegeven, krijgt dit de standaardwaarde repeat en wordt de gradiënt herhaald tot de hele <span> is gevuld.

Op de afbeelding hiernaast zijn negen gradiënts te zien, tien keer vergroot. Hier iets onder wordt de gradiënt 10 px breed en hoog gemaakt. De afbeelding hiernaast staan dus eigenlijk negen vierkanten van elk 10 x 10 px.

Bij een gradiënt veranderen de kleuren. Die verandering kan scherp begrensd zijn of geleidelijk aan verlopen. Bij een radiale gradiënt zijn de grenzen tussen de kleuren min of meer rond. Je kunt er bijvoorbeeld een ellips mee maken, waarbij de kleuren van binnen naar buiten veranderen.

Je kunt met behulp van het sleutelwoord circle opgeven dat de gradiënt een cirkel moet worden, en ook waar het middelpunt van die cirkel komt te liggen. Hier is dat niet nodig. Als je niets opgeeft, begint een gradiënt in het midden en groeit van daaruit naar buiten. De gradiënt wordt iets hieronder 10 px breed en hoog gemaakt, dus het midden ligt op 5 px vanaf alle kanten. Omdat de gradiënt vanuit dat midden aan alle kanten evenveel naar buiten groeit, krijg je automatisch een cirkel.

(Zou je iets hieronder niet 10 x 10 px hebben opgegeven, maar bijvoorbeeld 20 x 12 px, dan zou je een ellips krijgen. Om dan toch een cirkel te krijgen, zou je wel het sleutelwoord circle moeten gebruiken.)

Deze gradiënt is heel simpel: er worden maar twee kleuren gebruikt, gescheiden door een komma.

De eerste kleur black 4px begint in het middelpunt en wordt dan 4 px naar alle kanten uitgebreid. Dit levert de zwarte cirkel op, die een diameter van 8 px krijgt (vanaf het middelpunt 4 px naar alle kanten). Omdat dit de eerste kleur is, hoef je geen beginpunt op te geven: het beginpunt is automatisch het middelpunt.

De tweede kleur is transparent 5px. Dit is dus eigenlijk geen kleur, het is doorzichtig. Het wit dat je ziet is de iets hierboven opgegeven witte achtergrondkleur van de <span> zelf. Op de afbeelding heeft de <span> even een rode achtergrondkleur gekregen, en nu zie je door het transparent de rode achtergrond van de <span>.

De 5px geeft aan dat deze 'kleur' op 5 px vanaf het middelpunt moet beginnen. Omdat dit de laatste kleur is, hoef je geen eindpunt op te geven: de kleur loopt door tot de buitenkant van de gradiënt.

De zwarte kleur loopt door tot 4 px vanaf het middelpunt, en het doorzichtige deel begint pas op 5 px. Er zit dus een 'kier' van 1 px tussen beide kleuren. Omdat het om een gradiënt gaat, verandert het zwart over die ene pixel geleidelijk aan in doorzichtig.

Op de afbeelding hiernaast is niet black 4px, transparent 5px, maar black 5px, transparent 5px gebruikt: het doorzichtige deel begint gelijk waar het zwarte deel eindigt: een harde grens. Op de drie keer vergrote afbeelding is al te zien dat dit niet echt heel mooi is, zo'n harde overgang. Op de werkelijke grootte is dit nog veel lelijker. Die kleine overgang van 1 px maakt de cirkels veel minder blokkerig en laat ze – in ieder geval voor het oog – beter op elkaar aansluiten.

De <div>'s met de diagrammen hebben bij #wrapper div een breedte van 10% van de breedte van div#wrapper gekregen. div#wrapper heeft een breedte van 400 px, dus de <div>'s met de diagrammen zijn 40 px breed. De achtergrond-afbeelding is 10 px breed, dus er passen precies 4 afbeeldingen naast elkaar.

Maar div#wrapper zit in <main>, en die heeft bij main een maximumbreedte van 94 vw gekregen, 94% van de breedte van het browservenster. In smallere vensters passen er hierdoor geen vier volledige achtergrond-afbeeldingen naast elkaar. Voor de meeste diagrammen maakt dat niets uit, maar hier zouden de laatste stippen van elke regel onvolledig zijn.

Dit kun je op allerlei manieren oplossen. Je zou aan de <div> met dit diagram een minimumbreedte van 40 px kunnen geven. Je zou de afmetingen van de achtergrond-afbeelding kunnen aanpassen aan de breedte van de <div>. En er is vast nog wel meer te verzinnen.

De eigenschap background-position heeft ook twee sleutelwoorden, waarmee je dat afkappen kunt voorkomen.

Op de afbeelding links is het sleutelwoord space gebruikt: er worden zoveel mogelijk complete afbeeldingen weergegeven, waarbij de afbeeldingen op gelijke afstanden van elkaar worden neergezet. Je hebt dan lege ruimte tussen de afbeeldingen. Op deze manier is het in het voorbeeld gedaan.

Op de rechterafbeelding is het sleutelwoord round gebruikt. De afbeeldingen worden nu zoveel opgerekt, dat ze de volle breedte vullen. Dit heeft wel als nadeel dat de afbeeldingen enigszins worden vervormd, want gelijk hieronder wordt ook een hoogte opgegeven, en die blijft hetzelfde: 10 px. Terwijl de breedte wel iets groter wordt.

De gradiënt 10 px breed en hoog maken.

Een hoogte in procenten is normaal genomen ten opzichte van de ouder van het element. Dat is hier div#drie, het derde diagram. In dit diagram staat '30%', en de hoogte van de <span> met de achtergrond is hiermee precies 30% van div#drie.

#vier > span

De <span>'s die een direct kind zijn van het element met id="vier". Dat is er maar één: de <span> met de kleine zwarte blokjes in het vierde diagram.

Een uitgebreidere beschrijving van de > in de selector en wat een direct kind is, is te vinden bij div > span.

Hieronder wordt een aantal eigenschappen voor de achtergrond-afbeelding gebruikt. Veel van die eigenschappen kun je combineren in een zogenaamde 'shorthand': background. Door daarin in een bepaalde volgorde een aantal sleutelwoorden en/of waarden bij te gebruiken, kun je dan veel eigenschappen combineren in één regel.

Die shorthand wordt hier niet gebruikt om twee redenen.

* De eigenschappen die niet worden aangegeven bij de shorthand, worden teruggezet naar de standaardwaarden. Zo wordt de achtergrondkleur teruggezet naar de standaardwaarde transparent, tenzij je expliciet een standaardkleur opgeeft. Het is daardoor heel makkelijk om onbedoeld een eigenschap terug te zetten naar de standaardwaarde.

* Mede omdat een gradiënt vaak wordt gebruikt als achtergrond-afbeelding, wordt de shorthand background heel onoverzichtelijk, als naast die gradiënt ook nog een hele rits andere eigenschappen wordt gezet.

Bij div > span is de achtergrond van deze <span> zwart gemaakt. Omdat je zwarte blokjes wat moeilijk ziet op een zwarte achtergrond, wordt de achtergrond hier wit gemaakt.

Hier worden twee gradiënts gebruikt als achtergrond-afbeelding. Ook dit werkt precies hetzelfde als bij gewone achtergrond-afbeeldingen: de gradiënts worden over elkaar heen gezet, waarbij de eerdere gradiënts boven latere gradiënts komen te staan, als ze elkaar overlappen.

Op de bovenste twee afbeeldingen zijn de twee gradiënts apart weergegeven, tien keer vergroot. Linksboven staat alleen de eerste gradiënt een aantal keren, rechtsboven alleen de tweede gradiënt. Elk vierkant blokje is een gradiënt. Net als een gewone achtergrond-afbeelding worden deze weer herhaald, tot de hele achtergrond van de <span> is gevuld.

Beide gradiënts zijn eigenlijk precies hetzelfde. Ze zijn opgebouwd uit zwart afgewisseld met doorzichtig. Dit levert horizontale zwarte balken op, afgewisseld met doorzichtige horizontale balken.

Door de doorzichtige kleur zie je de witte achtergrondkleur van de <span>. Wat op de afbeeldingen wit is, is dus eigenlijk doorzichtig.

De richting van de gradiënts wordt vervolgens 45 graden gedraaid, waardoor de horizontale balken veranderen in diagonale balken. Iets hieronder worden de gradiënts 6 x 6 px groot gemaakt, waardoor het grootste deel van de zwarte balken wegvalt, omdat dat niet binnen die 6 x 6 px past.

Gelijk hieronder wordt de tweede gradiënt 3 px naar onder en naar rechts verplaatst. Omdat beide gradiënts 6 px breed en 6 px hoog zijn, komt het zwart van de tweede gradiënt nu precies tegen het zwart van de eerste gradiënt aan te staan. En omdat beide naar een diagonale richting zijn gedraaid, levert deze combinatie vierkante zwarte blokjes op.

Op de onderste afbeelding hierboven is het resultaat te zien. Het zwarte driehoekje hoort bij de eerste gradiënt, het rode driehoekje bij de tweede. Waar beide gradiënts geen zwart hebben, zijn ze doorzichtig en zie je de witte achtergrondkleur van de <span>.

De gradiënts zijn precies hetzelfde, alleen de positie van de tweede gradiënt wordt hier gelijk onder aangepast. Als we de draaiing even weglaten, is de gradiënt:

Dit levert de gradiënt op de afbeelding op. (Omdat de gradiënts heel klein zijn, staan op de afbeelding meerdere gradiënts naast elkaar.)

Omdat geen richting is opgegeven, loopt de gradiënt in de standaardrichting van boven naar beneden.

De eerst opgegeven kleur is black 25%. Omdat geen andere beginkleur is opgegeven, begint zwart bij 0%: helemaal bovenaan. En loopt door tot 25%.

De tweede kleur is transparent 25%. Deze begint bij 25%, precies waar zwart eindigt. Hierdoor krijg je een scherp begrensde overgang tussen zwart en doorzichtig.

De derde kleur is transparent 75%. Het doorzichtige deel loopt van 25% tot 75%. (Omdat het doorzichtig is, zie je weer de witte achtergrondkleur van de <span> erdoorheen.)

De laatste kleur is black 75%. Zwart begint precies waar doorzichtig is geëindigd: weer een scherpe overgang. Omdat verder niets is opgegeven, loop zwart door tot het eind: 100%.

Het eindresultaat: een horizontale zwarte balk over 25% van de hoogte, een doorzichtig deel over de volgende 50%, en onderaan weer een zwarte balk over 25% van de hoogte.

Het enige dat nu nog hoeft te gebeuren is het toevoegen van een draaiing. Op de afbeelding staat nog steeds vijf keer dezelfde gradiënt, maar nu met een toenemende draaiing. De eerste afbeelding is 9 graden gedraaid, de tweede 18 graden, de derde 27 graden, de vierde 36 graden, en de vijfde uiteindelijk zoals die is gebruikt: 45 graden:

(Kleine vertekeningen op de afbeelding zijn ontstaan door de extreme vergroting.)

Beide gradiënts zijn precies hetzelfde. Gelijk hieronder krijgen ze ook nog dezelfde maat. Alleen de positie van beide verschilt.

Als er meerdere achtergrond-afbeeldingen zijn, kun je daarvoor een verschillende positie opgeven, gescheiden door een komma. De maten voor de komma gelden dan voor de eerste afbeelding, die achter de komma voor de tweede (en als er nog meer zouden zijn, volgen nog meer komma's en posities).

Op de zeven afbeeldingen hiernaast zijn op elke afbeelding acht gradiënts weergegeven: vier keer de eerste, en vier keer de tweede. De tweede gradiënt heeft een rode kleur gekregen, de eerste is zwart gebleven. Hierdoor kun je het verschil tussen de eerste en de tweede gradiënt zien.

Als er meerdere achtergrond-afbeeldingen zijn die elkaar overlappen, komt de eerste afbeelding uit de html boven de tweede te staan. Het wit op de afbeelding is weer de witte achtergrond van de <span>, die door het doorzichtige deel van de gradiënts zichtbaar is.

Op de afbeelding midden boven staan beide gradiënts op dezelfde positie. Daardoor is alleen de eerste gradiënt te zien, de zwarte, want die staat als eerste in de html. En komt dus over de tweede rode gradiënt heen te staan.

Die eerste zwarte gradiënt blijft steeds op dezelfde positie staan: 0 0. 0 px vanaf de bovenkant, 0 px vanaf de linkerkant.

Op de afbeelding linksboven is de tweede rode gradiënt met 1px 0 één pixel naar rechts verplaatst, waardoor deze gedeeltelijk zichtbaar wordt.

Op de afbeelding rechtsboven is de tweede rode gradiënt met 2px 0 twee pixels naar rechts verplaatst.

Op de afbeelding midden links is de tweede rode gradiënt met 3px 0 drie pixel naar rechts verplaatst. Dat is precies de helft van de breedte van de gradiënt. Nu staat het rode deel van de tweede gradiënt precies boven het zwarte deel van de eerste gradiënt.

Op de afbeelding midden rechts is de tweede rode gradiënt met 3px 1px drie pixel naar rechts en één pixel naar beneden verplaatst.

Op de afbeelding linksonder is de tweede rode gradiënt met 3px 2px drie pixel naar rechts en twee pixels naar beneden verplaatst. Dat begint er al op te lijken.

Op de afbeelding rechtsonder is de uiteindelijke positie bereikt: 3px 3px. De tweede rode gradiënt is 3 px naar rechts en 3 px naar beneden verplaatst, de helft van de breedte en hoogte van de gradiënt. Het rood van de tweede gradiënt sluit nu aan op het zwart van de eerste gradiënt: daar is het vierkantje.

Grootte van de achtergrond-afbeeldingen. De eerste maat is voor de breedte, de tweede voor de hoogte. Omdat er maar één breedte en hoogte is opgegeven, gelden deze voor beide gradiënts.

Een hoogte in procenten is normaal genomen ten opzichte van de ouder van het element. Dat is hier div#vier, het vierde diagram. In dit diagram staat '40%', en de hoogte van de <span> met de achtergrond is hiermee precies 40% van div#vier.

#vijf > span

De <span>'s die een direct kind zijn van het element met id="vijf". Dat is er maar één: de <span> met de diagonale strepen in het vijfde diagram.

Een uitgebreidere beschrijving van de > in de selector en wat een direct kind is, is te vinden bij div > span.

Hoe je deze schuine strepen krijgt, is het best te zien als je de gradiënt stap voor stap maakt. Eerst een gewone lineaire gradiënt zonder draaiing:

linear-gradient(black, white 1px, white 3px, black 4px, black 6px);

Omdat geen richting of draaiing is opgegeven, loopt de gradiënt in de standaardrichting: van boven naar beneden.

Wat je op de afbeelding ziet, is niet echt helemaal hetzelfde als de diagonale strepen in het voorbeeld. De draaiing is weggehaald, dus dat ze horizontaal lopen, is logisch. Maar je kunt dit moeilijk een herhaling van strepen noemen. Wat gebeurt hier?

linear-gradient bevat drie kleuren met vijf posities, gescheiden door een komma:

Als repeating wordt toegevoegd, gaat het er heel anders uitzien:

Door linear-gradient te veranderen in repeating-linear-gradient wordt de gradiënt nu steeds herhaald, tot de volledige hoogte van de <span> is opgevuld.

Ten slotte wordt de draaiing toegevoegd. De uiteindelijke draaiing is -45deg:

Omdat voor deg een negatief getal staat, is de draaiing tegen de klok in. Op de afbeeldingen is de draaiing in verschillende stappen aangebracht, zodat is te zien wat er gebeurt. Op de bovenste afbeelding is de draaiing -9deg, op de tweede ‑18deg, op de derde ‑27deg, op de vierde ‑35deg en op de laatste uiteindelijk ‑45deg.

Een hoogte in procenten is normaal genomen ten opzichte van de ouder van het element. Dat is hier div#vijf, het vijfde diagram. In dit diagram staat '50%', en de hoogte van de <span> met de achtergrond is hiermee precies 50% van div#vijf.

#zes span

Alle <span>'s in het element met id="zes". Alle <span>'s in het zesde diagram.

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

(Deze <span>'s zijn eerder bij div > span absoluut gepositioneerd en daardoor veranderd in een soort blok-element. Maar iets hieronder worden deze <span>'s weer statisch gepositioneerd, en dan werkt dat niet meer. Vandaar deze regel.)

Een hoogte in procenten is normaal genomen ten opzichte van de ouder van het element. Dat is hier de <div>, waar de <span>'s in zitten.

Door de <span>'s 10% hoog te maken, kunnen ze om en om een witte en een zwarte achtergrond krijgen, zodat je blokjes krijgt die elk 10% voorstellen.

De <span>'s zijn eerder bij div > span absoluut gepositioneerd en met bottom: 0; onderaan de <div> neergezet. Daardoor zouden ze allemaal over elkaar heen komen te staan en zou alleen de laatste <span> met '10%' zichtbaar zijn.

Door de <span>'s weer statisch te positioneren, komen ze boven elkaar te staan. Normaal genomen zouden de <span>'s achter elkaar komen te staan tot de regel vol is, maar iets hierboven zijn ze veranderd in een blok-element. Daardoor komen ze elk op een nieuwe regel te staan, zoals alle blok-elementen.

#zes span:first-of-type

Kinderen van dezelfde ouder kunnen worden geteld, net zoals dat bij kinderen uit een gezin het geval is: eerste kind, tweede kind, derde kind, enzovoort. Je kunt ook alleen 'n bepaald soort element tellen, net zoals je alleen kinderen van jonger of ouder dan zes jaar kunt tellen. Met de pseudo-class :nth-of-type() worden alleen elementen van een bepaald soort geteld. Omdat het vaak voorkomt dat je het eerste element van 'n bepaald type wilt hebben, heeft dat een aparte pseudo-class, het in deze selector gebruikte :first-of-type.

De hele selector in gewone taal: elke eerste <span> binnen div#zes. Dat is er hier maar één.

De pseudo-class :first-of-type (of :nth-of-type()) kan onverwachte bijwerkingen hebben. In dit geval zit er maar één serie <span>'s in div#zes. Maar als binnen div#zes bijvoorbeeld nog 'n geneste <span> zou zitten, zou deze selector ook voor die <span> gelden. Want die is ook de eerste van z'n soort. (Dit zou je in dit geval kunnen oplossen door het toevoegen van >: #zes > span:first-of-type. Dan geldt de selector alleen voor directe kinderen van div#zes.)

Bij div > span is de achtergrond van deze <span> zwart gemaakt. Deze <span> vult de bovenste 40% van het zesde diagram. Dat deel van het diagram geeft een leegte aan en moet daarom wit zijn.

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

Deze eerste <span> is een apart geval. Dit diagram wordt voor 63% gevuld. Op de afbeelding is de <span> met 63% even verborgen, want die is ook al een apart geval. En boven in deze <span> is even '40%' neergezet.

De <span>'s in het zesde diagram worden op de normale wijze neergezet: van boven naar beneden. Een hoogte in procenten is normaal genomen ten opzichte van de ouder van het element. Door deze <span> 40% van de hoogte van ouder div#zes te geven, drukt deze <span> als het ware de andere <span>'s omlaag en blijft er precies 60% over voor de zes <span>'s die elk 10% hoog zijn: de achtergrond van het diagram is nu voor 60% gevuld.

#zes span:nth-of-type(2)

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

De hele selector in gewone taal: de tweede <span> binnen div#zes.

De pseudo-class :nth-of-type() (of de bijzondere vormen :first-of-type en :last-of-type voor het eerste en laatste element uit een serie) kan onverwachte bijwerkingen hebben. In dit geval is er maar één serie <span>'s in div#zes. Maar als er meerdere series <span>'s in zouden zitten, zou deze selector ook voor elke tweede <span> binnen die andere series <span>'s gelden. (Dit zou je in dit geval kunnen oplossen door het toevoegen van >: #zes > span:nth-of-type(2). Dan geldt de selector alleen voor directe kinderen van div#zes.

Dit is de <span>, waarin '63%' staat. Deze <span> is een apart geval, omdat de <span> maar 3% hoog is. Daardoor past '63%' op geen enkele manier binnen deze <span>, tenzij je de lettergrootte onleesbaar klein zou maken. Maar zodra iemand de lettergrootte zou verhogen, gaat het weer mis.

Daarom wordt deze <span> absoluut gepositioneerd op 63% vanaf de onderkant van de <div>. Een border aan de onderkant van de <span> is dan het streepje dat de 63% aangeeft. Bij een grotere letter groeit de tekst naar boven toe, omdat de <span> vanaf de onderkant is gepositioneerd. Maar het streepje dat de 63% aangeeft, blijft gewoon op dezelfde plaats staan.

Op de afbeelding is de <span> zichtbaar gemaakt met een stippellijntje, links met de standaardlettergrootte, rechts met een lettergrootte van 200%.

Bij #zes span heeft ook deze <span> een hoogte van 10% gekregen. Omdat de tekst bovenin de <span> komt te staan, zou daardoor '63%' veel te hoog komen te staan. Dit is wat op de afbeelding links gebeurt.

Bij een grotere letter zou de tekst niet naar boven, maar naar onder groter worden, zoals op de rechterafbeelding is te zien.

Daarom krijgt de <span> hier de standaardhoogte auto. Omdat de <span> iets hieronder absoluut wordt gepositioneerd, wordt het een soort blok-element. Hierdoor wordt de hoogte van de <span> precies hoog genoeg om de tekst erin weer te geven.

Randje aan de onderkant. Dit is het streepje dat de grens van 63% aangeeft.

Om de <span> op een bepaalde 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. Dat is div#zes, die bij #wrapper div een relatieve positie heeft gekregen.

Op 63% vanaf de onderkant van div#zes neerzetten. Hierdoor geeft de border aan de onderkant van de <span> precies de grens van 63% aan.

#zes span:nth-of-type(even)

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

De hele selector in gewone taal: de even <span>'s binnen het element met id="zes". Dit zijn de <span>'s in het zesde diagram met de witte achtergrond.

De pseudo-class :nth-of-type() (of de bijzondere vormen :first-of-type en :last-of-type voor het eerste en laatste element uit een serie) kan onverwachte bijwerkingen hebben. In dit geval is er maar één serie <span>'s in het voorbeeld. Maar als in div#zes nog andere series <span>'s zouden zitten, zou deze selector ook voor de even <span>'s binnen die series gelden. (Dit zou je zin dit geval kunnen oplossen door het toevoegen van >: #zes > span:nth-of-type(even). Dan geldt de selector alleen voor directe kinderen van div#zes.)

Bij div > span zijn de achtergronden van deze <span>'s zwart gemaakt. Door de even <span>'s een witte achtergrond te geven – terwijl de oneven <span>'s hun zwarte achtergrond houden – krijg je afwisselend zwarte en witte blokjes.

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

#zeven

Het element met id="zeven". Binnen div#zeven staat het zevende diagram.

Bij #wrapper zijn de acht <div>'s die directe kinderen van div#wrapper zijn veranderd in flex items. Bij #wrapper div hebben deze <div>'s een breedte van 10% van div#wrapper gekregen. De standaardwaarde bij flex-grow is 0: een flex item mag niet groeien (in dit geval niet breder worden).

In dit diagram wordt de achtergrond gevormd door een smiley, die 18 px breed is. In bredere browservensters passen er precies twee smileys naast elkaar. Maar in heel smalle vensters wordt <div> daar te smal voor en wordt de tweede smiley onvolledig getoond. Daarom mag div#zeven breder worden, als dat nodig is. Omdat div#zeven een flex item is, moet voor dat breder worden expliciet toestemming worden gegeven.

Voor dat breder worden wordt de overblijvende lege ruimte gebruikt tussen de diagrammen gebruikt. (In echt heel smalle browservensters is er geen lege ruimte, dan kan div#zeven niet breder worden. Maar zulke smalle vensters komen waarschijnlijk niet meer voor.)

In bredere browservensters is er lege ruimte tussen alle diagrammen. Hier gelijk boven heeft div#zeven als enige toestemming gekregen om breder te worden, als dat nodig is.

Als dat nodig is, maar de rotzak maakt daar gelijk misbruik van door áltijd te groeien, zoals op de afbeelding is te zien. Alle lege ruimte wordt in beslag genomen.

Daarom wordt hier een maximumbreedte opgegeven. Omdat de smiley 18 px breed is, passen hier precies twee smileys naast elkaar in. En meer is ook niet nodig.

(Dit is trouwens niet vanwege het hebberige karakter van div#zeven, maar zo werkt flex-grow gewoon. Als je het niet begrenst, wordt álle overblijvende ruimte gevuld.)

#zeven > span

De <span>'s die een direct kind zijn van het element met id="zeven". Dat is er maar één: de <span> met de smileys in het zevende diagram.

Een uitgebreidere beschrijving van de > in de selector en wat een direct kind is, is te vinden bij div > span.

Als achtergrond wordt een smiley gebruikt. Omdat voor background-repeat niets is opgegeven, wordt de standaardinstelling gebruikt: herhalen tot de achtergrond is gevuld.

Bij div > span is deze <span> absoluut gepositioneerd, waardoor deze in een soort blok-element is veranderd. Een blok-element wordt normaal genomen even breed als de ouder ervan. Die ouder is div#zeven, die bij #zeven een breedte van altijd 36 px heeft gekregen. Omdat de smiley 18 px breed is, passen er precies twee naast elkaar.

Standaard wordt de achtergrond vanaf de bovenkant begonnen: aan de bovenkant staat altijd een volledig smiley (als de <span> minimaal 18 px hoog is), maar aan de onderkant kan de smiley worden afgekapt, omdat daar geen volledig smiley meer past.

Omdat de diagrammen vanaf de onderkant worden opgebouwd, worden de smileys met de sleutelwoorden left bottom vanaf de linkeronderhoek neergezet, en niet vanaf de bovenkant. Een eventueel onvolledige smiley staat nu aan de bovenkant.

Een hoogte in procenten is normaal genomen ten opzichte van de ouder van het element. Dat is hier div#zeven, het zevende diagram. In dit diagram staat '70%', en de hoogte van de <span> met de achtergrond is hiermee precies 70% van div#zeven.

#acht > span

De <span>'s die een direct kind zijn van het element met id="acht". Dat is er maar één: de <span> met de gradiënt in het achtste diagram.

Een uitgebreidere beschrijving van de > in de selector en wat een direct kind is, is te vinden bij div > span.

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

Omdat geen richting is aangegeven, loopt de gradiënt in de standaardrichting van boven naar beneden. De geleidelijke overgang van de kleur #1bbd5a helemaal bovenaan naar hier #cc2714 onderaan wordt door de browser geregeld.

Een hoogte in procenten is normaal genomen ten opzichte van de ouder van het element. Dat is hier div#acht, het derde diagram. In dit diagram staat '80%', en de hoogte van de <span> met de achtergrond is hiermee precies 80% van div#acht.