Tekstkleur aanpassen aan achter­grond met gebruik van mix-blend-mode - uitleg

Algemeen

Dit deel gaat over de meer theoretische achtergrond van mix-blend-mode. Als je daarin niet bent geïnteresseerd, kun je dit in principe gewoon overslaan. Meestal is het simpeler om het gewoon spelenderwijs uit te proberen dan om het theoretisch te beredeneren. Dat is ook wat in (vrijwel) elke uitleg hierover wordt gezegd.

Maar als je dezelfde afwijking hebt als ondergetekende en wilt weten, hoe iets ongeveer werkt, dan kun je dat hier vinden.

Als wij een kleur zien, ziet de computer 'n aantal getallen. En met getallen kun je rekenen. Als je twee kleuren hebt, heb je twee sets met getallen. Als je daar dingen mee doet, waar alleen wiskundigen de humor van begrijpen, krijg je 'n nieuwe kleur. Dat is de kern van blenden. (En van het zusje van blenden: compositing. Maar dat wordt hier verder niet beschreven.)

Css kent twee eigenschappen voor blenden: mix-blend-mode en background-blend-mode. Beide werken, wat betreft het blenden, grotendeels hetzelfde. Het verschil zit in wát ze blenden.

background-blend-mode is bedoeld om binnen hetzelfde element één of meerdere achtergronden en eventueel een achtergrondkleur te blenden. Het kan bijvoorbeeld worden gebruikt om twee afbeeldingen te combineren. Het werkt alleen voor achtergronden: de kleur van tekst en dergelijke wordt niet gewijzigd. Deze eigenschap wordt hier verder niet beschreven.

mix-blend-mode is bedoeld om inhoud en achtergrond van een element te blenden met het element erachter. Omdat je dat element ook weer met het element erachter kunt blenden, en dat ook weer met dat erachter, enzovoort, kun je 'n – in theorie – eindeloze hoeveelheid elementen elkaar laten beïnvloeden.

Dat is te zien in het onderste voorbeeld met de gekleurde cirkels. Bij het eerste en derde groepje cirkels wordt mix-blend-mode gebruikt. De html en css is bij beide groepjes vrijwel hetzelfde. Elke cirkel zit in een eigen <span>. De <span>'s van elk groepje cirkels zitten weer in een <p>. Bij beide groepjes beïnvloeden de kleuren van de cirkels elkaar op de plaatsen, waar de cirkels elkaar overlappen. Maar de <p> van het derde groepje heeft een rode achtergrondkleur. Daardoor zijn de uiteindelijke kleuren van de cirkels van het derde groepje volkomen anders dan die van het eerste groepje.

Aan dit blenden van verschillende elementen zitten wel grenzen: de elementen moeten in dezelfde 'stacking context' zitten. (Er bestaat geen goede Nederlandse vertaling voor dit begrip.) Je zou een stacking context, heel erg versimpeld, 'n groep bij elkaar horende elementen kunnen noemen.

Verschillende eigenschappen zorgen voor een nieuwe stacking context, bijvoorbeeld opacity met een lagere waarde dan 1. Door bijvoorbeeld een <div> opacity: 0.99; te geven (dat is zo weinig dat je het niet ziet), kun je het blenden beperken tot die <div>. Maar je kunt ook een speciaal daarvoor bedoelde eigenschap gebruiken: isolation. Die stacking context kan heel handig zijn, maar je kunt er ook hartstikke knettergestoord van worden. Meer over stacking context en isolation is te vinden bij Elementen niet laten meedoen met blenden.

Blenden heeft ook invloed op de kinderen van een element. Ook daar is meer over te vinden bij Elementen niet laten meedoen met blenden.

Emgelse termen

Op internet worden voor blenden vrijwel alleen de Engelse termen gebruikt. Nederlandstalige artikelen over de css-eigenschap mix-blend-mode heb ik niet kunnen vinden, althans geen artikelen die iets langer waren dan enkele regels met een truc of zo. (Ook geen artikelen over background-blend-mode trouwens.) Ook in Nederlandstalige artikelen over Photoshop worden vaak de Engelse termen gebruikt.

Om deze redenen worden in deze uitleg ook voornamelijk de Engelse termen gebruikt. Als je elders op internet iets op wilt zoeken, zul je ook die Engelse termen moeten gebruiken. Hieronder volgt een kort lijstje van de belangrijkste begrippen. (De namen van de modes – de mogelijke soorten blenden – zitten daar niet bij, want die worden nooit vertaald.)

Rekenen met kleuren

Als wij naar een scherm kijken, zien we 'n kleur. Die kleur wordt samengesteld door de computer. Mijn favoriete stripfiguur Guust Flater werkt in een van zijn vele dromen met gloeiwormpjes die gekleurd licht geven. Dat is ook geprobeerd met computers, maar helaas bleken de gloeiwormpjes de bedrading aan te vreten. Daarom moet een computer een andere techniek gebruiken om een kleur te 'maken'.

Als gevolg hiervan moet de computer zelf een kleur samenstellen, waarna het scherm die kleur dan kan weergeven. Dat is in werkelijkheid een waanzinnig gecompliceerd proces, waar hier verder niet op wordt ingegaan. (Dat klinkt ook 'n stuk slimmer, dan dat ik er gewoon te weinig van weet...)

Schermen zijn opgebouwd uit pixels. Op hogeresolutieschermen zitten die heel dicht bij elkaar, zodat je een mooiere weergave hebt. Op desktopmonitors zitten ze meestal verder uit elkaar. Dat maakt voor de rest van het verhaal verder niets uit.

Elke pixel is opgebouwd uit drie subpixels: een rode, een groene en een blauwe. Door deze subpixels meer of minder op te laten lichten, kun je elke kleur maken. Omdat elke subpixel 256 verschillende sterktes kan krijgen (van helemaal uit tot helemaal aan), kun je 256 x 256 x 256 =16.777.216 verschillende kleuren samenstellen.

In feite wordt je dus voortdurend voor de gek gehouden, als je denkt 'n bepaalde kleur te zien. In werkelijkheid zie je 'n rood, 'n groen en 'n blauw puntje. Alle andere kleuren ontstaan door de sterkte van die drie kleuren te variëren. Omdat menselijke ogen eigenlijk helemaal niet zo goed zijn, dénken wij 'n gewone kleur te zien op een monitor. In werkelijkheid zijn het drie stukjes rood, groen en blauw die voor 'n mens niet zijn te onderscheiden.

Eigenlijk is het verhaal nog veel ingewikkelder, omdat je inmiddels ook 'n soort subsubpixels hebt. Verder kun je subpixels van twee verschillende pixels combineren. Er zijn allerlei trucs mogelijk, waarmee het menselijk oog gefopt kan worden. Daardoor zijn zelfs goedkope monitors tegenwoordig niet meer echt blokkerig.

(Op papier is het trouwens een heel ander verhaal, daar zijn ogen veel moeilijker voor de gek te houden. Vandaar dat het printen van een foto vanaf internet vaak een slecht resultaat oplevert. De kwaliteit die op een monitor nog voldoende was, ziet er op papier niet uit.)

Voor een computer is elke kleur een getal. Of feitelijk: een combinatie van drie getallen. Een getal voor rood, een voor groen en een voor blauw. Daar komt de afkorting RGB vandaan, die veel wordt gebruikt in de grafische wereld. Toevallig beginnen de Nederlandse kleuren ook met deze letters, maar ze staan eigenlijk voor red, green en blue.

rgb is ook de naam van een css-eigenschap, waarmee je kleuren kunt aangeven.

rgb(0, 0, 0) wil zeggen: helemaal geen rood, geen groen en geen blauw. Dit levert zwart op.

rgb(255, 255, 255) wil zeggen: volledig rood, groen en blauw, wat wit oplevert.

rgb(0, 0, 255) is geen rood, geen groen en volledig blauw. Dit levert blauw op. rgb(255, 255, 0) is volledig rood, volledig groen en geen blauw, wat geel oplevert. (Het mengen van kleuren op een monitor werkt anders dan bij kleuren op papier.)

Op deze manier kun je, door de drie getallen te variëren, elk van de 16.777.216 mogelijke kleuren definiëren.

Er zijn 256 waarden mogelijk, maar het hoogst mogelijke getal is 255. Dat heeft een simpele reden: computers beginnen meestal met 0 te tellen, in tegenstelling tot mensen. En als je bij 0 begint en bij 255 eindigt, heb je 256 getallen. Er bestaan in css nog andere manieren om kleuren weer te geven, zoals de hexadecimale. Daarin geef je bijvoorbeeld geel op als #ffff00. Voor dit verhaal maakt dit niets uit, want de verschillende notaties werken allemaal hetzelfde. Voor een computer is ff hetzelfde als 255.

Een van de modes bij blenden is 'multiply': vermenigvuldigen. Twee kleuren worden vermenigvuldigd en dat levert een nieuwe kleur op. Alleen: konijnen kunnen zich vermenigvuldigen, maar hoe vermenigvuldig je twee kleuren?

Voor een computer bestaat een kleur uit een getal. Feitelijk drie getallen: een waarde voor rood, een voor groen en een voor blauw. En met getallen kun je, net als met konijnen, vermenigvuldigen.

Als er twee kleuren geblend moeten worden, heb je twee series van drie getallen.

De kleur rood is rgb(255, 0, 0). 255 voor rood, 0 voor groen en 0 voor blauw.

De kleur blauw is rgb(0, 0, 255). 0 voor rood, 0 voor groen en 0 255 voor blauw.

Bij de mode multiply worden van beide kleuren de waarden voor rood, voor groen en voor blauw met elkaar vermenigvuldigd.

De beide waarden voor rood: 255 x 0 = 0.

De beide waarden voor groen: 0 x 0 = 0.

De beide waarden voor blauw: 0 x 255 = 0.

Voor de nieuwe kleur worden de drie uitkomsten weer achter elkaar gezet: rgb(0, 0, 0). Dit levert de kleur zwart op. Als je rood met blauw blendt met de mode multiply, levert dat de kleur zwart op:

Hierboven staan twee geneste <div>'s. De buitenste <div> heeft als css onder andere background: rgb(255, 0, 0);, een rode achtergrond. De binnenste <div> heeft als css onder andere background: rgb(0, 0, 255);, een blauwe achtergrond, en mix-blend-mode: multiply;. Dit levert uiteindelijk een zwarte achtergrondkleur op voor de binnenste <div>.

Uiteraard is dit een vrij zinloze exercitie die alleen afkomstig kan zijn van de Afdeling Werkverschaffing. Je kunt de binnenste <div> ook gewoon 'n zwarte achtergrond geven. Maar wat hier is gebeurd, is wezenlijk anders dan 'n simpele zwarte achtergrond.

De binnenste <div> is 260 px breed en 100 px hoog. Dat zijn 260 x 100 = 26.000 pixels (waarbij even niet wordt gelet op hogeresolutieschermen en zo). Van de buitenste <div> worden dus 26.000 pixels overlapt door de binnenste <div>. Elk van die pixels wordt apart bekeken. Omdat de achtergrondkleur van beide <div>'s egaal is, is de uitkomst van elke berekening hetzelfde: zwart. Dus krijgt de binnenste <div> een egaal zwarte achtergrond.

Als de binnenste <div> echter boven bijvoorbeeld een foto zou staan, wordt het een heel ander verhaal. De pixels van de foto hebben allemaal een andere kleur, dus de uitkomst van de berekening is voor elke pixel anders. En nu varieert de kleur van de binnenste <div>:

Het enige verschil met de twee <div>'s iets hierboven is, wat er achter de binnenste <div> zit. In de buitenste <div> is nu een foto gezet. Achter de binnenste <div> zit daardoor nu geen egaal rode kleur meer, maar een foto met allerlei kleuren. De achtergrondkleur van de binnenste <div> blijkt nu opeens te variëren, terwijl die achtergrondkleur nog steeds gewoon blauw is.

Op het voorbeeld hierboven lijkt het mogelijk, alsof je de binnenste <div> ook gewoon doorzichtig zou kunnen maken. Maar als je mix-blend-mode vervangt door opacity, blijkt dat er echt heel anders uit te zien. De blauwe achtergrondkleur wordt dan overal even doorzichtig, ongeacht of de achtergrond donker of licht of wat dan ook is. Bij mix-blend-mode is de uiteindelijke kleur mede afhankelijk van de kleur van de achtergrond.

Overigens wordt hierboven gelijk iets anders duidelijk: je moet de juiste kleuren combineren, met de juiste mode. Hierboven is van de foto vrijwel niets meer te zien. Bij de combinatie multiply met blauw verdwijnen de lichte delen van de foto vrijwel helemaal. Aan de andere verdwijnt de achtergrondkleur van de binnenste <div> vrijwel helemaal boven de donkere delen van de foto.

Een bruikbaarder voorbeeld is tekst boven een zwart-witte achtergrond. Hieronder staat een witte tekst binnen een zwart-wit gestreepte <div>. De zwart-witte achtergrond is verkregen, door de achtergrond van de <div> met behulp van repeating-linear-gradient elke 10% van zwart naar wit en omgekeerd te veranderen:

In een <span> binnen de <div> staat de meesterlijke tekst 'ZWART OP WIT OP ZWART', maar dan tig keer herhaald en aan elkaar vast geschreven. De tekst heeft een witte kleur. De <span> heeft mix-blend-mode: difference;, verschil, gekregen.

Zwart is rgb(0, 0, 0). Wit is rgb(255, 255, 255). Het verschil tussen die twee is 255 – 0 = 255. De geblende kleur boven een zwarte achtergrond wordt dus rgb(255, 255, 255), oftewel: wit. Op een zwarte achtergrond blijft de tekst dus gewoon wit.

Op een witte achtergrond is het een ander verhaal. Wit is rgb(0, 0, 0). De waarde van de witte achtergrond is dus hetzelfde als die van de witte tekst. Het verschil tussen beide is nu 0 – 0 = 0. De geblende kleur boven een witte achtergrond wordt dus rgb (0, 0, 0), oftewel: zwart.

Als de lettergrootte wordt veranderd, maakt dat niets uit. Er wordt minder of meer tekst zichtbaar, maar de kleuren veranderen mee. In hele smalle browservensters wordt de tekst eerder afgebroken. Ook dat maakt niet uit: de kleuren passen zich aan. De tekst is automatisch zwart-op-wit, of wit-op-zwart.

In browsers die mix-blend-mode niet ondersteunen, verandert de tekst niet van kleur. In deze browsers valt de witte tekst weg tegen de witte strepen van de achtergrond. Daarom moet voor browsers die mix-blend-mode niet ondersteunen vaak andere css worden opgegeven, dan voor browsers die het wel ondersteunen. Bij @supports (mix-blend-mode: normal) is te zien, hoe dat in het voorbeeld is gedaan.

Je kunt ook bijvoorbeeld twee foto's over elkaar heen zetten. Hieronder staan twee foto's, één van 'n gewone, vlakke zee, en één van iemand die in de zonsondergang op het strand wandelt.

Als je de tweede foto mix-blend-mode: overlay; geeft en over de eerste foto zet, krijg je onderstaand resultaat:

De gewone, vlakke zee is plotsklaps voorzien van wandelaar en zonsondergang.

Het resultaat van dit samenvoegen zal vermoedelijk geen prijs voor de mooiste compositie gaan krijgen op de eerstvolgende World Press Photo. Maar daar gaat het niet om: het laat zien wat de mogelijkheden zijn. Op internet zijn tal van trucs met foto's te vinden, die je op betere ideeën kunnen brengen dan het bovenstaande gefröbel.

En ook hier geldt weer: je moet met @supports controleren, of de browser mix-blend-mode ondersteunt. Een browser die dit niet ondersteunt, toont alleen de tweede foto. Daar moet je dus eventueel de css aanpassen. Bij @supports (mix-blend-mode: normal) is te zien, hoe dat in het voorbeeld is gedaan.

(Er gelden nog wat meer regels bij de hierboven gebruikte modes, maar dit is in grote lijnen, hoe het werkt. Bij de verschillende Modes van mix-blend-mode wordt dit vollediger beschreven.)

Als je nou denkt: hier klopt iets niet bij de berekeningen, dan heb je helemaal gelijk. De waarde voor rood, groen of blauw kan hoogstens 255 zijn. Maar als je bijvoorbeeld rgb(3, 0, 0) vermenigvuldigt met rgb(100, 0, 0), dan wordt rood 3 x 100 = 300. Oeps. En bij 255 x 255 is het nog erger, want dan beginnen sommige mobieltjes erbarmelijk te huilen.

Voordat de browser aan het rekenen slaat, worden de drie waarden voor rood, groen en blauw eerst teruggebracht tot een waarde tussen 0 en 1. Hierdoor kun je nooit een te lage of een te hoge uitkomst krijgen. Na de berekening wordt de uitkomst dan weer terugvertaald naar een voor de kleur bruikbare waarde. Daarnaast zitten er nog wat grenzen bij verschillende modes, zoals dat het resultaat altijd zwart of wit is, of iets daar tussenin.

(In werkelijkheid is het nog veel ingewikkelder. Mensen geven een decimale of hexadecimale waarde op. Die wordt omgerekend naar een getal tussen 0 en 1. Maar een computer werkt met een tweetallig getallenstelsel. Ik krijg al last van ernstige zenuwtics als ik hier langer dan drie seconden over nadenk. En hoe dit kan werken, is me echt 'n compleet raadsel. Alsof je 'n Chinees gedicht naar het Russisch vertaalt, vervolgens naar het Grieks en de Griekse versie laat bewerken door 'n stel Egyptische scholieren. Het resultaat daarvan wordt weer terug vertaald naar het Grieks, dan naar het Russisch en uiteindelijk weer naar het Chinees. En dan blijk je dus als eindresultaat een mooi Chinees gedicht over te houden.)

Er wordt dus eigenlijk gerekend met getallen tussen 0 en 1. Omdat dit het verhaal nog ingewikkelder maakt, dan het al is, wordt dat hier meestal genegeerd. rgb(3, 3, 3) + rgb(4, 4, 4) levert rgb(7, 7, 7) op. De tussenstap van het omrekenen naar en weer terugrekenen van een getal tussen 0 en 1 wordt overgeslagen.

Voor de echte liefhebber zijn de precieze formules van de diverse modes te vinden in de specificatie Compositing and Blending Level 1.

Modes

Blenden kan op zestien verschillende manieren gebeuren, met zestien verschillende 'modes'.

In het bijgesloten voorbeeld wordt met behulp van @supports getest, of een browser mix-blend-mode ondersteunt. Met behulp van @supports kunnen voor browsers die mix-blend-mode niet ondersteunen, andere kleuren worden gebruikt.

Dit testen op ondersteuning is uitermate belangrijk. Als je bij mix-blend-mode kleuren gebruikt die een goed leesbare tekst opleveren, kan die tekst prima volledig onzichtbaar worden, als de browser mix-blend-mode niet ondersteunt. En omgekeerd.

Hieronder wordt elke mode drie keer gebruikt. In totaal zijn er zestien groepjes met in elk groepje drie verschillende voorbeelden. De css en html voor alle zestien modes is precies hetzelfde, alleen de mode bij mix-blend-mode is steeds anders. Alle kleuren en dergelijke zijn precies hetzelfde.

Elk voorbeeld bestaat uit een <div> met een achtergrondkleur.

In elk eerste voorbeeld van elk groepje van drie heeft die <div> de achtergrondkleur rgb(51, 51, 51), donkergrijs.

In het middelste voorbeeld van elk groepje van drie heeft de <div> de achtergrondkleur rgb(204, 204, 204), lichtgrijs.

In het derde voorbeeld van elk groepje van drie heeft de <div> een gradiënt (verlopende kleur): linear-gradient(black, black 10%, red, yellow, green, white, blue 90%, blue). Hier zijn geen rgb-waarden gebruikt, maar gewoon de kleurennamen, omdat het anders tamelijk onleesbaar wordt.

Maar als je dit in rgb-notatie zou willen weergeven, ziet het er zo uit: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0) 10%, rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 128, 0), rgb(255, 255, 255), rgb(0, 0, 255) 90%, rgb(0, 0, 255)). Beide gradiënten hebben precies dezelfde kleuren, omdat kleurennamen in css door de browsers naar getallen worden omgezet.

Omdat deze achtergrond een gradiënt is, verlopende kleuren, kun je goed zien hoe de kleur van de tekst zich aan de achtergrond aanpast.

Omdat de tekst vaak niet helemaal tot de boven- en/of onderkant van de gradiënt doorloopt, hebben boven- en onderkant van de gradiënt over een hoogte van 10% dezelfde kleur.

Binnen elke <div> staan twee <span>'s boven elkaar. Dat geeft de mogelijkheid om voor het bovenste woord een andere kleur te gebruiken dan voor het onderste woord. (Als het woord wat lang is, staat de eerste helft boven en de tweede helft onder.)

In elk eerste en tweede voorbeeld van elk groepje van drie is de kleur van het woord bovenin rgb(51, 51, 51), donkergrijs. De kleur van het woord onderin is rgb(204, 204, 204), lichtgrijs.

In elk derde groepje van drie is de kleur zowel boven- als onderin rgb(204, 204, 204), lichtgrijs.

(Boven elke mode worden deze kleuren kort herhaald, voor het geval je geen geheugenwonder bent.)

Dit levert voor elke mode 5 voorbeelden op: het eerste voorbeeld van elk groepje van drie heeft een donkergrijze achtergrond met bovenin donkergrijze en onderin lichtgrijze tekst. Het tweede voorbeeld heeft een lichtgrijze achtergrond met bovenin donkergrijze en onderin lichtgrijze tekst. Het derde groepje heeft een gradiënt als achtergrond en lichtgrijze tekst.

Zwart en wit zijn niet gebruikt, omdat deze twee uiterste kleuren in veel modes geen enkel effect hebben. (Dat wordt bij de verschillende modes vermeld). Grijs is wat dat betreft ook niet ideaal, maar je ziet in ieder geval meestal iets. Er zijn geen kleuren die bij elke mode een duidelijk zichtbaar resultaat geven.

Elementen niet laten meedoen met blenden

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.

Achtergrondkleurtje.

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

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

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

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.

Slim om te doen vanwege verschillen tussen browsers.

#geen-mix

Het element met id="geen-mix'. Binnen deze <div> staat een melding deze browser mix-blend-mode niet wordt ondersteund. Deze melding wordt alleen weggehaald, als verderop bij @supports (mix-blend-mode: normal) blijkt dat de browser mix-blend-mode ondersteunt.

Als een oudere browser @supports niet ondersteunt, wordt de code bij @supports niet uitgevoerd en blijft deze melding dus staan. Dat is geen probleem, want als een browser @supports niet ondersteunt, ondersteunt die browser zeker mix-blend-mode niet.

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 stylesheet, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

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

Breedte.

Een breedte in procenten is normaal genomen ten opzichte van de ouder van het element. Die ouder is hier <main>, een blok-element. Een blok-element wordt normaal genomen automatisch even breed als z'n ouder. De ouder van <main> is <body>, ook weer een blok-element. Ook <body> wordt hierdoor normaal genomen automatisch weer even breed als z'n ouder <html>. Omdat <html> het buitenste element is, wordt dit normaal genomen even breed als het venster van de browser. Uiteindelijk wordt <div> dus nooit breder dan maximaal 90% van de breedte van het venster, ongeacht hoe breed dit is.

Hier gelijk boven is een breedte van 500 px opgegeven. In browservensters smaller dan 500 px zou hierdoor horizontaal gescrold moeten worden om de volledige tekst in deze <div> te kunnen lezen. Door de breedte te beperken tot maximaal 90% van de breedte van het venster, wordt dit voorkomen.

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

Boven een kleine marge voor wat afstand tot de bovenkant van het browservenster. Onderaan geen marge.

Links en rechts auto, wat hier hetzelfde betekent als evenveel. De <div> staat hierdoor altijd horizontaal gecentreerd binnen z'n ouder <main>, ongeacht de breedte van <main>.

Omdat <main> even breed is als het venster van de browser, zoals iets hierboven bij max-width: 90%; beschreven, staat de <div> horizontaal gecentreerd binnen het venster, ongeacht hoe breed dit is.

Dikke rode rand, zodat de melding (hopelijk) opvalt.

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

#een, #drie

De elementen met id="een" en id="drie". Binnen div#een staat het voorbeeld met de twee foto's bovenaan de pagina, binnen div#drie staan de vier groepjes met gekleurde cirkels onderaan de pagina.

Witte achtergrond.

Hiermee worden deze twee <div>'s in een zogenaamde 'flex container' veranderd. Dit maakt het veel makkelijker om de directe kinderen van die elementen, de 'flex items', netjes verdeeld binnen het venster van de browser neer te zetten.

Oudere browsers ondersteunen flexbox niet en negeren daarom deze regel. De kinderen van div#een en div#drie zijn <p>'s en komen daarom, als blok-element, op een nieuwe regel te staan. Om dit te voorkomen wordt verderop bij #een p en #drie p:not(:last-child) display: inline-block; aan deze <p>'s opgegeven (behalve bij de laatste <p> in div#drie). Hierdoor staan ze ook in oudere browsers niet onder, maar naast elkaar.

(In sommige van die oudere browsers is een verouderde versie van flexbox geïmplementeerd. Die bevat echter zoveel bugs, dat alleen gediplomeerde masochisten die gebruiken.)

Standaard worden kinderen van een flex container naast elkaar gezet. Als die kinderen te breed zijn, worden ze verkleind, of moet je horizontaal scrollen. Met deze regel worden de kinderen, als er te weinig ruimte is, niet naast maar onder elkaar gezet.

Hiermee wordt de horizontale verdeling van de flex items – de directe kinderen van div#een en div#drie – geregeld. Tussen alle <p>'s zit evenveel ruimte. Links van de eerste <p> en rechts van de laatste <p>, dat is helemaal aan de buitenkant, zit half zoveel ruimte als tussen de <p>'s.

Verder hoef je hier niets voor te doen: flexbox verdeelt de overblijvende ruimte automatisch. Als het browservenster smaller of breder wordt, worden de tussenruimtes automatisch aangepast.

Tekst horizontaal centreren.

Deze regel is bedoeld voor browsers die flexbox niet kennen. De <p>'s in div#een en div#drie worden verderop bij #een p en #drie p:not(:last-child) met display: inline-block; in 'n soort combinatie van inline- en blok-element veranderd (behalve de laatste <p> in div#drie). Hierdoor kunnen ze, net als tekst, worden gecentreerd binnen hun ouder.

Het resultaat is iets minder mooi dan bij flexbox, maar de hele handel staat in ieder geval horizontaal gecentreerd.

Normaal genomen wordt een <div> automatisch even breed als z'n ouder. Die ouder is hier <main>. Een breedte in procenten is normaal genomen ten opzichte van de ouder van het element. Met deze regel wordt de breedte van #een en #drie beperkt tot maximaal 95% van de breedte van <main>.

<main> is een blok-element. Een blok-element wordt normaal genomen automatisch even breed als z'n ouder. De ouder van <main> is <body>, ook weer een blok-element. Ook <body> wordt hierdoor normaal genomen automatisch weer even breed als z'n ouder <html>. Omdat <html> het buitenste element is, wordt dit normaal genomen even breed als het venster van de browser. Uiteindelijk worden div#een en div#drie dus nooit breder dan maximaal 95% van de breedte van het venster, ongeacht hoe breed dit is.

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

Aan de bovenkant een kleine marge voor wat afstand tot het erboven zittende element (of bij div#een eventueel tot de bovenkant van het browservenster). Onderaan geen marge.

Links en rechts auto, wat hier hetzelfde betekent als evenveel. De <div> staat hierdoor altijd horizontaal gecentreerd binnen z'n ouder <main>, ongeacht de breedte van <main>.

Omdat <main> even breed is als het venster van de browser, zoals iets hierboven bij max-width: 95%; beschreven, staan div#een en div#drie horizontaal gecentreerd binnen het venster, ongeacht hoe breed dit is.

Zwart randje.

#een p

Alle <p>'s in het element met id="een". Dat zijn er hier drie. In de eerste twee staan de twee foto's met opschrift van het eerste voorbeeld, in de derde staat het onderschrift onder de foto's.

Een <p> is een blok-element en wordt daarom normaal genomen op een nieuwe regel gezet. Maar iets hierboven bij #een, #drie worden de <p>'s met display: flex; veranderd in flex items. Hierdoor staan de eerste twee <p>'s met de foto's niet onder, maar naast elkaar. De derde <p> met het onderschrift past er niet meer naast, die wordt onder de foto's gezet.

Oudere browsers kennen flexbox niet en negeren de bijbehorende eigenschappen. Voor deze browsers is deze regel bedoeld. De <p>'s worden nu een soort kruising tussen een inline- en een blok-element: ze worden naast elkaar gezet, terwijl toch eigenschappen als breedte gebruikt kunnen worden.

Aan alle kanten een marge van 5 px.

Een <p> heeft van zichzelf een marge aan boven- en onderkant. Die wordt hier iets kleiner gemaakt.

In smallere browservensters kunnen de eerste twee <p>'s, en daardoor de erin zittende foto's, tegen elkaar aan komen te staan. De marge links en rechts zorgt dat er altijd wat afstand tussen beide <p>'s is.

In elk van de twee eerste <p>'s zit een <span>, waarin de tekst staat die boven de foto komt te staan. Die <span> wordt gelijk hieronder bij #een span met een absolute positie op de juiste plaats gezet. Om te kunnen positioneren ten opzichte van de <p>, moet de <p> zelf ook een positie hebben. Omdat voor top en dergelijke verder niets wordt opgegeven, heeft dit geen invloed op de <p>'s zelf.

#een span

Alle <span>'s binnen het element met id="een". Binnen div#een zitten twee <span>'s, één met tekst voor boven de eerste foto, en één met tekst voor boven de tweede foto.

Hier wordt gezorgd dat de tekst boven de foto's leesbaar is, door de <span> een doorzichtig witte achtergrond met zwarte tekst te geven. Hierdoor is de tekst ook leesbaar in browsers die mix-blend-mode niet ondersteunen.

Pas als bij @supports (mix-blend-mode: normal) wordt vastgesteld dat een browser mix-blend-mode ondersteunt, worden bij de <span> boven de eerste foto bij #een p:first-of-type span de achtergrond- en voorgrondkleur veranderd.

(Meer over de risico's van onleesbare tekst is te vinden bij Blenden kan dingen, ook tekst, volledig onzichtbaar maken!)

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

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

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

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

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

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

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

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

Omdat in dit voorbeeld drie keer 255 is opgegeven, levert dit een witte kleur op.

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

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

In dit voorbeeld is deze achtergrondkleur behoorlijk doorzichtig: 0.4. Hierdoor zie je de foto nog enigszins door de achtergrond heen, maar is de tekst toch nog leesbaar.

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

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

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

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

De <span> wordt niet breder dan nodig is om de erin zittende tekst weer te geven. Door de lengte van de tekst in de <span> wordt min of meer toevallig de volle breedte van de <p>'s met de foto gevuld, waardoor de tekst netjes horizontaal gecentreerd boven de foto staat. Maar bij een andere tekst, of als de bezoeker de letters heeft verkleind, kan de <span> smaller dan de <p> met de foto worden, en staat de tekst niet meer gecentreerd.

Een breedte in procenten is normaal genomen ten opzichte van de ouder van het element. Door deze regel wordt de <span> altijd even breed als de <p>, en dus ook als de daarin zittende foto.

Dit is min of meer het omgekeerde van gelijk hierboven. Als de bezoeker de lettergrootte heeft verhoogd, kan de tekst – en daarmee de <span> – breder worden dan de <p> met de foto. Maar door deze regel kan de <span> nooit breder worden dan de <p>.

Althans: een woord als 'Koninginnedag' wordt niet afgebroken en zou daardoor nog steeds breder worden dan de <p>, en daardoor buiten de foto komen te staan. Door de overflow-wrap iets hieronder kan 'Koninginnedag' op elke willekeurige plaats worden afgebroken.

Als de bezoeker de lettergrootte heeft verhoogd, past de tekst mogelijk niet meer binnen de <p>. Hiermee wordt de hoogte van de <span> beperkt tot maximaal 160 px.

De foto, en daarmee de <p> waar de foto in zit, is 193 px hoog. Maar in hele smalle browservensters is de foto lager. Daarom is een maximumhoogte genomen, die iets minder is dan 193 px.

Als de tekst niet binnen deze hoogte past, kan de tekst door de overflow: auto; gelijk hieronder worden gescrold. Op deze manier wordt voorkomen dat er tekst verdwijnt.

Als de tekst in de <span> niet binnen de hierboven opgegeven maximumhoogte van 160 px past, kan de tekst worden gescrold. Afhankelijk van browser en besturingssysteem kan rechts van de <span> een scrollbalk worden getoond.

Op de afbeelding hierboven staat links het opschrift zonder maximumbreedte en -hoogte bij de <span>, waardoor de tekst gewoon volledig wordt weergegeven. Het woord 'Vondelpark' verdwijnt volledig onder het eronder zittende element. En als gelijk rechts van de foto een element zou zitten, zou een deel van 'Koninginnedag' daaronder verdwijnen.

Op de afbeelding rechts hierboven is aan de <span> wel een maximumbreedte en -hoogte gegeven, waardoor overflow: auto; werkt. Firefox op Linux toont rechts een scrollbalk. Het woord 'Koninginnedag' is afgebroken achter de tweede 'n', en het woord 'Vondelpark' achter de 'r'. Je moet nu wel scrollen, maar het hele opschrift is te lezen.

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

Deze twee eigenschappen betekenen hetzelfde. word-wrap bestaat al langer en werd door alle browsers ondersteund. Waarop w3c het kennelijk geestig vond om de naam te veranderen naar overflow-wrap. Wat dus precies hetzelfde doet. Wat het nut is van deze verandering? Geen flauw idee. Gelukkig vieren ze bij w3c niet al te vaak feestjes, waarbij kennelijk wat te diep in het glaasje wordt gekeken.

Maar goed. Nog niet alle browsers ondersteunen overflow-wrap;, daarom wordt ook de oudere vorm word-wrap gebruikt.

Normaal genomen zou een lang woord als 'Koninginnedag' niet worden afgebroken. Door deze regel kan het woord op elke willekeurige plaats worden afgebroken, ook midden in een lettergreep.

(Je kunt ook automatisch afbreken aanzetten, maar lang niet alle browsers ondersteunen dit, en zeker niet in het Nederlands. Je zou ook in de html ­ kunnen gebruiken op plaatsen, waar mag worden afgebroken. Maar in beide gevallen levert dit extra afbreekstreepjes op. Dit is 'n simpele oplossing die hier acceptabel is, want de kans op te grote letters is niet zo heel groot.)

Tekst horizontaal centreren.

Om de tekst op de juiste plaats neer te kunnen zetten.

Normaal genomen zou de <span> met de tekst gewoon onder het vorige element komen te staan, onder de foto. Hier moet de tekst echter juist boven de foto komen te staan.

Er wordt gepositioneerd ten opzichte van de eerste voorouder die zelf een positie heeft. Dat is hier de <p>, waar de <span> in zit. Deze heeft bij #een p een relatieve positie gekregen.

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

Normaal genomen zou de <span> gewoon achter het vorige element, de foto, worden neergezet. Nu wordt de <span> met de tekst boven de foto gezet, 30 px vanaf de bovenkant en helemaal links.

#een p:last-child, #twee p:last-child, #drie p:last-child

In div#een, div#twee en div#drie zit respectievelijk het bovenste, het middelste en het onderste voorbeeld. Elk van deze drie <div>'s heeft een aantal kinderen, kleinkinderen, enzovoort.

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

In normale mensentaal: de <p> binnen div#een die het laatste kind is. Dit is de <p> met het onderschrift.

Voor #twee p:last-child en #drie p:last-child geldt precies hetzelfde verhaal, alleen dan binnen div#twee en div#drie.

De selector :last-child kan onverwachte bijwerkingen hebben. De <p>'s met het onderschrift zijn toevallig alle drie het laatste kind van div#een, div#twee en div#drie. Maar er zitten meer laatste kinderen in die <div>'s.

Het eigenlijke voorbeeld in div#een bijvoorbeeld zit in een <p>, en in die <p> zit ook een laatste kind: de <span> met het opschrift voor de foto. Daarom staat er een p voor :last-child: het laatste kind móét een <p> zijn. Hierdoor wordt de <span> met het opschrift niet aangesproken. Zou je de p voor :last-child weglaten, dan blijken er opeens veel meer laatste kinderen te zijn en verandert de lay-out in een ouderwets gezellige familie-reünie met alle laatste kinderen: een puinhoop.

Ook moet je zeker weten dat het te selecteren element inderdaad het laatste kind is. Dat is hier echt het geval: de <p> met het onderschrift is altijd het laatste kind van div#een, div#twee of div#drie. Maar als later aan de html een element toegevoegd zou worden dat na de <p> met het onderschrift komt te staan, is die <p> ineens geen laatste kind meer.

Verder mogen andere elementen binnen div#een, div#twee of div#drie niet ook een <p> als laatste kind hebben. Als bijvoorbeeld binnen div#een een geneste <div> staat met daarin als laatste kind een <p>, zou deze selector ook voor die <p> gelden. Want die is ook 'n laatste kind. (Dit laatste zou je kunnen oplossen door het toevoegen van >: #een > p:last-child. Nu geldt de selector alleen voor directe kinderen van div#een.)

Maar in dit geval is deze selector zonder problemen te gebruiken.

Niet alle hieronder opgegeven eigenschappen zijn voor elk van de drie <p>'s met onderschrift nodig, maar ze veroorzaken geen problemen, als ze niet nodig zijn. Door alles hier te combineren voor de drie <p>'s, spaar je wat css uit.

Witte achtergrond.

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

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

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

Iets verderop bij #twee p wordt de breedte van de <p>'s in div#twee beperkt tot 50% van de breedte van div#twee. De <p> met het onderschrift moet echter even breed zijn als div#twee.

Een breedte in procenten is normaal genomen ten opzichte van de ouder. Hiermee wordt de <p> met het onderschrift in div#twee dus even breed als div#twee.

Iets verderop bij #twee p wordt de lettergrootte van de <p>'s in div#twee vergroot tot 2 em. De <p> met het onderschrift moet echter een gewone lettergrootte krijgen.

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.

Iets verderop bij #twee p wordt de tekst vet gemaakt. De <p> met het onderschrift moet echter gewone tekst krijgen.

Iets eerder bij #een, #drie wordt de tekst in div#een en div#drieM gecentreerd, en iets verderop bij #twee p gebeurt dat met de <p>'s in div#twee. De onderschriften moeten niet worden gecentreerd.

Een <p> heeft van zichzelf een marge aan boven- en onderkant. Die is hier niet welkom.

Iets verderop bij #twee p wordt de border 2 px breed gemaakt. De border rondom de <p> met het onderschrift moet echter slechts 1 px breed zijn.

Lijntje tussen voorbeeld en onderschrift.

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

#twee

Het element met id="twee". In div#twee zit het voorbeeld met het woord 'Raster'.

Achtergrond-afbeelding.

Naast de afbeelding is ook een donkergroene (#399) achtergrondkleur opgegeven. In browsers die mix-blend-mode ondersteunen, wordt de kleur van de tekst aangepast aan de kleur van het eronder zittende element. Oftewel: aan de achtergrond-afbeelding.

Als die afbeelding om een of andere reden niet wordt weergegeven, zou je normaal genomen de beige achtergrondkleur van de pagina zien. De tekst wordt dan geblend met de achtergrondkleur van de pagina. Daarbij blijkt het derde woord 'Raster' volledig weg te vallen tegen de achtergrondkleur van de pagina.

Nu wordt de achtergrondkleur van div#twee, als de achtergrond-afbeelding niet wordt weergegeven, donkergroen. Als de tekst daarmee wordt geblend, is ook het derde woord 'Raster' leesbaar.

Maximumbreedte.

Normaal genomen wordt een blok-element zoals een <div> automatisch even breed als z'n ouder. Hier wordt de breedte beperkt tot 95% van de breedte van de ouder, dat is hier <main>.

<main> is ook een blok-element en wordt daarom normaal genomen ook weer automatisch even breed als z'n ouder. De ouder van <main> is <body>, ook weer een blok-element. Ook <body> wordt hierdoor normaal genomen automatisch weer even breed als z'n ouder <html>. Omdat <html> het buitenste element is, wordt dit normaal genomen even breed als het venster van de browser. Uiteindelijk wordt div#twee dus nooit breder dan maximaal 95% van de breedte van het venster, ongeacht hoe breed dit is.

Hier gelijk boven heeft de <div> een breedte van 95% gekregen, even breed als de erboven staande div#een en de eronder staande div#drie bij #een, #drie hebben gekregen. Hierdoor zijn de drie <div>'s met de voorbeelden alle drie even breed, wat er netter uitziet.

div#twee krijgt hieronder echter links en rechts een padding van 5px en een border van 1 px. Normaal genomen worden padding en border bij de breedte opgeteld, waardoor de breedte van div#twee 1px + 5px + 95% + 5px + 1px wordt, 12 px breder dan div#een en div#drie.

Door deze regel worden padding en border niet bij de breedte opgeteld, maar er binnen gezet. Hierdoor blijft de uiteindelijke breedte van div#twee ook beperkt tot 95% van de breedte van <main>.

Normaal genomen wordt een blok-element zoals een <div> automatisch precies hoog genoeg om de inhoud ervan weer te kunnen geven. Hier echter worden iets verderop bij #twee p de <p>'s met het woord 'Raster' in div#twee naar links gefloat. Daardoor worden deze <p>'s genegeerd voor de hoogte van div#twee. En andere kinderen heeft div#twee niet. Dat betekent dat div#twee niet hoger wordt dan de 10 px padding aan boven- en onderkant, die iets hieronder aan de <div> worden gegeven.

Hier iets boven is aan div#twee een achtergrond-afbeelding gegeven. Een achtergrond-afbeelding heeft zelf geen hoogte en breedte, maar vult alleen het element waar hij in zit. Om de achtergrond van div#twee ook achter de <p>'s met 'Raster' te krijgen, moet div#twee daarom hoger worden gemaakt dan de 10 px van de padding.

Het simpelste kan dat door overflow: hidden; aan div#twee te geven. Dit zorgt voor een nieuwe zogenaamde 'block formatting context', wat in dit geval betekent dat de hoogte van de <p>'s wel meetelt voor de hoogte van div#twee.

(Ook een ander probleem wordt hiermee gelijk opgelost. De onder div#twee zittende div#drie heeft geen minimumbreedte. Daardoor wordt div#drie in de kleine overblijvende ruimte rechts van de gefloate <p>'s uit div#twee geperst. De inhoud van div#drie staat daar vervolgens keurig netjes gecentreerd en zo, maar wel volledig op de verkeerde plaats. Op onderstaande afbeelding is het weliswaar artistieke, maar toch niet tevreden stemmende resultaat te zien, als overflow: hidden; niet wordt gebruikt:

(Overigens zijn er ook andere oplossingen mogelijk. Maar overflow: hidden; is in dit geval een heel eenvoudige oplossing.)

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

Boven een kleine marge voor wat ruimte tussen het bovenste en het middelste voorbeeld. Onderaan geen marge.

Links en rechts auto, wat in dit geval betekent: evenveel. Hierdoor staat div#twee altijd horizontaal gecentreerd binnen z'n ouder <main>, ongeacht de breedte van <main>.

Omdat <main> even breed is als het venster van de browser, zoals wordt iets hierboven wordt beschreven bij max-width: 95%; staat div#twee hierdoor altijd horizontaal gecentreerd binnen het venster, ongeacht hoe breed dit is.

Aan alle kanten kleine ruimte tussen inhoud en buitenkant van de <div>.

Zwart randje.

#twee p

Alle <p>'s in het element met id="twee". Dit zijn de vier <p>'s met 'Raster' en de <p> met het onderschrift daaronder.

Deze css is voor alle vijf de <p>'s, maar de vijfde <p> met het onderschrift ziet er heel anders uit dan de eerste vier <p>'s met 'Raster'. Eerder is bij #een p:last-child, #twee p:last-child, #drie p:last-child een groot deel van onderstaande css voor de <p> met het onderschrift aangepast.

Normaal genomen zou deze css de eerdere css voor de vijfde <p> overrulen, omdat hij deze css later in de stylesheet staat. Maar in dit geval is dat niet zo, omdat de eerdere selector #twee p:last-child meer specificiteit, meer 'gewicht' heeft dan de hier gebruikte selector #twee p. De selector hier heeft één id #twee en één element p. De eerdere selector heeft dat ook, maar heeft ook de pseudo-class :last-child. Daardoor heeft de eerdere selector meer specificiteit en heeft de css bij die selector toch voorrang boven de hier opgegeven css.

Hier gelijk onder worden de <p>'s 50% breed gemaakt, zodat er altijd twee naast elkaar passen. Iets verderop wordt echter aan de <p>'s een border van 2 px gegeven, waardoor de <p>'s niet meer 50%, maar 50% + 4 px breed zijn, want die border wordt bij de breedte opgeteld. (4 px, want ze krijgen links én rechts een border.)

Door deze regel wordt de border niet bij de breedte opgeteld, maar binnen die 50% gezet. Nu passen er toch twee <p>'s naast elkaar.

Breedte 50%.

Een breedte in procenten is normaal genomen ten opzichte van de ouder van het element. Hier is dat div#twee, die bij #twee een breedte van maximaal 95% van de breedte van het browservenster heeft gekregen. In smallere vensters is div#twee daardoor ook smaller, met als gevolg dat ook de <p>'s smaller zijn. Hierdoor past het woord 'Raster' mogelijk niet meer volledig in de <p>. Dat wordt gelijk hieronder bij overflow opgelost.

Zoals gelijk hierboven beschreven past in smalle browservensters het woord 'Raster' mogelijk niet meer volledig in de <p>. Door deze regel wordt het deel dat niet past gewoon afgekapt. Normaal genomen is dat niet zo'n goed idee: als een sprookje te lang is voor een element, is het ietwat kindonvriendelijk om het sprookje dan maar af te kappen en het einde stomweg te verbergen.

Hier is dat echter geen probleem, want dit voorbeeld gaat alleen maar over het aanpassen van de kleur van de tekst aan de achtergrond. Het is geen ramp als een deel van het woord 'Raster' wegvalt. Het is wel een ramp, als dat niet gebeurt. Zoals op de afbeelding is te zien, wordt het dan 'n grote chaos van over elkaar heen staande woorden in de meest woeste kleuren.

Normaal worden blok-elementen zoals een <p> op een nieuwe regel gezet. Door ze naar links te floaten, worden ze naast elkaar gezet. Pas als de regel vol is, wordt een nieuwe regel begonnen.

Omdat de <p>'s iets hierboven 50% breed zijn gemaakt, komen er twee naast elkaar te staan. Met uitzondering van de vijfde <p> met het onderschrift, want die is bij #een p:last-child, #twee p:last-child, #drie p:last-child 100% breed gemaakt en komt dus op een eigen regel te staan.

Lekker grote letter, zodat het effect van het blenden goed zichtbaar is.

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.

Als de bezoeker de lettergrootte verhoogd, past het woord 'Raster' mogelijk niet meer in de <p>. In de hoogte is dat geen probleem, want omdat geen hoogte is opgegeven, groeit de hoogte van de <p> gewoon mee met de lettergrootte.

Maar in de breedte kan 'Raster' wel te breed worden. Dat maakt niets uit, want door het iets hierboven opgegeven overflow: hidden; wordt het te veel gewoon afgekapt. Normaal genomen is dat geen goed idee, maar voor dit voorbeeld maakt het niets uit als een deel van het woord 'Raster' verdwijnt.

Vette letter, zodat het effect van het blenden beter is te zien.

Een vette letter is een apart ontworpen font, waarbij lang niet alle delen van een letter even veel vetter worden. Vaak wordt zelfs de vorm van een letter volledig veranderd. Als een font geen vette letter heeft, imiteert de browser een vette letter door een normale letter vet te maken. Er wordt met 'n soort verfroller over de letter gegaan, waarbij gewoon alles dikker wordt gemaakt. Elke grafisch ontwerper krijgt van het resultaat een acute depressie.

Op deze site worden overwegend de fonts Arial en Helvetica gebruikt, omdat deze in (vrijwel) elke computer zijn geïnstalleerd. Deze fonts hebben ook vette fonts, dus hier gaat het goed. Maar als je bij een font zonder aparte vette variant font-weight: bold; gebruikt, kun je prima 'n heel lelijk resultaat krijgen.

De tekst staat in een <span>, een inline-element. Door deze regel wordt die <span> horizontaal gecentreerd binnen de <p>, en daarmee de daarin zittende tekst ook.

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

Van zichzelf heeft een <p> een marge aan boven- en onderkant. Hier blijft alleen de marge aan de onderkant staan. Deze zorgt voor 'n kleine afstand tussen twee boven elkaar staande <p>'s met 'Raster', en voor 'n kleine afstand tussen de onderste <p> met 'Raster' en de <p> met het onderschrift.

Randje van 2 px breed.

#twee span

Alle <span>'s binnen het element met id="twee". Het woord 'Raster' zit binnen een <span>. In totaal zijn er vier <span>'s, één voor elk woord.

Enigszins doorzichtig witte achtergrond. Hoe rgba() precies werkt, is te vinden bij background: rgba(255, 255, 255, 0.4);. Het enige verschil is dat de doorzichtigheid hier iets minder is.

Op de afbeelding is te zien hoe de doorzichtige achtergrond, in combinatie met de gelijk hieronder opgegeven zwarte voorgrondkleur voor de tekst, eruit ziet. Het is niet het effect dat je met blenden krijgt, maar de tekst is in ieder geval leesbaar. En de achtergrond-afbeelding is vaag te zien, omdat de achtergrondkleur enigszins doorzichtig is.

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

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

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

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

Boven en onder geen padding, links en rechts 10 px. In dit geval zorgt dit er alleen maar voor, dat de <span> iets breder wordt dan de erin zittende tekst. Hierdoor wordt ook de achtergrondkleur iets breder dan de tekst. Als dat niet zo zou zijn, zou de achtergrondkleur precies op de rand van de tekst worden afgekapt, wat 'n beetje Hitchkock-achtig overkomt.

(Hitchkock? Is dat een haperende kok of zoiets? Nou nee. Maar zoek even op internet en er gaat een hele prehistorische culturele wereld voor je open...)

#drie p:not(:last-child)

In div#drie zit het onderste voorbeeld. Deze <div> heeft een aantal kinderen, kleinkinderen, enzovoort.

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

In normale mensentaal: alle <p>'s binnen div#drie, behalve de <p>'s die laatste kind. Dit zijn de vier <p>'s met in elk een groep cirkels.

De selector :last-child, en daarmee ook de omgekeerde selector :not(:last-child) kan onverwachte bijwerkingen hebben. De <p> met het onderschrift is het laatste kind van div#drie. Deze <p> moet anders worden behandeld dan de eerste vier <p>'s.

Maar er zitten meer laatste kinderen in div#drie. Elke cirkel zit bijvoorbeeld in een <span> binnen een <p>. Al deze <span>'s, behalve de laatste, zouden ook worden geselecteerd door :not(:last-child).

Daarom staat er een p voor :not(:last-child): het mogen alleen <p>'s zijn. Hierdoor worden de <span>'s met de cirkels niet aangesproken. Zou je de p voor :not(:last-child) weglaten, dan blijken in div#drie opeens heel veel eerste, tweede, derde, enzovoort kinderen te zijn.

Ook moet je zeker weten dat het element dat niet geselecteerd moet worden, inderdaad het laatste kind is. Dat is hier echt het geval: de <p> met het onderschrift is altijd het laatste kind van div#drie. Maar als later aan de html een element toegevoegd zou worden dat na de <p> met het onderschrift komt te staan, is die <p> ineens geen laatste kind meer.

Verder mogen andere elementen binnen div#drie geen <p>'s als kind hebben. Als binnen div#drie een geneste <div> staat met daarin 'n aantal <p>'s, zou deze selector ook voor die <p>'s gelden, met uitzondering van de laatste <p>. (Dit laatste zou je in dit geval kunnen oplossen door het toevoegen van >: #drie > p:not(:last-child). Nu geldt de selector alleen voor directe kinderen van div#drie.)

Maar hier is deze selector zonder problemen te gebruiken, want het onderschrift zit per definitie in de laatste <p>.

Een <p> is een blok-element en wordt daarom normaal genomen op een nieuwe regel gezet. Maar eerder bij #een, #drie zijn de <p>'s met display: flex; veranderd in flex items. Hierdoor staan de eerste vier <p>'s met de groepen cirkels niet onder, maar naast elkaar. De vijfde <p> met het onderschrift is bij #een p:last-child, #twee p:last-child, #drie p:last-child 100% breed gemaakt en komt daarom op een nieuwe regelt e staan.

Oudere browsers kennen flexbox niet en negeren de bijbehorende eigenschappen. Voor deze browsers is deze regel bedoeld. De <p>'s worden in een soort kruising tussen een inline- en een blok-element veranderd. Ze worden, net als een inline-element, naast elkaar gezet. Maar eigenschappen als breedte, die normaal genomen alleen bij een blok-element gebruikt kunnen worden, zijn toch te gebruiken.

Normaal genomen wordt een blok-element zoals een <p> automatisch even breed als z'n ouder. Hier is dat echter niet het geval, omdat de <p>'s eerder bij #een, #drie met display: flex; zijn veranderd in flex items. Als de browser flexbox niet ondersteunt, gedragen de <p>'s zich, wat de breedte betreft, als een inline-element. In beide gevallen worden de <p>'s niet breder dan nodig is.

Normaal genomen zou de breedte dan worden bepaald door de inhoud van de <p>'s, maar ook dat is hier niet het geval. In elke <p> zitten acht <span>'s. In de eerste zeven <span>'s zit 'n cirkel, in de achtste <span> zit het onder de cirkels staande woord. Al deze <span>'s zijn absoluut gepositioneerd. Dat betekent dat ze geen invloed hebben op de breedte van de <p>'s.

Omdat er buiten de acht <span>'s niets in de <p>'s zit, zijn deze in feite leeg, wat betreft de breedte. De hele <p> bestaat in de breedte in feite uit niet meer dan de iets hieronder opgegeven borders van 2 px breed links en rechts, samen 4 px breed.

Er zijn nu twee mogelijkheden, wat betreft de weergave.

Als de browser flexbox kent, worden de vier <p>'s met cirkels netjes horizontaal verdeeld. Als het venster van de browser te smal wordt, worden één of meer <p>'s op de volgende regel gezet. Dat is precies wat er nu ook gebeurt, alleen zijn de <p>'s dus slechts de 4 px van de border breed, zoals op de afbeelding hieronder is te zien:

De cirkels staan min of meer op de juiste plaats, maar de woorden onder de cirkels zijn zo kort mogelijk afgebroken, omdat ze in een absoluut gepositioneerde <span> zonder breedte zitten. De dikkere zwarte verticale lijnen zijn de borders van de vier <p>'s, waarbinnen de cirkels staan. Slechts een armzalige verticale border is overgebleven van de eens zo fiere <p>, die de cirkels ooit volledig omsloot met een fraaie border. De <p>'s staan nog steeds netjes horizontaal verdeeld, dat wel.

Bij de paar browsers die flexbox nog niet ondersteunen, is het resultaat nog, tja, aparter, getuige onderstaande afbeelding:

Ook hier hebben de vier <p>'s geen breedte en zijn alleen de borders te zien. Maar nu worden ze niet netjes horizontaal verdeeld neergezet. Omdat ze als inline-block worden weergegeven, worden ze gewoon naast elkaar gezet, net als tekst. De kleine ruimte die je nog ziet tussen de borders ontstaat door de marge van 5 px die iets hieronder aan de <p>'s wordt gegeven. Bovendien staat elke <p> in de html op een nieuwe regel, en in dat geval wordt er automatisch een spatie tussen de inline-block elementen gezet. Zou je de <p>'s in de html op dezelfde regel zetten en de marge weghalen, dan zou je één verticale lijn van 4 x 4 = 16 px overhouden: alle borders tegen elkaar aan.

Omdat de in de <p>'s zittende <span>'s worden gepositioneerd ten opzichte van de <p>'s, komen deze nu grotendeels over elkaar heen te staan.

Al deze ellende is simpel op te lossen door de <p>'s een breedte te geven. Omdat de cirkels eigenlijk gewone letters 'o' zijn, die sterk vergroot worden weergegeven, wordt als eenheid em genomen en niet een absolute eenheid als px. Hierdoor verandert de breedte mee met de lettergrootte.

Hiervoor geldt hetzelfde verhaal als hierboven bij width: 1.5em; staat, maar nu voor de hoogte. Zonder deze hoogte is alleen een border van 4 px breed aan de bovenkant te zien. De horizontale verdeling blijft wel bestaan, want dit gaat alleen over de hoogte.

De hoogte is met 1,6 em iets groter dan de breedte van 1,5 em, omdat onder de cirkels nog een woord komt te staan.

Hele grote letter.

De cirkels zijn doodgewone letters 'o', maar dan heel groot. Het is niet echt nodig de lettergrootte in de relatieve maat em op te geven, want leesbaar zijn ze echt wel in deze maat. Maar sommige browsers veranderen een lettergrootte in de absolute eenheid px wel en andere niet. Daarom is toch voor de eenheid em gekozen, want die verandert in alle browsers, waarin je de lettergrootte kun aanpassen.

Hierboven zijn ook breedte en hoogte in em opgegeven, waardoor bij een andere lettergrootte alles met de lettergrootte mee verandert en alle verhoudingen bewaard blijven. Bij gebruik van een absolute eenheid als px zou dat niet het geval zijn.

Vette letter. Hierdoor worden de cirkels nog wat breder.

Een vette letter is een apart ontworpen font, waarbij lang niet alle delen van een letter even veel vetter worden. Vaak wordt zelfs de vorm van een letter volledig veranderd. Als een font geen vette letter heeft, imiteert de browser een vette letter door een normale letter vet te maken. Er wordt met 'n soort verfroller over de letter gegaan, waarbij gewoon alles dikker wordt gemaakt. Elke grafisch ontwerper krijgt van het resultaat een acute depressie.

Op deze site worden overwegend de fonts Arial en Helvetica gebruikt, omdat deze in (vrijwel) elke computer zijn geïnstalleerd. Deze fonts hebben ook vette fonts, dus hier gaat het goed. Maar als je bij een font zonder vette variant font-weight: bold; gebruikt, kun je prima 'n heel lelijk resultaat krijgen.

Kleine marge aan alle kanten.

De marge links en rechts is niet van belang voor bredere browservensters in browsers die flexbox ondersteunen. Maar voor browsers die flexbox niet ondersteunen en de <p>'s met behulp van het iets hierboven opgegeven display: inline-block; naast elkaar zetten, zorgt de marge voor wat afstand tussen de <p>'s.

In smallere browservensters is de marge ook nodig voor browsers die flexbox wel ondersteunen, want anders worden de <p>'s bij bepaalde breedtes van het venster te dicht bij elkaar, of zelfs tegen elkaar aan, neergezet.

Randje rondom.

De <span>'s met de de cirkels zitten in deze <p>'s en worden gepositioneerd ten opzichte van deze <p>'s. Om dat te kunnen doen, moeten de <p>'s zelf een positie hebben. Omdat voor top en dergelijke verder niets wordt ingevuld, heeft dit geen invloed op de <p>'s zelf.

#drie span

Alle <span>'s in het element met id="drie". In div#drie zitten vier <p>'s, één voor elk groepje cirkels. Binnen elke <p> zitten zeven <span>'s met een cirkel (eigenlijk 'n grote letter 'o'), en als laatste één <span> met het woord 'mix-blend-mode' of 'opacity'.

De <span>'s, en daarmee de erin zittende cirkels, enigszins doorzichtig maken. Waar de cirkels elkaar overlappen, verandert de kleur hierdoor enigszins. Dit is bedoeld voor browsers die mix-blend-mode niet ondersteunen in een armzalige poging het blenden enigszins te imiteren.

Om de <span>'s, en daarmee de erin zittende cirkel of woord, op de juiste plaats neer te kunnen zetten.

Er wordt gepositioneerd ten opzichte van de eerste voorouder die zelf een positie heeft. Dat is hier de <p>, waar de betreffende <span> in zit. Deze hebben bij #drie p:not(:last-child) een relatieve positie gekregen.

#drie span:first-of-type

In div#drie zit het onderste voorbeeld: de vier groepen cirkels. Elke groep zit in een eigen <p>, er zijn dus vier <p>'. Elke <p> heeft een aantal kinderen: zeven <span>'s met 'n cirkel, en één <span> met het woord onder die cirkels.

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

In normale mensentaal: elke eerste <span> binnen div#drie.

In dit geval zijn de <span>'s geen directe kinderen van div#drie, maar van één van de vier daarin zittende <p>'s. Dat maakt echter niets uit, het gaat om elke <span> die een eerste kind is binnen div#drie. En de <span>'s binnen de <p>'s vallen hier ook onder. Dit zijn de vier <span>'s, waarin de eerste cirkel zit.

De selector :first-of-type (of :nth-of-type()) kan onverwachte bijwerkingen hebben. In dit geval zitten er maar vier series <span>'s in div#drie, één in elke <p>. Maar als binnen div#drie bijvoorbeeld nog 'n geneste <div> zou zitten, waarin ook <span>'s zouden zitten, zou deze selector ook voor die <span>'s gelden. (Dit zou je in dit geval kunnen oplossen door het toevoegen van p: #drie p span:first-of-type. Nu geldt de selector alleen voor nakomelingen van een <p> binnen div#drie.)

Rode voorgrondkleur. Dit is ook de kleur van de tekst. Omdat de cirkel een gewone letter 'o' is, die alleen wat uit z'n krachten is gegroeid, krijgt hiermee de eerste cirkel binnen elk van de vier <p>'s een rode kleur.

De <span>, en daarmee de erin zittende cirkel, op de juiste plaats zetten.

Als eenheid is de relatieve eenheid em genomen, omdat deze mee verandert met de lettergrootte. Bij #drie p:not(:last-child) is aan de de <p>'s (met uitzondering van de laatste <p> met het onderschrift) ook een breedte, hoogte en lettergrootte in em gegeven. Omdat al deze maten mee veranderen met een eventuele andere lettergrootte, blijven de cirkels ook bij een andere lettergrootte netjes op hun plaats staan ten opzichte van elkaar.

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

In deze zes <span>'s staan de tweede tot en met zevende cirkel. Het verhaal is precies hetzelfde als voor de eerste <span> bij #drie span:first-of-type, alleen is de selector :first-of-type vervangen door :nth-of-type(), met tussen de haakjes het volgnummer van de <span>. Verder hebben color, top en left andere waarden, omdat de <span>'s een andere kleur en positie moeten krijgen.

#drie span:last-of-type

Deze selector is het tweelingzusje van #drie span:first-of-type. Maar dan wel 'n twee-eiige tweeling, want ze zien er totaal anders uit. Hoe deze selector werkt is beschreven bij #drie span:first-of-type, alleen gaat het hier niet om de eerste, maar om de laatste <span>: de <span> met het woord onder de cirkels. Deze <span> ziet er anders uit dan de zeven <span>'s met de cirkels, en dat wordt hier geregeld.

:last-of-type is een handige selector, want ook al wordt er een <span> voor gezet, deze <span> blijft altijd de laatste <span>.

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 stylesheet, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

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

Een <span> is een inline-element. Een inline-element kan normaal genomen geen breedte krijgen. Maar bij #drie span is de <span> absoluut gepositioneerd, waardoor deze in een soort blok-element is veranderd. Daardoor kan deze eigenschap toch worden gebruikt.

Een breedte in procenten is normaal genomen ten opzichte van de ouder van het element. Dat is hier de <p>, waarbinnen de cirkels staan. Hierdoor wordt de <span> even breed als deze <p>, waardoor het woord in de <span> netjes onder de cirkels geplaatst kan worden.

Dit is een onleesbaar kleine letter. Zou je denken, maar dat klopt niet. Bij #drie p:not(:last-child) is de lettergrootte verhoogd naar 7 em. Omdat ook deze <span>'s binnen die <p>'s zitten, geldt die lettergrootte ook voor deze <span>'s.

Deze kleine lettergrootte geldt dus ten opzichte van de lettergrootte van 7 em. De uiteindelijke lettergrootte wordt hierdoor 0,15 x 7 = 1,05 em, wat een vrijwel normale lettergrootte is. (Je wilt het woord 'mix-blend-mode' echt niet zien in een grootte van 7 em...)

Als eenheid wordt de relatieve eenheid em gebruikt, omdat bij gebruik van een absolute eenheid zoals px niet alle browsers de lettergrootte kunnen veranderen. Omdat ook voor de cirkels en dergelijke de eenheid em is gebruikt, blijft het woord ook bij een andere lettergrootte netjes onder de cirkels staan.

Bij #drie p:not(:last-child) is een vette letter opgegeven. Hier wordt dat voor deze <span>'s weer veranderd naar een normale dikte.

Tekst horizontaal centreren.

De de zeven <span>'s met cirkels worden later geblend in browsers die mix-blend-mode ondersteunen. De tekst in deze <span>'s moet niet worden geblend. Dit wordt hier al opgegeven, omdat er dan verderop geen css voor deze <span>'s meer hoeft te worden opgegeven. Browsers die mix-blend-mode niet ondersteunen, negeren deze regel gewoon.

De <span>'s helemaal onderaan en helemaal links binnen hun <p> zetten. Omdat ze iets hierboven met width: 100%; even breed zijn gemaakt als de <p>, staat de tekst in de <span>'s nu netjes onder de cirkels.

@supports (mix-blend-mode: normal)

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

De css die binnen deze 'feature query' staat, geldt alleen voor browsers die mix-blend-mode: normal; ondersteunen. (Er bestaat geen goede Nederlandse vertaling voor 'feature query'. Het is een vraag of een bepaalde eigenschap en waarde worden ondersteund: iets als 'eigenschap vraag'.)

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:

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

Je kunt ook als voorwaarde opgeven dat meerdere eigenschappen (en/of waarden) moeten worden ondersteund, of dat een eigenschap juist niet mag worden ondersteund, maar dat gebeurt hier allemaal niet. Hier is de enige voorwaarde dat mix-blend-mode: normal; wordt ondersteund.

Er wordt hier alleen getest op mix-blend-mode: normal;. Dat wil zeggen dat de browser déze eigenschap met déze specifieke waarde moet ondersteunen. In theorie zou de browser dus mix-blend-mode: normal; wel kunnen ondersteunen, maar mix-blend-mode: difference; niet.

In dit voorbeeld worden bij mix-blend-mode alleen de waarden 'normal', 'difference' en 'color-dodge' gebruikt. Elke browser die de waarde 'normal' ondersteunt, ondersteunt ook 'difference' en 'color-dodge'. Vandaar dat de test op alleen 'normal' hier voldoende is. Maar Safari bijvoorbeeld ondersteunt de waarden 'hue', 'saturation', 'color' en 'luminosity' bij mix-blend-mode niet. Als je één van die waarden zou willen gebruiken, moet je dus ook daarop testen, om voor Safari de css aan te kunnen passen.

Op de pagina met links zijn onder het kopje CSS → Browser supports link naar sites over browser support te vinden. In dit geval is daar gevonden dat alle browsers de genoemde drie waarden ondersteunen, en dat Safari de genoemde vier waarden niet ondersteunt. (Het is trouwens wel verstandig altijd nog even te controleren of die sites wel helemaal de juiste informatie geven. In het algemeen is de informatie op de sites die op de pagina met links worden genoemd uitstekend, maar er kan altijd 'n foutje in sluipen.)

Alleen browsers die mix-blend-mode: normal; ondersteunen, voeren de css binnen deze feature query uit. Oudere browsers kennen @supports niet en voeren de css binnen deze feature query daarom niet uit. Dat kan een probleem zijn. Stel dat je op het ondersteunen van @supports (display: block) gaat testen. Elke browser ondersteunt dat, maar browsers die @supports niet ondersteunen, zullen de css voor display: block; toch niet uitvoeren.

Dit is natuurlijk een idioot voorbeeld, want je gaat niet testen op iets dat alle browsers al sinds het Stenen Tijdperk ondersteunen. Het illustreert alleen een potentieel probleem. In dit geval speelt dat niet, omdat elke browser die mix-blend-mode ondersteunt, ook @supports ondersteunt.

(Het omgekeerde is niet het geval: Internet Explorer bijvoorbeeld ondersteunt @supports wel, maar mix-blend-mode niet.)

Hoe dan ook voeren alle browsers die mix-blend-mode niet ondersteunen de css binnen deze feature query niet uit. Omdat de kleuren bij wel of niet blenden volkomen verschillend zijn, is dat uiterst belangrijk. Je kunt met blenden (of juist met niet-blenden) bijvoorbeeld tekst volledig laten verdwijnen, als je niet oppast. Meer hierover is te vinden bij Blenden kan dingen, ook tekst, volledig onzichtbaar maken!

#een p:first-of-type span

In div#een zit het bovenste voorbeeld: de twee foto's. Elke foto zit in een eigen <p>, er zijn dus twee <p>'s.

Kinderen van dezelfde ouder kunnen worden geteld, net zoals dat bij kinderen uit een gezin het geval is: eerste kind, tweede kind, derde kind, enzovoort. Je kunt ook alleen 'n bepaald soort element tellen, net zoals je alleen kinderen van ouder of jonger dan zes jaar kunt tellen. Met de selector :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 selector: :first-of-type.

In normale mensentaal: de <span> met het opschrift van de foto in de eerste <p>, de <p> met de linkerfoto.

De selector :first-of-type kan onverwachte bijwerkingen hebben. In dit geval zit er maar één serie <p>'s in div#een. Maar als binnen div#een bijvoorbeeld nog 'n geneste <div> zou zitten, waarin ook <p>'s zouden zitten, zou deze selector ook voor de eerste <p> in die geneste <div> gelden. (Dit zou je in dit geval bijvoorbeeld kunnen oplossen door het toevoegen van >: #een > p:first-of-type span. Nu geldt de selector alleen voor <p>'s die een direct kind van div#een zijn.)

De bij #een span opgegeven doorzichtig witte achtergrond weghalen.

Omdat de achtergrond pas binnen de feature query @supports (mix-blend-mode: normal) wordt weggehaald, wordt hij alleen weggehaald in browsers die mix-blend-mode ondersteunen. Er is dus geen kans op een nadelige werking voor browsers die mix-blend-mode niet ondersteunen.

De bij #een span opgegeven voorgrondkleur in 'n soort lichtroze veranderen. Dit is ook de kleur van de tekst.

Omdat de kleur pas binnen de feature query @supports (mix-blend-mode: normal) wordt veranderd, wordt hij alleen veranderd in browsers die mix-blend-mode ondersteunen. Er is dus geen kans op een nadelige werking voor browsers die mix-blend-mode niet ondersteunen.

Verander de tekstkleur in het verschil tussen de gelijk hierboven opgegeven voorgrondkleur en de erachter zittende foto. Omdat pixel voor pixel wordt bekeken, verschilt de tekst overal van de achtergrond. Over deze mode is meer te vinden bij difference.

Hieronder staat twee keer dezelfde foto met het zelfde opschrift. Html en css zijn precies hetzelfde, met één verschil: de voorgrondkleur, wat ook de kleur van de tekst is:

Bij de mode 'difference' wordt het verschil tussen de voorgrondkleur en de daarachter zittende foto gebruikt.

Links is een voorgrondkleur gebruikt, die een nauwelijks leesbare tekst oplevert. Rechts is de lichtroze voorgrondkleur gebruikt. Deze verschilt overal behoorlijk van de foto, dus er is overal een behoorlijk verschil tussen beide kleuren. De tekst is duidelijk te lezen.

Hieruit blijkt duidelijk, waarom het belangrijk is de juiste mode met de juiste kleuren te kiezen. Waarbij ook gelet moet worden op browsers die mix-blend-mode niet ondersteunen, om te voorkomen dat je 'n kleur kiest die in die browsers niet genoeg contrast heeft. Daarover is meer te lezen bij Blenden kan dingen, ook tekst, volledig onzichtbaar maken!

#twee p:first-of-type span

In div#twee zit het middelste voorbeeld: de vier woorden 'Raster'. Elk 'Raster' zit in een eigen <p>, er zijn dus vier <p>'s.

Kinderen van dezelfde ouder kunnen worden geteld, net zoals dat bij kinderen uit een gezin het geval is: eerste kind, tweede kind, derde kind, enzovoort. Je kunt ook alleen 'n bepaald soort element tellen, net zoals je alleen kinderen van ouder of jonger dan zes jaar kunt tellen. Met de selector :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 selector: :first-of-type. Voor alle latere elementen gebruik je 'n soortgelijke selector, maar dan met een volgnummer: :nth-of-type(). Tussen de haakjes komt het volgnummer. :nth-of-type(1) is precies hetzelfde als :first-of-type, maar de laatste is wat mensvriendelijker.

In normale mensentaal: de <span> met het woord 'Raster' in de eerste <p>, de <p> linksboven in het tweede voorbeeld.

De selector :first-of-type kan onverwachte bijwerkingen hebben. In dit geval zit er maar één serie <p>'s in div#twee. Maar als binnen div#twee bijvoorbeeld nog 'n geneste <div> zou zitten, waarin ook <p>'s zouden zitten, zou deze selector ook voor de <span>'s in de eerste <p> in die geneste <div> gelden. (Dit zou je in dit geval bijvoorbeeld kunnen oplossen door het toevoegen van >: #twee > p:first-of-type span. Nu geldt de selector alleen voor <p>'s die een direct kind van div#twee zijn.)

Omdat deze <span> niet wordt geblend, is de weergave van deze <span> in elke browser hetzelfde, of die nou mix-blend-mode ondersteunt of niet.

De eerder bij #twee span opgegeven doorzichtig witte achtergrondkleur veranderen in massief wit.

Omdat de achtergrondkleur pas binnen de feature query @supports (mix-blend-mode: normal) wordt veranderd, wordt hij alleen veranderd in browsers die mix-blend-mode ondersteunen. Er is dus geen kans op een nadelige werking voor browsers die mix-blend-mode niet ondersteunen.

#twee p:nth-of-type(2) span

Deze selector werkt precies hetzelfde als die bij #twee p:first-of-type span, alleen gaat het nu om de <span> met het woord 'Raster' uit de tweede <p> in div#twee, de 'Raster' rechtsboven.

De eerder bij #twee span opgegeven doorzichtig witte achtergrondkleur verwijderen.

Omdat de achtergrondkleur pas binnen de feature query @supports (mix-blend-mode: normal) wordt verwijderd, wordt hij alleen verwijderd in browsers die mix-blend-mode ondersteunen. Er is dus geen kans op een nadelige werking voor browsers die mix-blend-mode niet ondersteunen.

Omdat deze <span> geen achtergrondkleur meer heeft, heeft het iets hieronder opgegeven mix-blend-mode: difference; geen invloed op de achtergrond. Alleen de tekst in de <span> wordt geblend, de doorzichtige achtergrond niet.

De eerder bij #twee span opgegeven voorgrondkleur veranderen. Dit is ook de kleur van de tekst.

Omdat de kleur pas binnen de feature query @supports (mix-blend-mode: normal) wordt veranderd, wordt hij alleen veranderd in browsers die mix-blend-mode ondersteunen. Er is dus geen kans op een nadelige werking voor browsers die mix-blend-mode niet ondersteunen.

Schaduw bij de letters van het woord 'Raster'.

De eerste waarde regelt de horizontale verplaatsing. Omdat het positief is, komt de schaduw 8 px rechts van de tekst te staan. Bij een negatieve waarde zou de schaduw links van de tekst komen te staan.

De tweede waarde regelt de verticale verplaatsing. Omdat het positief is, komt de schaduw 8 px onder de tekst te staan. Bij een negatieve waarde zou de schaduw boven de tekst komen te staan.

Je kunt nog een derde waarde opgeven: de lengte waarover de schaduw vervaagt. Als je hier niets invult, zoals hier het geval is, vervaagt de schaduw niet.

Als laatste wordt een kleur ingevuld. Als je geen kleur invult, wordt de voorgrondkleur (dezelfde kleur als de tekst) gebruikt.

Ook de schaduw wordt door het hieronder staande mix-blend-mode: difference; geblend met de achtergrond met het raster.

Verander de voorgrondkleur (de tekst en de schaduw) in het verschil tussen de onder de <span> zittende kleur van de achtergrond-afbeelding met het raster en de iets hierboven opgegeven voorgrond- en schaduwkleur. Omdat pixel voor pixel wordt bekeken, is de achtergrond-afbeelding door de tekst en de schaduw heen te zien, terwijl de tekst toch goed leesbaar blijft. Over deze mode is meer te vinden bij difference.

#twee p:nth-of-type(3) span

Deze selector werkt precies hetzelfde als die bij #twee p:first-of-type span, alleen gaat het nu om de <span> met het woord 'Raster' uit de derde <p> in div#twee, de 'Raster' linksonder.

De eerder bij #twee span opgegeven doorzichtig witte achtergrondkleur verwijderen.

Omdat de achtergrondkleur pas binnen de feature query @supports (mix-blend-mode: normal) wordt verwijderd, wordt hij alleen verwijderd in browsers die mix-blend-mode ondersteunen. Er is dus geen kans op een nadelige werking voor browsers die mix-blend-mode niet ondersteunen.

Omdat deze <span> geen achtergrondkleur meer heeft, heeft het iets hieronder opgegeven mix-blend-mode: color-dodge; geen invloed op de achtergrond. Alleen de tekst in de <span> wordt geblend, de doorzichtige achtergrond niet.

De eerder bij #twee span opgegeven voorgrondkleur veranderen. Dit is ook de kleur van de tekst.

Omdat de kleur pas binnen de feature query @supports (mix-blend-mode: normal) wordt veranderd, wordt hij alleen veranderd in browsers die mix-blend-mode ondersteunen. Er is dus geen kans op een nadelige werking voor browsers die mix-blend-mode niet ondersteunen.

Blend de voorgrondkleur (de tekst) met de onder de <span> zittende kleur van de achtergrond-afbeelding met het raster met de mode 'color-dodge'. Omdat pixel voor pixel wordt bekeken, is de achtergrond-afbeelding door de tekst heen te zien, terwijl de tekst toch goed leesbaar blijft. Over deze mode is meer te vinden bij color-dodge.

#twee p:nth-of-type(4) span

Deze selector werkt precies hetzelfde als die bij #twee p:first-of-type span, alleen gaat het nu om de <span> met het woord 'Raster' uit de vierde <p> in div#twee, de 'Raster' rechtsonder.

De eerder bij #twee span opgegeven doorzichtig witte achtergrondkleur veranderen in massief wit.

Omdat de achtergrondkleur pas binnen de feature query @supports (mix-blend-mode: normal) wordt veranderd, wordt hij alleen veranderd in browsers die mix-blend-mode ondersteunen. Er is dus geen kans op een nadelige werking voor browsers die mix-blend-mode niet ondersteunen.

Aan alle kanten een padding van 50 px. Omdat de hier gelijk boven opgegeven achtergrondkleur doorloopt onder de padding, staat de achtergrond ook 50 px rechts en links van de tekst. (Geen witte achtergrond, want de achtergrondkleur van de <span> wordt geblend met de eronder zitten achtergrond-afbeelding met het raster.)

Boven en onder is geen padding te zien. De <span>'s zitten in een <p>, die geen hoogte of regelhoogte heeft gekregen. Daarom wordt de <p> niet hoger dan nodig is om de erin zittende tekst weer te geven. En omdat bij #twee p bij de <p> overflow: hidden; is opgegeven, valt de padding boven en onder weg. Als je overflow: hidden; weg zou halen bij de <p>, zou de padding boven en onder ook aanwezig zijn, zoals op de afbeelding is te zien.

Verander de voorgrondkleur, dat is ook de kleur van de tekst, in het verschil tussen de voorgrondkleur en de achtergrondkleur van de <span>. Verander het resultaat daarvan vervolgens in het verschil met de achter de <span> zittende achtergrond-afbeelding met het raster.

Omdat pixel voor pixel wordt bekeken, is de achtergrond-afbeelding door de tekst heen te zien, terwijl de tekst toch goed leesbaar blijft. Over deze mode is meer te vinden bij difference.)

#drie span

Alle <span>'s in het element met id="drie". In div#drie zitten vier <p>'s, één voor elk groepje cirkels. Binnen elke <p> zitten zeven <span>'s met een cirkel (eigenlijk 'n grote letter 'o'), en als laatste één <span> met het woord 'mix-blend-mode' of 'opacity'.

De eerder bij #drie span opgegeven gedeeltelijke doorzichtigheid wordt hier ongedaan gemaakt.

Deze doorzichtigheid was opgegeven om kleur iets te veranderen op de plaatsen, waar de cirkels elkaar overlapten. Dat wordt hier overgenomen door de hierboven opgegeven mix-blend-mode: difference;.

Verander de voorgrondkleur, dat is ook de kleur van de cirkels, in het verschil tussen de eerder bij #een, #drie opgegeven witte achtergrondkleur onder de <span>, en de eerder voor elke <span> opgegeven voorgrondkleur. Elke <span> heeft een eigen voorgrondkleur. Waar de cirkel elkaar overlappen, blenden de cirkels ook met elkaar.

Over deze mode is meer te vinden bij difference.

#drie p:nth-of-type(2) span, #drie p:nth-of-type(4) span

Deze selectors werken precies hetzelfde als die bij #twee p:first-of-type span, alleen gaat het nu om de <span>'s in de tweede en vierde <p> in div#drie. In deze <span>'s zitten de tweede en vierde groep cirkels, die niet geblend worden.

Bij #drie span iets hierboven is, voor browsers die mix-blend-mode ondersteunen, de nog eerder bij #drie span voor alle browsers opgegeven opacity: 0.7; veranderd naar opacity: 1;. Voor de <span>'s met de cirkels in de tweede en vierde <p> wordt dat weer veranderd naar opacity: 0.7;. Omdat deze <span>'s ook niet worden geblend, zien de tweede en vierde groep cirkels er precies hetzelfde uit als in browsers die mix-blend-mode niet ondersteunen.

Hierdoor is het verschil tussen opacity en mix-blend-mode te zien.

Bij #drie span iets hierboven is mix-blend-mode: difference; opgegeven. Hier wordt dat voor de <span>'s binnen de tweede en vierde <p> weer terugveranderd naar de standaardwaarde 'normal': niet blenden.

#drie p:nth-of-type(3), #drie p:nth-of-type(4)

In div#drie zit het onderste voorbeeld met de groepen cirkels. Deze <div> heeft een aantal kinderen, kleinkinderen, enzovoort, waaronder een aantal <p>'s. Om precies te zijn: vijf <p>'s. Vier met in elk een groep cirkels met daaronder een woord, en één met het onderschrift onder die vier groepen.

De derde en vierde <p>, dat zijn de twee rechter <p>'s, moeten een rode achtergrond krijgen.

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 ouder of jonger dan zes jaar kunt tellen. Met de selector :nth-of-type() worden alleen elementen van een bepaald soort geteld.

De eerste selector, die voor de komma:

De selector achter de komma is precies hetzelfde, maar dan voor de vierde <p> in div#drie.

In normale mensentaal: de derde en vierde <p> binnen div#drie, de twee rechter <p>'s.

De selector :nth-of-type() kan onverwachte bijwerkingen hebben. In dit geval zitten er maar vijf <p>'s in div#drie, die allemaal een direct kind van div#drie zijn. Maar als binnen div#drie bijvoorbeeld nog 'n geneste <div> zou zitten, waarin ook drie of meer <p>'s zouden zitten, zouden ook de derde en vierde <p> uit die <div> onder deze selector vallen. (Dit zou je in dit geval bijvoorbeeld kunnen oplossen door het toevoegen van >: #drie > p:nth-of-type(3), #drie > p:nth-of-type(4). Nu geldt de selector alleen voor <p>'s die een direct kind van div#drie zijn.)

Als er later aan de html een <p> wordt toegevoegd, kan de nummering van de <p>'s plotsklaps veranderen.

Kortom: een handige selector, mits voorzichtig gebruikt.

Rode achtergrond.

Deze rode achtergrond wordt alleen maar aangebracht om de invloed van de achtergrondkleur bij blenden te laten zien. Html en css zijn de bij de eerste en derde <p> precies hetzelfde, het enige verschil is de rode achtergrond van de <p>. Maar het effect van die

rode achtergrond is wel, dat de kleuren van de cirkels in de derde <p> volkomen verschillen van die in de eerste <p>, zoals op de afbeelding is te zien.

(Bij de tweede en vierde <p> is dat verschil er niet, want de cirkels daarin worden niet geblend, maar zijn alleen wat doorzichtig.)

Op de afbeelding hiernaast zijn de twee linkergroepjes met cirkels te zien. Op de afbeelding links met mix-blend-mode, op de afbeelding rechts met opacity. In deze afbeelding is een fout geslopen: bij de afbeelding rechts, die met opacity, valt de rode cirkel linksboven volledig weg tegen de rode achtergrond. Terwijl deze zelfde cirkel op de afbeelding rechts, die met mix-blend-mode, nog is te zien.

Dit was niet de bedoeling, maar het is zo gelaten, omdat het een aardige illustratie is van hoe makkelijk iets kan wegvallen in browsers die mix-blend-mode niet ondersteunen, terwijl het wel zichtbaar is in browsers die dat wel ondersteunen.

@media screen and (max-width: 400px)

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

(Dat geldt niet voor de css die binnen de feature query @supports (mix-blend-mode: normal) staat, die wordt alleen uitgevoerd door browsers die mix-blend-mode ondersteunen. Maar dat heeft niets te maken met de grootte van het browservenster, waar deze media query voor is bedoeld.)

De css die binnen deze media query staat, geldt alleen voor browservensters die maximaal 400 px breed zijn. In deze smallere vensters worden worden de foto's uit het bovenste voorbeeld iets verkleind, omdat ze anders niet volledig binnen het venster passen.

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

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 mogelijk toch voor dat mobieltje. Terwijl dat toch echt meer dan 400 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 meer dan 400 px in de breedte. 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, in portretstand, dus ruim onder de 400 px van deze media query. In landschapsstand is de breedte 512 px, en dan wordt de css in deze media query inderdaad niet uitgevoerd.

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

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

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

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

img

Alle afbeeldingen. Dat zijn er maar twee: de foto's bovenin.

In de html is als breedte bij de foto's 350 px opgegeven, omdat dat de echte breedte van de foto's is. Als je in de css ook een breedte opgeeft, zoals hier gebeurt, overrulet de breedte in de css de in de html opgegeven breedte.

In smallere browservensters staan de twee foto's niet naast, maar onder elkaar. Maar ook dan zijn de foto's nog te breed in vensters smaller dan 400 px (er zijn ook nog wat marges en dergelijke, vandaar de 50 px speling). Als de breedte niet wordt aangepast, moet horizontaal worden gescrold om de hele foto te kunnen zien.

Daarom wordt de breedte beperkt tot maximaal 100%. Een breedte in procenten is normaal genomen ten opzichte van de ouder van het element. Dat is hier één van de <p>'s in div#een. Een <p> is een blok-element en wordt daarom normaal genomen automatisch even breed als z'n ouder, hier div#een.

Bij #een, #drie heeft div#een een maximumbreedte van 95% gekregen. Dat is ook weer ten opzichte van z'n ouder <body>, ook een blok-element. Ook <body> wordt daarom normaal genomen even breed als z'n ouder <html>. Omdat <html> het buitenste element is, wordt dit normaal genomen even breed als het venster van de browser. div#een wordt hierdoor nooit breder dan 95% van de breedte van het venster, ongeacht hoe breed dit is.

De in div#een zittende <p>'s worden nooit breder dan div#een: maximaal 95% van de breedte van het browservenster. En omdat de in de <p> zittende <img> maximaal even breed is als de <p>, wordt ook de foto nu nooit breder dan 95% van de breedte van het browservenster, waardoor horizontaal scrollen in smalle vensters wordt voorkomen.

Je zou de breedte (en hoogte) ook helemaal weg kunnen laten in de html, maar het is nog steeds 'n goede gewoonte die wel aan te geven, als dat kan. De benodigde ruimte voor <img>'s kan dan al worden gereserveerd, voordat de <img>'s zijn gedownload.

(Overigens is het verkleinen van een <img> op deze manier in het algemeen een bijzonder slecht idee. Er wordt een groter bestand gedownload, dan nodig is, en vervolgens gaat de browser dat te grote bestand verkleind weergeven. Maar in dit geval wordt zo weinig verkleind dat een veel ingewikkelder constructie met foto's van verschillende afmetingen een beetje onzin zou zijn.)

In de html is ook een hoogte opgegeven bij de foto's. Als de breedte van de foto wordt aangepast, maar de hoogte zou hetzelfde blijven, vervormt de foto. Je krijgt 'n lachspiegel-effect. Door de hoogte op 'auto' in te stellen, verandert de hoogte automatisch met hetzelfde percentage als de breedte. Hierdoor blijven de verhoudingen van de foto bewaard.

#een p:last-child, #twee p:last-child, #drie p:last-child

Deze selector selecteert de laatste <p> in div#een, div#twee en div#drie. Dit zijn de <p>'s met de onderschriften onder de voorbeelden. Hoe deze selector precies werkt, is te vinden bij #een p:last-child, #twee p:last-child, #drie p:last-child.

Hier staat in feite twee keer hetzelfde: column-count: 2;. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms- en -webkit-.

In browservensters breder dan 760 px wordt de lengte van de regels in de onderschriften zo lang, dat deze lastig is te lezen. Daarom wordt de tekst weergegeven in twee kolommen.

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

Hier staat in feite twee keer hetzelfde: column-rule: black solid 1px;. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms- en -webkit-.

Tussen de kolommen een verticaal zwart lijntje van 1 px breed. Omdat de <p>'s met de onderschriften bij #een p:last-child, #twee p:last-child, #drie p:last-child een padding van 5 px hebben gekregen, loopt het lijntje tussen de kolommen net niet tot helemaal onder- en bovenaan door.