Kiezen uit vijf combinaties van voor- en achtergrondkleur - uitleg

Skip links en inhoudsopgave

Laatst aangepast: .

Afbeelding 1: links de standaardkleur zwart op wit, rechts de andere vier kleurencombinaties

Korte omschrijving

Met behulp van radioknoppen kan uit vijf verschillende combinaties voor- en achtergrondkleur worden gekozen.

BELANGRIJK

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

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

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

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

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

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

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

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

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

Opmerkingen

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

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

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

Iets gevonden waar je wat aan hebt? Mooi. Als je je waardering wilt uiten, maak dan een donatie over aan War Child Nederland, een organisatie die kinderen uit oorlogsgebieden helpt hun trauma's te verwerken. Of - nog beter - wordt donateur:
War Child Nederland

Achterliggend idee

Bovenaan de pagina staan vijf radioknoppen met bijbehorende <label> s. Omdat radioknoppen niet echt mooi zijn, worden deze verborgen. De bediening vindt plaats via de bij de knoppen horende <label> s.

Radioknoppen zijn niet goed op te maken, maar de bijbehorende <label> s wel. De vijf letters A bovenaan staan elk in een <label>. Voor- en achtergrondkleur van de <label> hebben dezelfde kleur als de kleurencombinatie die bij de betreffende <label> hoort.

Als een radioknop is geselecteerd, kan bij die knop de selector :checked worden gebruikt: alleen als een bepaalde knop is geselecteerd, wordt de css achter de selector met :checked uitgevoerd. Door in de selector ook de general sibling selector ~ op te nemen, kan een in de html ergens op de geselecteerde knop volgend element worden geselecteerd. In dit geval is dat <main> met de rest van de pagina:

input#zwarte-tekst:checked ~ main { ... }

Als de radioknop met id="zwarte-tekst" is geselecteerd, doe dan iets met de ergens in de html erop volgende <main>.

Bij elk van de vijf radioknoppen hoort een aparte kleurencombinatie. Afhankelijk van de geselecteerde knop krijgt de rest van de pagina een bepaalde kleurencombinatie.

Een nadeel van deze methode: ~ kan alleen gebruikt worden, als de knop en het te selecteren element dezelfde ouder hebben. Dit maakt het iets lastiger om de knoppen op de juiste plaats te zetten, maar onmogelijk is het niet.

Omdat het om vijf gewone radioknoppen gaat, zijn deze ook met de pijltjestoetsen te bedienen. Voor gebruikers van de Tab-toets is mogelijk niet gelijk duidelijk, hoe deze knoppen werken. Daarom wordt bij gebruik van de Tab-toets eerst een klein venstertje met tekst getoond. Omdat dit venstertje alleen kan worden geopend door de Tab-toets, heeft dit verder geen invloed op touchscreens.

Schermlezers hebben niet zoveel aan vijf radioknoppen met in de bijbehorende <label> s als enige tekst de letter A . Voor schermlezers is daarom een reeks aria-labels aangebracht, die kunnen worden voorgelezen. De letter A wordt verborgen, net als het venstertje voor gebruikers van de Tab-toets.

Alle vijf de radioknoppen met bijbehorend <label> en css volgen hetzelfde patroon. Daardoor is het heel simpel het aantal knoppen, en daarmee de keuzemogelijkheden, te verminderen of te vermeerderen.

Als je voor de voor- en de achtergrondkleur aparte knoppen gebruikt, kun je met deze zelfde techniek de voor- en achtergrondkleur los van elkaar laten kiezen.

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

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

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

De belangrijkste browsers hebben elk een eigen voorvoegsel:

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

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

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

Internet Explorer: -ms-, naar de maker: Microsoft. (Edge gebruikt geen voorvoegsels, maar vanwege compatibiliteit met oudere sites kunnen er nog wat aanwezig zijn.)

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

In dit voorbeeld worden -webkit-animation en @-webkit-keyframes gebruikt.

-webkit-animation en @-webkit-keyframes

Deze twee eigenschappen worden alleen maar gebruikt om een bug in sommige oudere op webkit gebaseerde browsers te repareren. Daarom hoeft alleen maar op browsers gelet te worden, die op webkit zijn gebaseerd. In dit geval is daarom het volgende voldoende:

{-webkit-animation: ...;}

Hetzelfde geldt voor @keyframes:

@-webkit-keyframes {...}

In nieuwere browsers is deze bug niet meer aanwezig, dus de versie zonder voorvoegsel hoeft in dit geval helemaal niet gebruikt te worden.

(In het algemeen is het een bijzonder slechte gewoonte om van een eigenschap alleen één bepaalde versie te gebruiken. Dit gebeurt nogal eens voor iOS, waarmee Apple actief wordt geholpen om sites en dergelijke ontoegankelijk te maken voor andere browsers dan Safari. Ontwikkelaars die dit doen, werken mee aan de totstandkoming van eenzelfde wantoestand als in het verleden met het monopolie van Internet Explorer 6 heeft bestaan.

Maar in dit geval maakt het niet uit, omdat het alleen om een bug gaat. Andere browsers hebben deze css helemaal niet nodig.)

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

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

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

Voorlopig zijn we echter nog niet van deze voorvoegsels af. Als je ze gebruikt, gebruik dan álle varianten, en eindig met de variant zonder voorvoegsel, zoals die uiteindelijk ooit gebruikt gaat worden. Als je alleen de -webkit-variant gebruikt, ben je in feite n onbetaalde reclamemaker voor Apple. (Dit geldt dus niet voor de hierboven genoemde @-webkit-keyframes en -webkit-animation, want deze worden alleen gebruikt om een probleem in oudere webkit-browsers op te lossen.)

Semantische elementen en WAI-ARIA

Deze twee onderwerpen zijn samengevoegd, omdat ze veel met elkaar te maken hebben.

Semantische elementen

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

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

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

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

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

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

<main>

Hierbinnen staat de belangrijkste inhoud van de pagina (in dit voorbeeld is dit de tekst, waarvan de kleur kan worden gekozen).

Met behulp van dit soort nieuwe semantische elementen kan bijvoorbeeld een schermlezer in één keer een heel menu passeren en gelijk naar de echte inhoud gaan. Alleen hadden deze nieuwe elementen tot voor kort één probleem: ze hadden in de praktijk nog weinig nut, omdat schermlezers en dergelijke ze nog niet herkenden. Daarom werd een zogenaamde WAI-ARIA-code toegevoegd aan deze elementen. Dat is een al veel langer bestaande code, die schermlezers en dergelijke wel herkennen. Voor <main> ziet dat er zo uit:

<main role="main">

Inmiddels is dit behoorlijk veranderd. Het advies is nu om deze speciale toevoeging niet meer te gebruiken, omdat de meeste schermlezers en dergelijke dit soort nieuwe elementen inmiddels herkennen.

WAI-ARIA-codes

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

Er worden in dit voorbeeld twee WAI-ARIA-codes gebruikt: aria-label en aria-hidden. Verder wordt nog role="radiogroup" gebruikt.

aria-label

Als een schermlezer deze pagina voorleest, wordt bij de radioknoppen de indrukwekkende tekst a a a a a uitgesproken. Dat is de enige tekst die in de <label> s staat, dus die wordt trouwhartig voorgelezen door de schermlezer. Voor mensen die goed kunnen zien, is de bedoeling van die letters gelijk duidelijk. Maar als je de letters niet ziet, is de bedoeling van het vijf keer uitroepen van de letter a vermoedelijk tamelijk duister.

Met behulp van het attribuut aria-label wordt allereerst een omschrijving gegeven, waar de radioknoppen voor dienen. Deze omschrijving is niet te zien, dus de lay-out wordt niet verstoord:

<div id="wrapper" role="radiogroup" aria-label="Kies een kleur met behulp van de radioknoppen">

Deze tekst kan door schermlezers worden voorgelezen, gelijk voordat de radioknoppen worden bereikt.

De bij de radioknoppen horende <label> s geven met kleuren de keuzemogelijkheden aan. Als tekst staat in de <label> s alleen de letter A . Een keuze maken uit vijf keer de letter A is natuurlijk onmogelijk. Daarom is ook bij de <label> s met behulp van aria-label een tekst aangebracht. Hieronder staat de eerste <label>:

<label id="label-zwarte-tekst" for="zwarte-tekst" aria-label="Zwarte tekst op witte achtergrond"><span aria-hidden="true">A</span></label>

De tekst Zwarte tekst op witte achtergrond kan door schermlezers worden voorgelezen, zodat de bezoeker weet, wat er gekozen kan worden met de betreffende knop. Ook deze omschrijving is verder niet te zien en verstoort dus de lay-out niet.

aria-hidden

Een schermlezer leest in principe alle tekst en dergelijke binnen de html gewoon voor. Dat geldt ook voor de tekst die is bedoeld voor gebruikers van de Tab-toets. Dat die tekst links buiten het scherm staat, maakt niets uit voor de schermlezer. Omdat deze tekst overbodig is voor schermlezers en mogelijk zelfs verwarrend kan zijn, wordt deze voor schermlezers verborgen:

<p id="voor-tab" tabindex="0" aria-hidden="true">Met de Tab-toets kun je naar de knoppen gaan. Daar kun je door aanraken, klikken of de pijltjestoetsen de kleuren kiezen.</p>

Door aan de <p> het attribuut aria-hidden="true" toe te voegen, negeren schermlezers deze <p> volledig.

In de <label> s is met behulp van aria-label voor schermlezers een begrijpelijke tekst aangebracht. Maar ook de A is nog aanwezig, en die wordt gewoon voorgelezen. Dat levert dus een schermlezer met een soort hik op: na elke uitleg wordt de letter A voorgelezen. Daarom wordt ook deze letter met behulp van aria-hidden verborgen:

<label id="label-zwarte-tekst" for="zwarte-tekst" aria-label="Zwarte tekst op witte achtergrond"><span aria-hidden="true">A</span></label>

Omdat alleen de letter A moet worden verborgen, kan aria-hidden niet bij de <label> worden aangebracht, want dan zou de volledige <label> worden verborgen. Daarom is de A in een <span> gezet. Nu kan alleen die <span> met de daarin zittende A worden verborgen voor schermlezers.

role="radiogroup"

Normaal genomen staan radioknoppen binnen een formulier. In dit geval staan de radioknoppen niet binnen een formulier. Daarom wordt aan de <div>, waarbinnen de knoppen staan, deze role="radiogroup" toegevoegd:

<div id="wrapper" role="radiogroup" aria-label="Kies een kleur met behulp van de radioknoppen">

Nu is voor schermlezers duidelijk, dat binnen deze <div> een groep radioknoppen staat.

Tabindex

Links, invoervelden in formulieren, en dergelijke kunnen met behulp van de Tab-toets (of een soortgelijke toets) één voor één worden bezocht, in de volgorde waarin ze in de html voorkomen. Shift+Tab-toets keert de volgorde van de Tab-toets om. Dit is een belangrijk hulpmiddel voor mensen die om een of andere reden de muis niet kunnen of willen gebruiken. (En het is vaak ook veel sneller dan de muis, vooral in formulieren.)

In sommige browsers en/of besturingssystemen is dit vreemd genoeg standaard uitgeschakeld en is een zoektocht in de instellingen nodig om dit aan te zetten. Maar gebruikers van de Tab-toets zullen dit al hebben gedaan.

Als je met behulp van de Tab-toets een element hebt bereikt, heeft dit focus : als het een link is en je drukt op Enter, wordt de link gevolgd. Bij een tekstveld kun je tekst gaan invoeren. Enzovoort.

De Tab-toets volgt normaal genomen de volgorde van de elementen in de html. Het maakt niet uit, in welke volgorde ze op het scherm staan. Als je met behulp van css de elementen van plaats verwisselt op het scherm, wordt toch gewoon de volgorde in de html gevolgd.

De volgorde van de Tab-toets kan worden veranderd met behulp van het tabindex-attribuut: <div tabindex="3">. Deze <div> zal nu als derde worden bezocht, ook al krijgt een simpele <div> normaal genomen nooit bezoek van de Tab-toets.

Normaal genomen is het gebruik van een tabindex niet nodig. Het is zeker niet bedoeld om de bezoeker als een kangoeroe op een hindernisbaan van onder via links over rechts naar boven te laten springen. Maar soms kan het handig zijn voor kleinere correcties, als de normale volgorde in de html niet optimaal is. Of om een element bereikbaar te maken voor de Tab-toets, zoals de hierboven genoemde <div>.

Schermlezers blijven altijd de volgorde van de html volgen, dus als de tabindex sterk afwijkt van de volgorde in de html, kan dat behoorlijk verwarrend zijn.

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

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

tabindex="-1"

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

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

tabindex="0"

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

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

Deze waarde wordt in dit voorbeeld gebruikt bij de <p> met de tekst voor gebruikers van de Tab-toets:

<p id="voor-tab" tabindex="0" aria-hidden="true">Met de Tab-toets kun je naar de knoppen gaan. Daar kun je door aanraken, klikken of de pijltjestoetsen de kleuren kiezen.</p>

Door de toevoeging tabindex="0" kan de <p> focus krijgen bij gebruik van de Tab-toets, terwijl een <p> dat normaal genomen niet krijgt.

De <p> staat normaal genomen onzichtbaar links buiten het scherm geparkeerd, maar zodra de <p> focus krijgt, wordt deze binnen het scherm gezet en daardoor zichtbaar. Als de Tab-toets nogmaals wordt ingedrukt, verliest de <p> de focus weer en verdwijnt weer links buiten het scherm.

Als elders op de pagina nog een tabindex wordt gebruikt, kan een tabindex="0" problemen geven met de volgorde, zoals iets hierboven beschreven. Op de site zelf, waar ook knoppen voor navigatie op de site aanwezig zijn, gaat het goed. Geen enkele knop heeft daar een tabindex, waardoor in alle browsers eerst de navigatieknoppen en dan pas de <span> s met de tabindex worden bezocht. Precies zoals de bedoeling is. Maar als je wel een tabindex elders op de pagina gebruikt, moet je in zoveel mogelijk browsers op zoveel mogelijk systemen de volgorde bij gebruik van de Tab-toets controleren.

tabindex="..."

Op de plaats van de puntjes moet een positief getal worden ingevuld: het volgnummer. Positieve tabindexen worden in dit voorbeeld niet gebruikt.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

Het eerste deel van deze tekst is voor alle voorbeelden hetzelfde. Eventueel specifiek voor dit voorbeeld geldende dingen staan verderop onder het kopje Specifiek voor dit voorbeeld.

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

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

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

Enkele tips die helpen bij toegankelijkheid:

Specifiek voor dit voorbeeld

Getest in

Laatst gecontroleerd op 19 juni 2017.

Onder dit kopje staat alleen maar, hoe en waarin is getest. Eventuele problemen, ook die met betrekking tot zoomen en lettergroottes, staan hieronder bij Bekende problemen (en oplossingen). Het is belangrijk dat deel te lezen, want uit een test kan ook prima blijken dat iets totaal niet werkt!

Eventuele opmerkingen over de toegankelijkheid specifiek voor dit voorbeeld staan hierboven bij Toegankelijkheid en zoekmachines onder het kopje Specifiek voor dit voorbeeld.

Dit voorbeeld is getest op de volgende systemen:

Er is op de aan het begin van dit hoofdstukje genoemde controledatum getest in de meest recente versie van de browser, die op het betreffende besturingssysteem kon draaien. Het aantal geteste browsers en systemen is al tamelijk fors, en als ook nog rekening gehouden moet worden met (zwaar) verouderde browsers, is het gewoon niet meer te doen. Surfen met een verouderde browser is trouwens vragen om ellende, want updates van browsers hebben heel vaak met beveiligingsproblemen te maken.

In resoluties groter dan 800x600 is ook in- en uitzoomen en – voor zover de browser dat kan – een kleinere en grotere letter getest. Er is ingezoomd en vergroot tot zover de browser kan, maar niet verder dan 200%.

Er is getest met behulp van muis en toetsenbord, behalve op de iPad, Android, Windows Phone en Windows 10 Mobile, waar een touchscreen is gebruikt. Op Windows 8.1 en 10 is getest met een touchscreen, met een combinatie van toetsenbord en touchpad, en met een combinatie van toetsenbord en muis.

Als dat relevant is, is op de desktop ook getest, als JavaScript uitstaat. Eventuele problemen staan hierboven bij Toegankelijkheid en zoekmachines onder het kopje Specifiek voor dit voorbeeld. (Op iOS, Android, Windows Phone en Windows 10 Mobile is niet getest zonder JavaScript, omdat je JavaScript in een toenemend aantal mobiele browsers niet uit kunt zetten. Bovendien is een mobiel apparaat zonder JavaScript niet veel meer dan een duur en groot uitgevallen horloge.)

Naast deze 'gewone' browsers is ook getest in Lynx, WebbIE, NVDA, TalkBack, VoiceOver en ChromeVox.

Lynx is een browser die alleen tekst laat zien en geen css gebruikt. Er is getest op Linux.

WebbIE is een browser die gericht is op mensen met een handicap. Er is getest op Windows 7.

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

TalkBack is een in Android ingebouwde schermlezer. Er is getest in combinatie met Chrome.

VoiceOver is een in iOS en OS X ingebouwde schermlezer. Er is getest in combinatie met Safari op iOS en OS X.

ChromeVox is een schermlezer in de vorm van een extensie bij Google Chrome. Er is getest op een systeem met Kubuntu Linux.

Als het voorbeeld in deze programma's toegankelijk is, zou het in principe toegankelijk moeten zijn in alle aangepaste browsers en dergelijke. En dus ook voor zoekmachines, want een zoekmachine is redelijk vergelijkbaar met een blinde. Eventuele opmerkingen over de toegankelijkheid specifiek voor dit voorbeeld staan hierboven bij Toegankelijkheid en zoekmachines onder het kopje Specifiek voor dit voorbeeld.

Alleen op de hierboven genoemde systemen en browsers is getest. Er is dus niet getest op bijvoorbeeld 'n Blackberry. De kans is (heel erg) groot dat dit voorbeeld niet (volledig) werkt op niet-geteste systemen en apparaten. Om het wel (volledig) werkend te krijgen, zul je vaak (kleine) wijzigingen en/of (kleine) aanvullingen moeten aanbrengen, bijvoorbeeld met JavaScript.

Er is ook geen enkele garantie dat iets werkt in een andere tablet of smartphone dan hierboven genoemd, omdat fabrikanten in principe de software kunnen veranderen. Dit is anders dan op de desktop, waar browsers altijd (vrijwel) hetzelfde werken, zelfs op verschillende besturingssystemen. Iets wat in Android browser werkt, zal in de regel overal werken in die browser, maar een garantie is er niet. De enige garantie is het daadwerkelijk testen op een fysiek apparaat. En aangezien er duizenden mobiele apparaten zijn, is daar eigenlijk geen beginnen aan.

De html is gevalideerd met de validator van w3c, de css ook. Als om een of andere reden niet volledig gevalideerd kon worden, wordt dat bij Bekende problemen (en oplossingen) vermeld.

Nieuwe browsers worden pas getest, als ze uit het bèta-stadium zijn, omdat er anders 'n redelijke kans is dat je tegen 'n bug zit te vechten, die voor de uiteindelijke versie nog gerepareerd wordt. Dit voorbeeld is alleen getest in de hierboven met name genoemde browsers. Vragen over niet-geteste browsers kunnen niet worden beantwoord, en het melden van fouten in niet-geteste browsers heeft ook geen enkel nut. (Melden van fouten, problemen, enzovoort in wel geteste browsers: graag!)

Bekende problemen (en oplossingen)

Waarop en hoe is getest, kun je gelijk hierboven vinden bij Getest in.

Als je hieronder geen oplossing vindt voor een probleem dat met dit voorbeeld te maken heeft, kun je op het forum proberen een oplossing te vinden voor je probleem. Om forumspam te voorkomen, moet je je helaas wel registreren, voordat je op het forum een probleem kunt aankaarten.

Internet Explorer (alle systemen) en UC browser op Windows Phone 8.1 en Windows 10 Mobile

Outline staat te ver naar buiten

Afbeelding 2: outline staat niet helemaal goed

Als een van de radioknoppen focus heeft, wordt dit aangegeven door een oranje 4 px brede outline rondom de bijbehorende <label>. Met behulp van outline-offset: -4px; wordt de outline binnen de <label> gezet, zoals rechts op de afbeelding is te zien.

De hierboven staande browsers ondersteunen outline-offset niet. Hierdoor komt de outline niet binnen, maar buiten de <label> te staan, zoals links op de afbeelding is te zien. Als de <label> tegen de linkerbovenhoek van het browservenster staat, zoals op smartphones het geval is, vallen de outline boven en rechts buiten het venster en zijn daardoor niet zichtbaar.

Je zou dit mogelijk kunnen oplossen met behulp van allerlei ingewikkelde constructies, maar zo belangrijk is het niet.

Validatie

De regel met @-webkit-keyframes bugfix levert in de css-validator een foutmelding op. Omdat de reden hiervan bekend is, is dit verder geen probleem.

Wijzigingen

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

:

Nieuw opgenomen.

Inhoud van de download en licenties

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

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

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

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

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

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

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

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

120-css-dl:

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

HTML

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

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

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

<!DOCTYPE html>

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

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

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

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

<html lang="nl">

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

<meta charset="utf-8">

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

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

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

In html5 hoeft deze regel niet langer te zijn, dan wat hier staat.

<meta name="viewport" content="width=device-width, initial-scale=1">

Mobiele apparaten variëren enorm in breedte. En dat is een probleem. Sites waren, in ieder geval tot voor kort, gemaakt voor desktopbrowsers. En die hebben, in vergelijking met bijvoorbeeld een smartphone, heel brede browservensters. Hoe moet je op 'n smartphone een pagina weergeven, die is gemaakt voor de breedte van een desktop? Je kunt natuurlijk wachten tot álle sites zijn omgebouwd voor smartphones, tablets, enzovoort, maar dan moet je waarschijnlijk heel erg lang wachten.

Mobiele browsers gokken erop dat een pagina een bepaalde breedte heeft. Safari voor mobiel bijvoorbeeld gaat ervan uit dat een pagina 980 px breed is. De pagina wordt vervolgens zoveel versmald dat hij binnen het venster van het apparaat past. Op een iPhone wordt de pagina dus veel smaller dan op een iPad. Vervolgens kan de gebruiker inzoomen op het deel van de pagina dat hij of zij wil zien.

Dit betekent ook dat bij het openen van de pagina de tekst meestal heel erg klein wordt weergegeven. (Meestal, want niet alle browsers en apparaten doen het op dezelfde manier.) Niet erg fraai, maar bedenk maar 'ns 'n betere oplossing voor bestaande sites.

Nieuwe sites of pagina's kunnen echter wel rekening houden met de veel kleinere vensters van mobiele apparaten. In dit voorbeeld wordt de breedte van de pagina aangepast aan de breedte van het browservenster. Maar die stomme mobiele browser weet dat niet, dus die gaat ervan uit dat ook de al aangepaste pagina 980 px breed is, en verkleint die dan. Dat is ongeveer even behulpzaam als de gedienstige kelner die behulpzaam de stoel naar achteren trekt, net als jij wilt gaan zitten.

Om de door de browser aangeboden hulp vriendelijk maar beslist te weigeren, wordt deze tag gebruikt. Hiermee geef je aan dat de pagina is geoptimaliseerd voor mobiele apparaten.

Een iPad in portretstand bijvoorbeeld is 768 px breed. De kreet width=device-width zegt tegen de mobiele browser dat de breedte van de weer te geven pagina gelijk is aan de breedte van het apparaat. Voor een iPad in portretstand dus 768 px.

Simpeler gezegd: je zegt tegen het mobiele apparaat dat de pagina geen vaste breedte heeft, en dat het dus niet nodig is om de weergave aan te passen.

Er staat nog een tweede deel in de tag: initial-scale=1. Sommige mobiele apparaten zoomen een pagina gelijk in of uit. Ook weer in een poging behulpzaam te zijn. Ook dat is hier niet nodig, want de pagina past zich aan het apparaat aan. Er is ook een instructie om zoomen helemaal onmogelijk te maken, maar die wordt niet gebruikt. De bezoeker kan zelf nog gewoon zoomen, wat belangrijk is voor mensen die wat slechter zien.

<div id="wrapper" role="radiogroup" aria-label="Kies een kleur met behulp van de radioknoppen">

Binnen deze <div> staat de hele pagina.

role="radiogroup" geeft voor schermlezers aan dat binnen deze <div> een groep radioknoppen zit. Achter aria-label staat een tekst die speciaal voor schermlezers is bedoeld. Schermlezers kunnen deze tekst voorlezen, maar op het scherm is deze tekst verder niet te zien.

Over role en aria-label is meer te vinden bij WAI-ARIA-codes.

<p id="voor-tab" tabindex="0" aria-hidden="true">Met de Tab-toets kun je naar de knoppen gaan. Daar kun je door aanraken, klikken of de pijltjestoetsen de kleuren kiezen.</p>

Sommige mensen gebruiken niet de muis, maar de Tab-toets om links, tekstvelden en dergelijke langs te gaan. Omdat ze de muis niet kunnen gebruiken, maar ook omdat de Tab-toets soms veel sneller werkt. Het element dat wordt bezocht heeft focus . Als bijvoorbeeld een link focus heeft, wordt de link gevolgd bij het indrukken van Enter.

Een <p> wordt normaal genomen genegeerd door de Tab-toets, maar door de toevoeging tabindex="0" kan deze <p> wel focus krijgen. De tekst in deze <p> staat normaal genomen links buiten het scherm, maar kan nu, als de <p> focus heeft, bij #voor-tab:focus op het scherm worden gezet.

Gebruikers van de Tab-toets zullen weten, hoe ze met de pijltjestoetsen radioknoppen kunnen selecteren. Maar hier zijn de radioknoppen niet herkenbaar als radioknoppen, daarom staat hier een korte uitleg.

Omdat deze tekst geen nut heeft voor schermlezers, wordt de <p> met de WAI-ARIA-code aria-hidden="true" voor schermlezers verborgen.

<input id="zwarte-tekst" type="radio" name="kiezen" checked>

Er zijn vijf radioknoppen, voor elke kleurencombinatie een. Dit is de radioknop voor de eerste keuze: zwarte tekst op witte achtergrond. De radioknoppen zelf worden bij input verborgen, ze worden bediend via de bijbehorende <label> s. Een radioknop is nauwelijks op te maken, terwijl van een <label> zelfs een voorbeeld van de kleurencombinatie kan worden gemaakt.

Omdat zwarte tekst op witte achtergrond het meest gebruikelijk is, is deze radioknop door het gebruik van het attribuut checked bij openen van de pagina al geselecteerd.

<label id="label-zwarte-tekst" for="zwarte-tekst" aria-label="Zwarte tekst op witte achtergrond"><span aria-hidden="true">A</span></label>

Elk van de vijf radioknoppen heeft een bijbehorend <label>. Dit is de <label> bij de eerste radioknop, die voor zwarte tekst op witte achtergrond.

Binnen de <label> staat als tekst alleen de letter A . Die letter en de achtergrond tonen de te kiezen kleurencombinatie.

Schermlezers hebben niets aan het voorlezen van de letter A . Daarom wordt die met de WAI-ARIA-code aria-hidden="true" verborgen voor schermlezers. Door de A in een <span> te zetten en alleen die <span> te verbergen, wordt alleen de A verborgen.

Met behulp van de WAI-ARIA-code aria-label is voor schermlezers een tekst toegevoegd, die (hopelijk) duidelijker is dan alleen A . Schermlezers kunnen deze tekst voorlezen, maar op het scherm is deze tekst verder niet te zien.

<p lang="la">Lorem ipsum dolor (...) cursus nunc,</p>

Als opvultekst is Latijnse tekst gebruikt. De taal is van belang voor schermlezers, automatisch afbreken, automatisch genereren van aanhalingstekens, juist gebruik van decimale punt of komma, en dergelijke. Daarom wordt met lang="la" aangegeven dat de tekst binnen deze <p> Latijn is. (En tot mijn niet geringe verbazing blijkt een schermlezer als NVDA dat dan, voor zover ik dat kan beoordelen, op de juiste manier voor te lezen.)

CSS

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

Omdat deze site nou eenmaal (voornamelijk) op css is gericht, wordt hieronder álle css besproken.

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

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

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

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

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

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

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

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

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

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

css voor alle vensters

/* tekst-120-dl.css */

Om vergissingen te voorkomen is het een goede gewoonte bovenaan het stijlbestand even de naam neer te zetten. Voor je het weet, zit je anders in het verkeerde bestand te werken.

@-webkit-keyframes bugfix {from {padding-left: 0;} to {padding-left: 0;}}

Bij #wrapper wordt een animatie toegevoegd om een bug in Android browser en Opera Mini op Android voor versie 5 op te lossen. Die animatie wordt hier opgegeven.

Op een aantal plaatsen wordt in een selector gebruik gemaakt van het teken ~ (de general sibling -selector) om de voor- en achtergrondkleur te veranderen. In de selector om hiervoor wordt een ~ gebruikt. De genoemde browsers veranderen de kleuren niet, omdat ze problemen hebben met de ~. Door het toevoegen van een animatie werkt het toch zoals bedoeld.

Als je nou denkt dat hier niets wordt uitgevoerd, omdat de padding links van 0 px in een padding links van 0 px wordt veranderd, dan heb je helemaal gelijk. Toch neutraliseert deze flauwekul de bug. De padding links is 0 px, omdat bij div#wrapper helemaal geen padding is opgegeven. In dat geval heeft de padding de standaardwaarde van 0. Zou de padding links bij #wrapper wel een waarde hebben, dan zou je hier die waarde gebruiken.

Bij #wrapper, waar de animatie daadwerkelijk wordt gebruikt, staat bij -webkit-animation het sleutelwoord infinite: de animatie wordt eindeloos herhaald. Verder staat daar nog de waarde 1s: 1 seconde. Dat is de tijdsduur van de animatie. Door hier een tamelijk lange waarde voor te nemen, wordt de animatie niet al te vaak afgespeeld. (Voor zover je hier van afspelen kan spreken, want er gebeurt gewoon helemaal niets.)

Omdat er in feite helemaal niets gebeurt bij deze animatie, wordt de pagina ook niet opnieuw opgemaakt door de browser. Kennelijk werkt dit als n soort waakhond: áls er iets is veranderd, wordt het weergegeven. Anders gebeurt er niets.

Normaal genomen is het een bijzonder slecht idee css te gebruiken voor slechts één weergave-machine: webkit. Maar in dit geval is dit terecht, want de bug zit alleen in twee op webkit gebaseerde browsers. Het heeft dus geen zin om Internet Explorer of Firefox ook met deze ongein te belasten.

Waarom dit alleen in webkit-browsers werkt, staat bij De voorvoegsels -moz-, -ms- en -webkit-.

body

Het element waarbinnen de hele pagina staat. Veel instellingen die hier worden opgegeven, worden geërfd door de nakomelingen van <body>. Ze gelden voor de hele pagina, tenzij ze later worden gewijzigd. Dit geldt bijvoorbeeld voor de lettersoort, de lettergrootte en de voorgrondkleur.

background: #ff9;

Achtergrondkleurtje.

color: black;

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

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

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

font-family: Arial, Helvetica, sans-serif;

Als Arial is geïnstalleerd op de machine van de bezoeker, wordt deze gebruikt, anders Helvetica. Als die ook niet wordt gevonden, wordt in ieder geval een schreefloze letter (zonder dwarsstreepjes) gebruikt.

margin: 0; padding: 0;

Slim om te doen vanwege verschillen tussen browsers.

#wrapper

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

Deze extra <div> is nodig omdat bij gebruik van de ~ in een selector het element voor en het element na de ~ dezelfde ouder moeten hebben. In dit geval gaat het voor de ~ om de geselecteerde radioknop, en achter de ~ om <main>.

-webkit-animation: bugfix infinite 1s;

In Android browser en Opera Mini op Android voor versie 5 veranderen de kleuren niet bij aan- of uitvinken van een radioknop. Deze animatie lost dat op. In feite is het helemaal geen echte animatie, maar het werkt, en daar gaat het om. Een uitgebreidere beschrijving is te vinden bij @-webkit-keyframes bugfix.

background: white;

Witte achtergrond.

color: black;

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

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

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

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

width: 700px;

Breedte.

max-width: 100%;

Maximumbreedte.

Een breedte in procenten is normaal genomen ten opzichte van de ouder, hier is dat <body>. <body> is een blok-element en 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#wrapper, en daarmee de hele pagina die erin zit, wordt dus nooit breder dan het venster.

margin: 0 auto;

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

Boven en onder geen marge. Links en rechts auto, wat hier hetzelfde betekent als evenveel. Hierdoor staat div#wrapper, en daarmee de hele pagina, altijd horizontaal gecentreerd binnen z n ouder, hier <body>. <body> is een blok-element en 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#wrapper staat hierdoor horizontaal gecentreerd binnen het venster, ongeacht de breedte van het venster.

Iets hierboven heeft #wrapper een breedte van 700 px en een maximumbreedte van 100% gekregen. Dat horizontaal centreren zie je daardoor alleen in browservensters die breder dan 700 px zijn.

position: relative;

Een aantal nakomelingen van div#wrapper moet absoluut worden gepositioneerd ten opzichte van #wrapper. Om ze te kunnen positioneren ten opzichte van #wrapper, moet #wrapper zelf een positie krijgen. Omdat niets wordt opgegeven voor top en dergelijke, heeft dit verder geen invloed op div#wrapper zelf.

#voor-tab

Afbeelding 3: uitleg voor gebruikers Tab-toets

Het element met id="voor-tab". Dit is een <p>, waarin een korte tekst zit voor gebruikers van de Tab-toets. Normaal genomen staat deze <p> onzichtbaar links buiten het scherm, maar zodra de <p> door het indrukken van de Tab-toets focus krijgt, wordt de tekst bij #voor-tab:focus binnen het scherm gezet.

Als de Tab-toets nogmaals wordt ingedrukt, krijgen de radioknoppen focus. Omdat deze <p> dan geen focus meer heeft, verdwijnt de tekst weer.

background: #ddd;

Lichtgrijze achtergrond.

color: black;

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

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

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

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

box-sizing: border-box;

Hier gelijk onder wordt aan deze <div> een breedte van 400 px gegeven. Dat is te breed voor heel smalle browservensters, daarom wordt iets hieronder de breedte beperkt tot 100%. Maar iets verder hieronder wordt links en rechts een border van 3 px en een padding van 5 px gegeven. Daarmee wordt de maximumbreedte 3 px + 5 px + 100% + 5 px + 3 px, want normaal genomen worden border en padding bij de breedte opgeteld. Daardoor zou, in smalle vensters, de <div> 16 px te breed worden.

Met deze regel worden border en padding niet bij de breedte opgeteld, maar komen binnen de breedte te staan. Nu wordt de <div>, inclusief border en padding, nooit breder dan 100% van het browservenster.

width: 400px;

Breedte.

max-width: 100%;

Een breedte in procenten is normaal genomen ten opzichte van de ouder van het element. Die ouder is hier div#wrapper. Bij #wrapper is met behulp van max-width: 100%; gezorgd dat #wrapper nooit breder dan het venster van de browser kan worden. Hierdoor kan ook div#voor-tab nooit breder worden dan het venster.

font-size: 1.5em;

Iets grotere letter, zodat de melding goed opvalt.

Als eenheid wordt de relatieve eenheid em gebruikt, omdat bij gebruik van een absolute eenheid zoals px niet alle browsers de lettergrootte kunnen veranderen.

border: red solid 3px;

Brede rode rand, zodat de melding goed opvalt.

padding: 5px;

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

position: absolute;

Om de <div> 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 div#wrapper.

top: 16px;

Op deze hoogte staat de melding, als deze op het scherm wordt gezet, gelijk onder de <label> s van de radioknoppen.

left: -20000px;

Ver links buiten het scherm parkeren, zodat de tekst niet zichtbaar is. Als de <div> door het indrukken van de Tab-toets focus krijgt, wordt de div bij #voor-tab:focus binnen het scherm geplaatst, waardoor de tekst zichtbaar wordt.

input

Alle <input> s. Dat zijn hier de vijf radioknoppen, waarmee de kleurencombinaties kunnen worden gekozen. Omdat de radioknoppen zelf niet goed zijn op te maken, worden ze verborgen. De bediening vindt plaats via de bijbehorende <label> s, die wel goed zijn op te maken.

position: absolute;

Om de <input> s 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 div#wrapper, die bij #wrapper relatief is gepositioneerd.

left: 10px;

Op 10 px vanaf links neerzetten.

Absoluut gepositioneerde elementen houden in het algemeen geen rekening met andere elementen. Hierdoor komen alle vijf de radioknoppen over elkaar heen op dezelfde plaats te staan. De radioknop voor bruine tekst op een groene achtergrond staat als laatste in de html en komt daarom bovenaan te staan.

Dat de knoppen over elkaar heen staan, maakt in dit geval niets uit. De knoppen worden bediend door hun bijbehorende <label> s, en die staan niet over elkaar heen.

z-index: -1;

Normaal genomen wordt een element dat later in de html staat boven eerder in de html staande elementen gezet. De vijf <label> s komen in de html na de <input> s, dus de <label> s zouden boven de <input> s komen te staan.

Afbeelding 4: radioknoppen staan boven label

In dit geval is dat echter niet zo. De <input> s hebben iets hierboven een absolute positie gekregen, en daardoor komen ze toch boven de <label> s te staan. Elementen met een positie staan in de regel boven elementen zonder positie, en de <label> s hebben geen positie.

Op de afbeelding zijn de <input> s zichtbaar op 10 px vanaf links. Je ziet maar één <input>, omdat alle vijf de <input> s absoluut zijn gepositioneerd op dezelfde plaats. Als je de radioknop zou selecteren, zou je zien dat dit de vijfde knop is, de knop die bij de bruine tekst op groene achtergrond hoort. De andere vier knoppen kun je niet selecteren, omdat ze worden afgedekt door de laatste knop. (Ze kunnen wel worden bediend via de bijbehorende <label> s, want die staan niet over elkaar heen.)

Met behulp van de z-index kan de volgorde van weergeven worden veranderd. Een z-index werkt alleen in bepaalde omstandigheden. Eén van die omstandigheden is een absolute positie. Die hebben de <input> s iets hierboven gekregen, dus dat is geregeld.

Een element met een negatieve z-index wordt vrijwel helemaal onderaan gezet. De vijf <input> s komen hierdoor toch onder de <label> s te staan.

De <input> s worden afgedekt door de meest linkse <label>, die voor zwarte tekst op witte achtergrond. Omdat ze volledig worden afgedekt, reageren ze ook niet meer op klikken of aanraken: de <input> s worden volledig door middel van de <label> s bediend. Precies de bedoeling.

label

Alle <label> s. Dat zijn er vijf: één bij elke <input>.

Een groot deel van het uiterlijk van de <label> s is hetzelfde, dat kan hier in één keer voor alle vijf worden opgegeven. Voor de afzonderlijke <label> s worden dan later sommige dingen aangepast.

float: left;

Floaten wordt vaak gebruikt om blok-elementen op dezelfde regel te houden. Maar een <label> is een inline-element, daarom staan alle vijf de <label> s al naast elkaar op dezelfde regel. Toch is dit floaten niet overbodig.

Bij een inline-element kunnen eigenschappen als breedte en regelhoogte niet worden gebruikt. Als je van de <label> s een blok-element maakt, kan dat wel. Maar dan worden de <label> s elk op een nieuwe regel gezet. Dat werkt dus niet.

Afbeelding 5: kier tussen de labels

Je zou display: inline-block; kunnen gebruiken. Dan kunnen eigenschappen als breedte en regelhoogte wel worden gebruikt, terwijl de <label> s toch op dezelfde regel blijven staan. Het beste uit twee werelden, zou je denken. Helaas levert dat het resultaat uit de afbeelding op: een kier tussen de <label> s.

In de html staat elke <input> en elke <label> op een nieuwe regel. Tussen twee inline-elementen die in de html op een aparte regel staan, wordt een spatie toegevoegd. Dat is meestal ook, wat je wilt. Maar hier even niet, want die spatie is de kier die je op de afbeelding ziet. Je kunt dit oplossen door de vijf <input> s en de vijf <label> s in de html op één regel te zetten, maar dat wordt waanzinnig onoverzichtelijk.

Het simpelste is om de vijf <label> s gewoon naar links te floaten. Voor het op één regel staan is dat niet nodig. Maar als je n inline-element float, wordt het n soort blok-element en zijn eigenschappen als breedte en regelhoogte wel te gebruiken. En omdat de <label> s in n soort blok-element zijn veranderd, wordt geen spatie meer tussen de <label> s gezet. Daarmee is dit de simpelste oplossing.

width: 24px;

Breedte.

line-height: 24px;

Regelhoogte.

Omdat geen aparte hoogte is opgegeven, is dit ook de hoogte van de <label> s. Tekst wordt normaal genomen automatisch verticaal gecentreerd binnen de regelhoogte. Door het gebruik van regelhoogte in plaats van een gewone hoogte, staat de A gelijk verticaal gecentreerd binnen de <label>.

Normaal kun je voor de regelhoogte beter geen absolute eenheid als px gebruiken, omdat de regelhoogte dan niet wordt aangepast aan een eventueel door de bezoeker vergrote letter. Bij een relatieve eenheid als em gebeurt dat wel. In dit geval zijn de <label> s echter zo groot, dat een grotere letter geen probleem is.

font-size: 1.5em;

Iets grotere letter.

Als eenheid wordt de relatieve eenheid em wordt gebruikt en geen absolute eenheid zoals px, zodat de bezoeker eventueel de lettergrootte kan veranderen.

Hier iets boven zijn een breedte en regelhoogte in px opgegeven, en die kan niet worden veranderd. Normaal genomen is deze combinatie van em voor lettergrootte en px voor breedte en regelhoogte een slecht idee. Als de bezoeker de lettergrootte verandert, kan de tekst groter worden dan de breedte of de regelhoogte, want die veranderen niet mee. In dit geval is dat echter geen probleem, omdat er in de <label> s ruimte genoeg is voor een veel grotere letter.

text-align: center;

Tekst (nou ja, tekst , alleen de A ) horizontaal centreren.

margin: 0;

Sommige browsers voegen een marge toe aan een <label>. Die wordt hier weggehaald.

border: black solid 1px;

Zwart randje.

border-top: none;

In kleinere browservensters staat geen border aan de bovenkant. In grotere vensters staan de <label> s aan de bovenkant tegen div#wrapper aan, die bij #wrapper een border aan de bovenkant krijgt. In beide gevallen is de border aan de bovenkant van de <label> s niet nodig.

padding: 8px;

Door aan alle vier de kanten een padding te geven, worden de <label> s iets groter. Dat is belangrijk voor touchscreens, omdat anders alleen mensen met heel puntige vingers makkelijk de juiste knop kunnen aanraken.

#label-zwarte-tekst

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

label {float: left; width: 24px; line-height: 24px; font-size: 1.5em; text-align: center; margin: 0; border: black solid 1px; border-top: none; padding: 8px;}

Het element met id="label-zwarte-tekst". De <label> die bij de <input> voor zwarte tekst op witte achtergrond hoort.

background: white;

Witte achtergrond.

color: black;

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

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

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

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

border-left: none;

Bij label hebben alle <label> s onder andere aan de linkerkant een zwarte border van 1 px breed gekregen. Bij deze <label> wordt de border links weggehaald.

In kleinere browservensters staat geen border aan de linkerkant. In grotere vensters staat de <label> aan de linkerkant tegen div#wrapper aan, die bij #wrapper een border aan de linkerkant krijgt. In beide gevallen is de border aan de linkerkant van deze <label> niet nodig.

#label-witte-tekst

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

label {float: left; width: 24px; line-height: 24px; font-size: 1.5em; text-align: center; margin: 0; border: black solid 1px; border-top: none; padding: 8px;}

Het element met id="label-witte-tekst". De <label> die bij de <input> voor witte tekst op zwarte achtergrond hoort.

background: black;

Zwarte achtergrond.

color: white;

Voorgrondkleur wit. Dit is ook de kleur van de tekst.

#label-blauwe-tekst

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

label {float: left; width: 24px; line-height: 24px; font-size: 1.5em; text-align: center; margin: 0; border: black solid 1px; border-top: none; padding: 8px;}

Het element met id="label-blauwe-tekst". De <label> die bij de <input> voor blauwe tekst op gele achtergrond hoort.

background: yellow;

Gele achtergrond.

color: blue;

Voorgrondkleur blauw. Dit is ook de kleur van de tekst.

border-left: none;

De <label> links van deze <label> heeft al een border aan de rechterkant. Daardoor zouden er twee borders tegen elkaar aan komen te staan. Door hier de border aan de linkerkant weg te halen, wordt dat voorkomen.

#label-gele-tekst

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

label {float: left; width: 24px; line-height: 24px; font-size: 1.5em; text-align: center; margin: 0; border: black solid 1px; border-top: none; padding: 8px;}

Het element met id="label-gele-tekst". De <label> die bij de <input> voor gele tekst op blauwe achtergrond hoort.

background: blue;

Blauwe achtergrond.

color: yellow;

Voorgrondkleur geel. Dit is ook de kleur van de tekst.

#label-bruine-tekst

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

label {float: left; width: 24px; line-height: 24px; font-size: 1.5em; text-align: center; margin: 0; border: black solid 1px; border-top: none; padding: 8px;}

Het element met id="label-bruine-tekst". De <label> die bij de <input> voor bruine tekst op groene achtergrond hoort.

background: lime;

Groene achtergrond.

color: maroon;

Voorgrondkleur bruin. Dit is ook de kleur van de tekst.

border-left: none;

De <label> links van deze <label> heeft al een border aan de rechterkant. Daardoor zouden er twee borders tegen elkaar aan komen te staan. Door hier de border aan de linkerkant weg te halen, wordt dat voorkomen.

main

Alle <main> s. Er is maar één <main>. Daarin staat de belangrijkste inhoud van de pagina. Hier is dat de tekst.

display: block;

<main> is een blok-element. Oudere browsers ondersteunen dit element niet. Een onbekend element wordt standaard als inline-element weergegeven, waardoor de padding hieronder niet goed werkt. Daarom wordt het hier voor oudere browsers veranderd in een blok-element.

padding: 30px 5px 5px;

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

Rechts, onder en links gewoon wat ruimte tussen buitenkant van en tekst in <main>.

Aan de bovenkant een grotere padding van 30 px, want daar moet ruimte zijn voor de <label> s, waarmee je de kleurencombinatie kiest.

Normaal genomen zou je de radioknoppen met de bijbehorende <label> s in een eigen <div> of zoiets zetten, maar dat kan hier niet. Om in een selector ~ te kunnen gebruiken, moeten het element voor en na de ~ dezelfde ouder hebben. Hier zijn dat voor de ~ de geselecteerde radioknop en na de ~ <main>. Daarom moet hier op deze manier aan de bovenkant van <main> ruimte worden gemaakt voor de radioknoppen en de bijbehorende <label> s.

input:focus + label

Voor deze elementen is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

label {float: left; width: 24px; line-height: 24px; font-size: 1.5em; text-align: center; margin: 0; border: black solid 1px; border-top: none; padding: 8px;}

#label-zwarte-tekst {background: white; color: black; border-left: none;}

#label-witte-tekst {background: black; color: white;}

#label-blauwe-tekst {background: yellow; color: blue; border-left: none;}

#label-gele-tekst {background: blue; color: yellow;}

#label-bruine-tekst {background: lime; color: maroon; border-left: none;}

input:focus: als een <input> focus heeft. Hier: als één van de vijf radioknoppen focus heeft. Sommige mensen gebruiken niet de muis, maar de Tab-toets om links, tekstvelden, knoppen, en dergelijke langs te gaan. Het element dat wordt bezocht, heeft de focus : een link wordt gevolgd door het indrukken van Enter, een radioknop wordt geselecteerd door het indrukken van de spatiebalk, enzovoort.

Voor gebruikers van de Tab-toets is het belangrijk om te weten, welk element focus heeft. Daarom wordt om de bij de knop horende <label> een kadertje gezet, zodat zichtbaar wordt, welke knop focus heeft.

+: het hierachter staande element moet in de html gelijk na het voor de + staande element staan. Voor de + staat input, achter de + staat label, dus het gaat om een <label> die in de html gelijk op een <input> volgt. In de html staat de bij de <input> horende <label> steeds gelijk na de <input>, dus dit koppelt de <input> aan de bijbehorende <label>.

label: de <label> die gelijk op de voor de + staande <input> volgt.

In gewone mensentaal: als een radioknop is geselecteerd, doe dan iets met de bij die radioknop horende <label>.

outline: orange solid 6px;

Oranje outline van 6 px breed geven.

Een border zou de <label> verplaatsen, omdat de grootte van het element verandert. Een outline wordt gewoon rondom het element gezet, zonder de grootte te veranderen.

outline-offset: -4px;

Normaal genomen wordt een outline rondom het element gezet, maar nu wordt de outline aan alle kanten 4 px binnen het element gezet. Omdat hier gelijk boven de outline 6 px breed is gemaakt, komt aan alle kanten 2 px van de outline buiten de <label> te staan.

De zwarte borders zijn niet bij alle <label> s aan alle kanten aanwezig. Als de outline 4 px breed zou worden gemaakt en precies binnen het element zou worden gezet, zou je dit zien. Bovendien speelt ook nog gezichtsbedrog mee: sommige kleurencombinaties lijken groter dan andere. Door de outline ook 2 px buiten de <label> s te zetten, vallen de verschillen in de borders en het gezichtsbedrog weg. Ze zijn er nog wel, maar je ziet ze niet meer.

Internet Explorer (alle systemen) en UC browser op Windows Phone 8.1 en Windows 10 Mobile ondersteunen outline-offset niet. Bij deze browsers komt de outline daardoor gewoon buiten de <label> s te staan, wat verder niet echt ernstig is. Iets meer hierover is te vinden bij Bekende problemen (en oplossingen).

position: relative;

Hier gelijk onder wordt z-index gebruikt. Een z-index werkt alleen in bepaalde omstandigheden. Eén van die omstandigheden is een relatieve positie. Omdat niets voor top en dergelijke wordt opgegeven, heeft dit verder geen invloed op de <label> s zelf.

z-index: 10; Afbeelding 6: outline verdwijnt gedeeltelijk onder volgende label

Normaal genomen wordt bij het weergeven de volgorde van de html gevolgd. Latere elementen in de html komen over eerdere te staan. Op de afbeelding is daardoor de outline van de vierde <label> aan de rechterkant gedeeltelijk onder de vijfde <label> komen te staan.

Door de z-index van de <label> met de outline te verhogen, komt deze toch altijd bovenaan te staan, ongeacht de volgorde in de html.

Een z-index werkt alleen in bepaalde omstandigheden. Eén van die omstandigheden is een relatieve positie. Die is gelijk hierboven aan de bij de <input> met focus horende <label> gegeven, dus dat is geregeld.

#voor-tab:focus

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

#voor-tab {background: #ddd; color: black; box-sizing: border-box; width: 400px; max-width: 100%; font-size: 1.5em; border: red solid 3px; padding: 5px; position: absolute; top: 18px; left: -20000px;}

Het element met id="voor-tab", maar alleen als dit focus heeft.

Sommige mensen gebruiken niet de muis, maar de Tab-toets om links, tekstvelden, knoppen, en dergelijke langs te gaan. Het met de Tab-toets bezochte element heeft focus . Ook radioknoppen kunnen op deze manier worden bezocht. Vervolgens kun je met de pijltjestoetsen van knop naar knop gaan binnen de bij elkaar horende radioknoppen. Gebruikers van de Tab-toets gebruiken zullen weten, hoe dit werkt.

Normaal genomen wordt een <p> genegeerd door de Tab-toets, maar door aan deze <p> het attribuut tabindex="0" toe te voegen, kan ook deze <p> focus krijgen.

De radioknoppen zijn in dit voorbeeld niet herkenbaar als radioknoppen. Je kunt ze wel gewoon met de Tab-toets bereiken, maar het is mogelijk niet gelijk duidelijk dat dit een groep radioknoppen is. Daarom staat in deze <p> een korte uitleg gegeven.

left: 0;

Bij #voor-tab is p#voor-tab met left: -20000px; links buiten het scherm geparkeerd. Hier wordt de <p> binnen het scherm gezet, waardoor de erin zittende tekst zichtbaar wordt.

#zwarte-tekst:checked ~ main

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

main {display: block; padding: 30px 5px 5px;}

#zwarte-tekst:checked: als het element met id="zwarte-tekst" is geselecteerd. Dit is de eerste radioknop, die bij zwarte tekst op witte achtergrond hoort.

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

De enige voorwaarde is verder dat het voor en het na de ~ staande element dezelfde ouder hebben. Dat is hier het geval: input#zwarte-tekst voor de ~ en main na de ~ hebben beide als ouder div#wrapper.

main: alle <main> s. Dat is er maar eentje.

In normale mensentaal: doe iets met <main> als de radioknop voor zwarte tekst op witte achtergrond is geselecteerd.

background: white;

Witte achtergrond.

color: black;

Zwarte voorgrondkleur. Dit is ook de kleur van de tekst.

#witte-tekst:checked + label

Voor deze element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

label {float: left; width: 24px; line-height: 24px; font-size: 1.5em; text-align: center; margin: 0; border: black solid 1px; border-top: none; padding: 8px;}

#label-witte-tekst {background: black; color: white;}

#witte-tekst:checked: als het element met id "witte-tekst" is geselecteerd. Dit is de radioknop die bij witte tekst op een zwarte achtergrond hoort.

+: het hierachter staande element moet in de html gelijk na het voor de + staande element staan. Voor de + staat #witte-tekst, achter de + staat label, dus het gaat om de <label> die gelijk na input#witte-tekst in de html staat. In de html staat de bij de <input> horende <label> steeds gelijk na de <input>, dus dit is de <label> die bij input#witte-tekst hoort.

label: de <label> die gelijk op de voor de + staande input#witte-tekst volgt.

In gewone mensentaal: als de radioknop voor witte tekst op zwarte achtergrond is geselecteerd, doe dan iets met de bij die radioknop horende <label>.

Omdat de achtergrond en de border van deze <label> normaal genomen zwart zijn, valt de <label> grotendeels weg, als de achtergrond van <main> ook zwart wordt. Daarom is voor deze <label> wat extra css nodig, als deze kleurencombinatie wordt geselecteerd.

border-color: white;

Kleur van de border veranderen in wit. Hierdoor is de border zichtbaar op de zwarte achtergrond.

border-left: none;

Hierboven is de kleur van de border in wit veranderd. Daardoor staat links opeens een knalwitte border gruwelijk lelijk te wezen. Weg ermee. (Er stond al n zwarte border, maar die stond niet lelijk te wezen, want die zag je niet.)

padding: 8px 8px 7px 9px; Afbeelding 7: border tweede label staat te laag

Bij label is aan alle kanten een padding van 8 px gegeven. Aan de onderkant wordt de padding hier 1 px minder gemaakt, op verzoek van de Afdeling Gezichtsbedrog.

Alle <label> s hebben een border aan de onderkant. Maar bij de andere <label> s valt die zwarte border weg tegen de zwarte achtergrond, die <main> bij het selecteren van deze radioknop heeft gekregen. Hier is de kleur van de border echter wit, en daardoor zie je deze border wel. Op de afbeelding is te zien, dat de witte border hierdoor lager lijkt te staan dan de andere (onzichtbare) borders. Door de padding 1 px minder te maken, komt de border voor het oog op de juiste plaats te staan. (Wat dus eigenlijk de onjuiste plaats is...)

Links gebeurt juist het omgekeerde. Hier gelijk boven is de border links weggehaald. Daardoor springt de A in de tweede <label> 1 px naar links, als de bijbehorende radioknop is geselecteerd. Als de padding daar 9 px, 1 px groter, wordt gemaakt, blijft de A op de juiste plaats staan.

#witte-tekst:checked ~ main

{background: black; color: white;} #blauwe-tekst:checked ~ main {background: yellow; color: blue;} #gele-tekst:checked ~ main {background: blue; color: yellow;} #bruine-tekst:checked ~ main {background: lime; color: maroon;}

Deze css is voor de tweede, derde, vierde en vijfde radioknop, als die is geselecteerd. Dit werkt precies hetzelfde als bij #zwarte-tekst;checked ~ main, alleen levert het andere kleurencombinaties bij <main> op.

css voor vensters minimaal 740 px breed

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

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

De css die binnen deze media query staat, geldt alleen voor vensters die minimaal 740 px breed zijn. In deze bredere vensters worden wat kleine aanpassingen aan lettergrootte, border en marge gemaakt.

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

screen: deze regel geldt alleen voor schermweergave.

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

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

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

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

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

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

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

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

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

Dat eerder genoemde mobieltje van 1024 x 768 px heeft wel degelijk het aantal pixels, waarvoor je hebt betaald. Maar die zitten dichter bij elkaar. Op een gewoon beeldscherm zitten 96 pixels per inch, wat wordt uitgedrukt met de eenheid dpi ( dots per inch ). Als dat mobieltje een resolutie van 192 dpi 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 dpi van het mobieltje is twee keer zo veel als de 96 dpi van een normaal beeldscherm. Het aantal css-pixels is dan het aantal schermpixels gedeeld door 2. 1024 x 768 gedeeld door 2 is 512 x 384 px. Het aantal css-pixels is 512 x 384 px en zit daarmee dus ruim onder de 740 px van deze media query. Je bent dus niet opgelicht, of in ieder geval niet wat betreft het aantal pixel.

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

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

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

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

body

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat. (Alleen wat binnen deze media query geldig is, wordt binnen dit blokje herhaald.)

body {background: #ff9; color: black; font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0;}

Het element waarbinnen de hele pagina staat. Veel instellingen die hier worden opgegeven, worden geërfd door de nakomelingen van <body>. Ze gelden voor de hele pagina, tenzij ze later worden gewijzigd. Dit geldt bijvoorbeeld voor de lettersoort, de lettergrootte en de voorgrondkleur.

font-size: 110%;

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

Als eenheid wordt de relatieve eenheid % gebruikt, omdat bij gebruik van een absolute eenheid zoals px niet alle browsers de lettergrootte kunnen veranderen.

#wrapper

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat. (Alleen wat binnen deze media query geldig is, wordt binnen dit blokje herhaald.)

#wrapper {-webkit-animation: bugfix infinite 1s; background: white; color: black; width: 700px; max-width: 100%; margin: 0 auto; position: relative;}

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

margin-top: 20px;

Kleine marge tussen #wrapper en de bovenkant van het browservenster. In bredere vensters is er links en rechts ook een marge, en dan is een kleine marge aan de bovenkant mooier.

border: black solid 1px;

Zwart randje.