Skip links en inhoudsopgave

Laatst aangepast: .

Positie, kleur, symbool, enz. in een lijst wijzigen

Korte omschrijving

Met behulp van css uiterlijk, kleur, plaats, enz. van teller en symbolen bij een lijst veranderen.

BELANGRIJK

Alles op deze site kan vrij worden gebruikt, met twee 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.

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

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.

Alles op deze site is gemaakt op een systeem met Linux. Daarbij is vooral gebruik gemaakt van Quanta Plus, 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

Met alleen html kun je de bij de lijst horende teller of symbool nauwelijks apart veranderen. Als je de kleur of grootte verandert, verandert de inhoud van de <li> gelijk mee. Op de positie heb je al vrijwel helemaal geen invloed.

Door list-style-type op none te zetten en met behulp van :before en content: tellers of symbolen neer te zetten, kun je deze behoorlijk veranderen zonder de inhoud van de <li> mee te veranderen.

Alle tellers en symbolen in dit voorbeeld zijn alleen met css gemaakt, zonder gebruik van afbeeldingen.

Beschrijving van code en css

De code die te maken heeft met de basis van dit voorbeeld is rood gekleurd. Alle voor dit voorbeeld niet-essentiële code is bruin.

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 ontbreken bijvoorbeeld de witte vlakken met de links. 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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">

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

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

De toevoeging achter <html hierboven hoort bij het gekozen doctype.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Zorgt dat de browser letters met accenten en dergelijke goed kan weergeven. Als je als doctype html hebt gekozen, moet je niet eindigen op />, maar op > (dit geldt voor alles in de head wat eindigt op />).

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.

<link rel="stylesheet" type="text/css" href="../../css/naam-van-stylesheet.css" /> <!--Instellingen voor Internet Explorer --> <!--[if IE]> <link rel="stylesheet" type="text/css" href="../../css/naam-van-ie-stylesheet.css"> <![endif]-->

Dit stukje code heeft in dit voorbeeldbestand geen enkel nut. Normaal genomen is het een verwijzing naar een extern stylesheet, waarin de style staat. In dit voorbeeld verwijst de href naar een niet bestaand bestand.

De bedoeling is dat je bovenstaande regels aanpast voor je eigen bestand. De hele style, die onder deze regels in de <head> staat, wordt dan in het externe bestand geplaatst waar de href naar verwijst. In dat bestand komt de style precies zo te staan zoals die nu in de <head> staat. Het bestand moet eindigen op .css.

Voordeel van een externe stylesheet is onder andere, dat deze geldig is voor alle pagina's waaraan deze is gelinkt. 'n Verandering in de lay-out hoef je dan maar op één enkele centrale plek te aan te brengen.

In die externe stylesheet zet je alles wat in dit voorbeeld tussen <style type="text/css"> en </style> staat (zonder deze begin- en eindregel).

De bovenste regel is voor de algemene stylesheet, geldig voor alle browsers. Dit is gewoon 'n link die naar 'n bestand elders verwijst, waar de css in staat. Op de plaats van "../../css/naam-van-stylesheet.css" moet je pad naar en naam van jouw stylesheet invullen.

Het eigenaardige stukje code daaronder heet een 'conditional comment' en wordt door alle browsers gezien als commentaar, omdat het tussen <!-- en --> staat. Maar Internet Explorer herkent het, door de extra toevoegingen, als speciaal voor Internet Explorer bedoeld en zal het dus uitvoeren. Het is veiliger dan een zogenaamde 'hack', waarbij vaak gebruik wordt gemaakt van 'n fout (bug) in de browser. Dit is opzettelijk aangebracht door Microsoft en zal dus blijven bestaan, terwijl 'n bug gerepareerd kan worden. Op deze manier kun je 'n stylesheet alleen voor Internet Explorer opnemen.

Dit stukje geldt voor alle versies van Internet Explorer, maar je kunt het ook per versie aangeven.

De link verwijst naar een aparte stylesheet voor Internet Explorer, waarin je css speciaal voor die browser zet. Op de plaats van "../../css-naam-van-ie-stylesheet.css" moet je pad naar en naam van je stylesheet voor Internet Explorer invullen.

De link naar het aparte stylesheet voor Internet Explorer moet ná de link naar het algemene stylesheet komen, omdat de opdrachten voor Internet Explorer dan over die uit het algemene stylesheet heen gaan.

<style type="text/css">

Voor de duidelijkheid staat de style hier in het bestand zelf, maar het is beter deze in een apart stylesheet te zetten, zoals hierboven beschreven. In die stylesheet komt alles wat tussen bovenstaande regel en </style> staat.

Technisch gezien is er geen enkel bezwaar om het in die stylesheet te zetten met dezelfde vreselijke lay-out als die ik in dit voorbeeld gebruik. Maar als je dat doet, garandeer ik je hele grote problemen omdat het volstrekt onoverzichtelijk is. Ik gebruik alleen deze lay-out omdat het anders veel te veel regels worden.

Voorbeeld van 'n goede lay-out in je css:


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

	div#header-binnen
	{
	    margin-left: 16px;
	    height: 120px;
	    text-align: center;
	}
body

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

margin: 0; padding: 0;

Slim om te doen, is soms wat afwijkend in verschillende browsers.

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

Lettersoort. Als er geen Arial is, wordt gezocht naar Helvetica. Als dat er ook niet is in ieder geval 'n lettersoort zonder schreef (dwarsstreepjes).

font-size: 110%;

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

Ik gebruik hier % als eenheid, en voor alle andere lettergroottes gebruik ik em. Dat komt door Internet Explorer. Als ik als maateenheid iets als px neem, kunnen gebruikers van Internet Explorer de lettergrootte niet veranderen.

Maar als ik overal em neem als maateenheid, wat dan voor de hand zou liggen, kom ik in de problemen met versies van Internet Explorer ouder dan versie 8. De stappen van de verkleining of vergroting zijn in die browsers zo groot, dat 't gelijk onleesbaar klein of absurd groot is.

Als je nou echter bij body geen em gebruikt (font-size: 1.1em; zou hetzelfde moeten zijn als font-size: 110%;), dan is de lettergrootte in Internet Explorer te veranderen, en in oudere versies dan versie 8 zijn de tussenstappen teruggebracht tot normale grootte.

Dit werkt ook als je als lettergrootte 100% invult. Dat heeft geen enkele invloed op de lettergrootte, behalve dus dat de tussenstappen in oudere versies nu normaal werken.

In Internet Explorer 8 is deze bug eindelijk gerepareerd. Aangezien we waarschijnlijk nog vele jaren met oudere versies dan Internet Explorer 8 zitten opgescheept, zal deze truc ook nog jaren moeten worden toegepast.

color: black;

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

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

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

background: #ff9;

Achtergrondkleurtje.

ul

Alle ongeordende lijsten. Dat zijn er zes, één voor elke serie (min of meer) bij elkaar horende serie voorbeelden.

width: 300px;

Een blok-element zoals een <ul> krijgt normaal genomen automatisch dezelfde breedte als zijn ouder. Dat is hier de body, die weer even breed is als het venster van de browser. Dus deze <ul>'s zouden even breed worden als het venster van de browser.

De erin liggende <li>'s zijn ook weer blok-elementen, en krijgen dus normaal genomen ook weer dezelfde breedte als hun ouder, dus de <ul> waar ze in liggen. Uiteindelijk worden deze dus ook even breed als het venster van de browser.

Bij sommige <li>'s is dat te breed. Het simpelste is om gewoon alle <ul>'s 'n bepaalde breedte te geven, dan hebben alle <li>'s die ook gelijk. Tenzij ik bij 'n bepaalde <li> 'n afwijkende breedte op zou geven.

margin: 20px 0 0 150px;

Aan de bovenkant 'n kleine marge van 20 px, zodat er tussen de verschillende <ul>'s wat afstand is.

Rechts en onder geen marge.

Links 'n marge van 150 px voor wat ruimte tussen de <ul>'s en de linkerkant van het venster van de browser.

padding: 0;

Verschillende browsers hebben verschillende standaard-instellingen. Door ze allemaal op 0 te zetten, ziet het er overal hetzelfde uit.

list-style-type: none;

De standaardsymbolen van een lijst zijn hier niet welkom.

ul#een li:before

Het eerste deel van de selector is gewoon normaal: elke lijst-ingang binnen de ul met id="een". Dat is de eerste lijst.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li>'s in de eerste lijst.

content: "\25cf";

Eerste lijst maandagAchter de eigenschap content komt datgene dat moet worden ingevoegd. Hier is dat een bolletje. Ik kan dat niet op 'n normale manier weergeven zoals 'n letter of 'n cijfer. Daarom gebruik ik de utf-code.

utf-8 is 'n soort tabel met volgnummers, waar alle letters van alle talen ter wereld in staan, en nog veel meer. Voor de nummering worden niet alleen cijfers, maar ook de letters a tot en met f gebruikt. Het volgnummer van 'n bolletje is 25cf. Andere symbolen, letters, cijfers, enz. hebben allemaal hun eigen volgnummer. De schuine streep voor het volgnummer geeft aan, dat dit 'n utf-8-code is.

Bij het gebruiken van dit soort symbolen moet je erop letten dat deze op elke computer zijn geïnstalleerd. Als je, ik noem maar wat, 'n runenteken zou nemen, zullen bijzonder weinig computers dat weer kunnen geven, omdat er geen font met runentekens is geïnstalleerd.

'n Lijst met bruikbare tekens die op elke computer zitten is onder andere te vinden op www.css-voorbeelden.nl. Als je echt geïnteresseerd bent in utf-8 kun je in dit artikel over utf-8 meer lezen.

margin: 0 100px 0 -100px;

Met behulp van de marge kan ik de precieze plaats van het bolletje opgeven.

Boven en onder gewoon op normale regelhoogte.

Met de marge van -100 px aan de linkerkant zet ik het bolletje 100 px terug naar links. Maar daardoor gaat ook de <li> daarachter 100 px naar links.

Met de marge rechts van 100 px zet ik de <li> weer 100 px naar rechts terug, terwijl het bolletje blijft staan. Hierdoor is uiteindelijk de inhoud van de <li> niet van plaats veranderd, maar het bolletje wel.

In Internet Explorer 8 verandert de marge niet mee met de lettergrootte, ook niet als je als eenheid em neemt. Bij zoomen verandert de marge wel gewoon. Dit is een van de kleine verschillen die tussen browsers bestaan.

color: green;

Voorgrondkleur groen. Dit is onder andere de kleur van de tekst. En omdat dit geen 'normaal' symbool bij een lijst is, verandert de kleur van de inhoud van de <li> niet mee. Met alleen html zonder css is dit niet voor elkaar te krijgen.

ul#een li#een-dins:before

De lijst-ingang met id="een-dins" binnen de ongeordende lijst met id="een".

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de tweede <li> uit zo'n serie van twee in de eerste lijst.

margin: 0 50px 0 -50px;

Eerste lijst dinsdagBij margin: 0 100px 0 -100px; heb ik 'n marge opgegeven voor elke content binnen deze <ul>, dus ook voor deze. Hier overrule ik die eerdere marge door 'n nieuwe marge op te geven. Deze werkt precies hetzelfde als de eerdere, alleen de maten zijn anders. Uitleg bij de eerste marge.

color: red;

Voorgrondkleur rood. Dit is onder andere de kleur van de tekst. En omdat dit geen 'normaal' symbool bij een lijst is, verandert de kleur van de inhoud van de <li> niet mee.

ul#een li#een-woens:before

De lijst-ingang met id="een-woens" binnen de ongeordende lijst met id="een".

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de derde <li> uit de serie van drie in de eerste lijst.

margin: 0;

Eerste lijst woensdagBij margin: 0 50px 0 -50px; heb ik 'n marge opgegeven voor elke content voor de tweede <li> uit de serie li+li binnen deze <ul>, dus ook voor deze. Hier overrule ik die eerdere marge door 'n nieuwe marge op te geven.

De hele marge wordt hier verwijderd, waardoor het bolletje tegen de inhoud van de <li> aan komt te staan.

color: blue;

Voorgrondkleur blauw. Dit is onder andere de kleur van de tekst. En omdat dit geen 'normaal' symbool bij een lijst is, verandert de kleur van de inhoud van de <li> niet mee.

li#twee-maan:before

Het eerste deel van de selector is gewoon normaal: de lijst-ingang met id="twee-maan". Dit is de lijst-ingang met 'maandag' binnen de tweede <ul>.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li> met id="twee-maan".

content: "\25ba";

Tweede lijst maandagDriehoekje voor de lijst-ingang zetten. Voor verdere uitleg zie content: \"25cf";

font-size: 0.6em;

Driehoekje iets kleiner maken. Omdat het 'n gewoon teken uit 'n font is, net als 'n normale letter, kan ik de grootte veranderen met de lettergrootte.

Ondanks het gebruik van de eenheid em verandert het driehoekje niet van grootte in Internet Explorer 8 als ik de lettergrootte verander. De inhoud van de lijst-ingang verandert wel gewoon. Bij zoomen verandert de grootte in Internet Explorer 8 ook gewoon.

li#twee-dins:before

Het eerste deel van de selector is gewoon normaal: de lijst-ingang met id="twee-dins" Dit is de lijst-ingang met 'dinsdag' binnen de tweede <ul>.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li> met id="twee-dins".

content: "\25cf";

Tweede lijst dinsdagRondje voor de lijst-ingang zetten. Voor? Ben ik dan kippig? Nee hoor, je ziet 't goed: hieronder verplaats ik hem met behulp van margin naar achter de lijst-ingang. Voor verdere uitleg zie content: \"25cf";

margin: 0 -0.89em 0 0.45em;

Met behulp van de marge kan ik de precieze plaats van het bolletje opgeven.

Boven en onder gewoon op normale regelhoogte.

Het bolletje wordt eerste gewoon normaal voor de <li> gezet.

Met de marge van 0.45em aan de linkerkant wordt het 0.45 em naar rechts gezet. Maar daardoor gaat ook de <li> daarachter 0.45 em naar rechts mee.

Zowel bolletje als <li> staan dus nu 0.45 em naar rechts, gewoon naast elkaar.

Nu geef ik de rechtermarge van het bolletje 'n negatieve waarde van -0.89 em. Hierdoor wordt de erachter staande <li> 0.89 em naar links getrokken, waardoor de <li> in het midden onder het bolletje komt te staan. Maar het bolletje zelf blijft gewoon staan. Hierdoor komt de <li> over het bolletje te staan.

Met 'n waarde van -0.89 blijkt de tekst van alle <li>'s netjes uitgelijnd onder elkaar te komen.

color: red;

Voorgrondkleur rood. Dit is onder andere de kleur van de tekst. En omdat dit geen 'normaal' symbool bij een lijst is, verandert de kleur van de inhoud van de <li> niet mee.

font-size: 3em;

Bolletje stuk groter maken. Omdat het 'n gewoon teken uit 'n font is, net als 'n normale letter, kan ik de grootte veranderen met de lettergrootte.

Ondanks het gebruik van de eenheid em verandert het bolletje niet van grootte in Internet Explorer 8 als ik de lettergrootte verander. De inhoud van de lijst-ingang verandert wel gewoon. Bij zoomen verandert de grootte in Internet Explorer 8 ook gewoon.

line-height: 0.3em;

De regelhoogte is gekoppeld aan de lettergrootte. En omdat die hier 3 em is, zou dat 'n enorme regelhoogte opleveren. Door hem weer terug te brengen tot ongeveer ⅓ komen we uiteindelijk uit op 'n ongeveer normale regelhoogte.

vertical-align: top;

Tekst op de goede hoogte zetten ten opzichte van het bolletje.

ul#twee li+li+li:before

Het eerste deel van de selector is gewoon normaal: elke lijst-ingang die gelijk volgt op 'n lijst-ingang die ook weer gelijk volgt op 'n lijst-ingang binnen de ul met id="twee". Dit is de tweede lijst.

li+li+li is 'n iets minder bekende selector, omdat Internet Explorer 6 de + niet kent en Internet Explorer 7 hem niet goed uitvoerde. Omdat deze twee fossielen sowieso niet met dit voorbeeld overweg kunnen, hebben we er geen last van en kunnen we dit dus gewoon gebruiken.

Elke <li> die gelijk op een andere <li> volgt, die ook weer op 'n andere volgt, dus de derde, vierde, enz. Er mag geen enkel ander element tussen de drie <li>'s zitten.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de derde <li> uit 'n serie van drie in de tweede lijst.

content: "\25c4";

Tweede lijst woensdagDriehoekje voor de lijst-ingang zetten. Voor? Jazeker, maar hieronder verplaats ik hem met behulp van margin naar de achterkant van de lijst-ingang. Voor verdere uitleg zie content: \"25cf";

margin: 0 -6.5em 0 6em;

Met behulp van de marge kan ik de precieze plaats van het driehoekje opgeven.

Boven en onder gewoon op normale regelhoogte.

Het driehoekje wordt eerst gewoon normaal voor de <li> gezet.

Met de marge van 6em aan de linkerkant wordt het 6 em naar rechts gezet. Maar daardoor gaat ook de <li> daarachter 6 em naar rechts mee.

Zowel driehoekje als <li> staan dus nu 6 em naar rechts, gewoon naast elkaar.

Nu geef ik de rechtermarge van het driehoekje 'n negatieve waarde van -6.5 em. Hierdoor wordt de erachter staande <li> 6.5 em naar links getrokken, waardoor de <li> vóór het driehoekje komt te staan. Maar het bolletje zelf blijft gewoon staan. Hierdoor komt de <li> voor het bolletje te staan.

Met 'n waarde van -6.5 blijkt de tekst van alle <li>'s netjes uitgelijnd onder elkaar te komen.

In Internet Explorer 8 verandert de marge niet mee met de lettergrootte, ondanks het gebruik van em als eenheid. Bij zoomen verandert de marge wel gewoon. Dit is een van de kleine verschillen die tussen browsers bestaan.

color: blue;

Voorgrondkleur blauw. Dit is onder andere de kleur van de tekst. En omdat dit geen 'normaal' symbool bij een lijst is, verandert de kleur van de inhoud van de <li> niet mee.

ul#drie li:before

Het eerste deel van de selector is gewoon normaal: elke lijst-ingang binnen de ul met id="drie". Dat is de derde lijst.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li>'s in de derde lijst.

content: "a";

Achter de eigenschap content komt de letter die moet worden ingevoegd, tussen aanhalingstekens.

margin-right: 8px;

Kleine marge rechts voor wat afstand tussen de 'a' en de erachter staande <li>'s.

ul#drie li:first-letter

De eerste letter in de <li>'s binnen de ul met id="drie".

Dit is de enige <ul> waar ik de opmaak met behulp van :first-letter kan opgeven, bij de andere <ul>'s werkt dat niet, daar moet ik de opmaak opgeven met behulp van :before. Waarom dat zo is, weet ik eigenlijk niet. Mogelijk omdat dit de enige <ul> is waar content 'n gewone letter bevat en geen utf-8-code.

color: red;

Derde lijst maandagVoorgrondkleur rood. Dit is onder andere de kleur van de tekst.

font-style: italic;

Cursief.

ul#drie li+li:first-letter

li+li is 'n iets minder bekende selector, omdat Internet Explorer 6 de + niet kent en Internet Explorer 7 hem niet goed uitvoerde. Omdat deze twee fossielen sowieso niet met dit voorbeeld overweg kunnen, hebben we er geen last van en kunnen we dit dus gewoon gebruiken.

De eerste letter van elke <li> die gelijk op een andere <li> volgt binnen de ul met id="drie", dus de eerste letter van de tweede <li>, de eerste letter van de derde <li>, enz. Er mag geen enkel ander element tussen de beide <li>'s zitten.

color: silver;

Derde lijst dinsdagVoorgrondkleur zilver. Dit is onder andere de kleur van de tekst.

text-decoration: underline;

Onderstrepen.

ul#drie li+li+li:first-letter

li+li+li is 'n iets minder bekende selector, omdat Internet Explorer 6 de + niet kent en Internet Explorer 7 hem niet goed uitvoerde. Omdat deze twee fossielen sowieso niet met dit voorbeeld overweg kunnen, hebben we er geen last van en kunnen we dit dus gewoon gebruiken.

De eerste letter van elke <li> die gelijk op een andere <li> volgt die ook weer op 'n <li> volgt binnen de ul met id="drie", dus de eerste letter van de derde <li>, de eerste letter van de vierde <li>, enz. Er mag geen enkel ander element tussen de drie <li>'s zitten.

background: white;

Derde lijst woensdagWitte achtergrond.

border: black solid 1px;

Zwart randje om de letter.

ul#vier li:before

Het eerste deel van de selector is gewoon normaal: elke lijst-ingang binnen de ul met id="vier". Dat is de vierde lijst.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li>'s in de vierde lijst.

content: "\25d9\2192";

Tweede lijst maandagEr worden twee tekens voor de lijst-ingang gezet. Voor de rest werkt dit hetzelfde als steeds bij content. Voor verdere uitleg zie content: \"25cf";

display: inline-block;

content is een inline-element. Daardoor kan ik een aantal eigenschappen als width en text-align niet gebruiken. Hiermee blijft het 'n inline-element, begint niet op 'n nieuwe regel, maar ik kan toch breedte en dergelijke gebruiken.

Ook dit wordt niet vaak gebruikt omdat, het wordt eentonig, Internet Explorer 6 en 7 het vrijwel onbruikbaar maken door een verkeerde implementatie.

margin: -1px 3px 0 0;

Rondom dit blokje staat een stippellijn van 1 px dik. Omdat de blokjes tegen elkaar aan staan, komt er tussen twee aangrenzende blokjes dus 'n dubbele stippellijn te staan, zoals hiernaast is te zien.

Als ik nu de blokjes 1 px omhoog zet, komen de tegen elkaar aanstaande lijntjes van 1 px dik precies over elkaar te staan, en zie je overal 'n lijntje van maar 1 px dik. In dit geval verschuift de <li> mee naar boven. De reden daarvan staat hier gelijk onder bij border.

border: dotted black 1px;

Stippellijn rondom het hele blokje. En omdat dit geen 'normaal' symbool of zo bij een lijst is, krijgt de <li> geen stippellijn.

content is een inline-element. Dat ik het hierboven heb veranderd in een inline-block, maakt geen verschil: het blijft een inline-element, alleen kan ik eigenschappen als breedte gebruiken. Dat is het verschil tussen display: inline-block; en display: block; waarmee ik het in 'n gewoon blok-element zou veranderen.

Daardoor heeft content invloed op de regelhoogte, ook van de op dezelfde regel staande <li>. De regelhoogte wordt dus verhoogd met 2 px voor de border aan boven- en onderkant.

Hier gelijk boven verplaats ik de blokjes weer 1 px omhoog om 'n dubbele stippellijn in het midden te voorkomen. Ook hier schuift de <li> weer 1 px mee omhoog. De totale toename van de regelhoogte is dus uiteindelijk maar 1 px.

width: 80px;

Breedte. En omdat dit geen 'normaal' symbool of zo bij een lijst is, heeft dit geen invloed op de breedte van de <li>.

text-align: center;

Tekst horizontaal in het midden zetten. Omdat de twee hier gebruikte tekens gewoon in 'n font zitten, net als normale letters, werkt dit ook voor deze tekens. En omdat dit geen 'normaal' symbool of zo bij een lijst is, wordt de tekst in de <li> niet gecentreerd.

background: white;

Witte achtergrond. En omdat dit geen 'normaal' symbool of zo bij een lijst is, verandert de achtergrond van de <li> niet mee.

ul#vijf li:before

Het eerste deel van de selector is gewoon normaal: elke lijst-ingang binnen de ul met id="vijf". Dat is de vijfde lijst.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li>'s in de vijfde lijst.

content: "\00a9";

Vijfde lijst maandagCopyright-teken voor de lijst-ingang zetten. Omdat dit binnen content staat, kan ik geen © gebruiken, maar moet ik de utf-8-code gebruiken. Voor verdere uitleg zie content: \"25cf";

margin-right: 8px;

Kleine afstand tussen copyright-teken en de ernaast staande <li>.

color: black;

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

Verderop geef ik sommige <li>'s 'n kleur. Daardoor verandert de kleur van de ervoor staande content mee. Maar dat kan ik weer overrulen door de content zelf 'n kleur te geven.

li#vijf-maan

De lijst-ingang met id="vijf-maan". Dit is de lijst-ingang met 'maandag' in de vijfde <ul>.

color: red;

Voorgrondkleur rood. Dit is ondere andere de kleur van de tekst. Om te voorkomen dat de ervoor staande content ook rood wordt, heb ik die bij ul#vijf li:before een eigen kleur gegeven.

li#vijf-dins

De lijst-ingang met id="vijf-dins". Dit is de lijst-ingang met 'dinsdag' in de vijfde <ul>.

color: white;

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

background: black;

Achtergrond zwart maken.

ul#vijf li#vijf-dins:before

Het eerste deel van de selector is gewoon normaal: de lijst-ingang met id="vijf-dins" binnen de ul met id="vijf". Dit is de lijst-ingang met 'dinsdag' binnen de vijfde lijst.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li> met id="vijf-dins" in de vijfde lijst.

In dit geval voeg ik niets in, want dat heb ik al bij ul#vijf li:before gedaan. Hier geef ik alleen wat extra opmaak.

color: white;

Vijfde lijst dinsdagVoorgrondkleur wit, waardoor ook het copyright-teken wit wordt. Ik heb hierboven bij li#vijf-dins de voorgrondkleur van de <li> wit gemaakt. Normaal genomen zou dan de tekstkleur van de ervoor staande content ook wit worden. Maar bij ul#vijf li:before heb ik 'n zwarte kleur gegeven aan de voor <li>'s in de vijfde lijst staande content. En die selector heeft meer gewicht dan ul#vijf-dins, dus moet ik hier specifiek aan deze content weer 'n witte kleur geven.

ul#vijf li+li+li

Een serie van drie opeenvolgende <li>'s binnen de ul met id="vijf". De enige <li> die hieraan voldoet is de <li> met 'dinsdag' in de vijfde lijst.

li+li+li is 'n iets minder bekende selector, omdat Internet Explorer 6 de + niet kent en Internet Explorer 7 hem niet goed uitvoerde. Omdat deze twee fossielen sowieso niet met dit voorbeeld overweg kunnen, hebben we er geen last van en kunnen we dit dus gewoon gebruiken.

Elke <li> die gelijk op een andere <li> volgt, die ook weer op 'n andere volgt, dus de derde, vierde, enz. Er mag geen enkel ander element tussen de drie <li>'s zitten.

color: blue;

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

ul#zes

De ul met id="zes". De zesde lijst.

counter-reset: teller;

Hiermee wordt een teller aangemaakt met de naam 'een'. Omdat ik geen begingetal opgeef, wordt de teller geïnitialiseerd op 0.

ul#zes li

De <li>'s binnen de ul met id="zes". De lijst-ingangen binnen de zesde lijst.

counter-increment: een;

Verhoog de hier gelijk boven aangemaakte teller met de naam 'een'. Omdat ik geen waarde opgeef, wordt gewoon met 1 verhoogd. De teller was geïnitialiseerd op 0. Omdat hij wordt verhoogd voordat hij wordt getoond, staat hij dus netjes op 1 als hij voor 't eerst wordt getoond.

ul#zes li:before

Het eerste deel van de selector is gewoon normaal: elke lijst-ingang binnen de ul met id="zes". Dit is de zesde lijst.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li>'s in de zesde lijst.

content: "a-" counter(een);

Achter content: komt te staan wat er moet worden ingevoegd. Allereerst is dat de letter a gevolgd door een afbreekteken. Omdat dit letterlijk moet worden ingevoegd, staat het tussen aanhalingstekens.

Daarachter moet de teller met de naam 'een', die hierboven is aangemaakt, komen te staan. Deze teller wordt automatisch bij elke ul#zes li, dus bij elke lijst-ingang uit de zesde lijst, verhoogd. Achter de 'a-' komt dus een getal te staan.

In plaats van 'n getal kun je ook 'n letter of 'n Romeins cijfer of zo laten weergeven, maar omdat ik hier verder niets opgeef wordt de standaardteller gebruikt: een getal.

margin-right: 10px;

Kleine afstand tussen teller en <li>.

li#zes-maan:before

Het eerste deel van de selector is gewoon normaal: de lijst-ingang met id="zes-maan". Dit is de <li> met 'maandag' binnen de zesde lijst.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li> met id="zes-maan" in de zesde lijst.

In dit geval voeg ik niets in, want dat heb ik al bij ul#zes li:before gedaan. Hier geef ik alleen wat extra opmaak.

text-decoration: overline;

Zesde lijst maandagStreep boven inhoud van content zetten. En omdat dit geen 'normaal' symbool bij een lijst is, krijgt de inhoud van de <li> geen streep.

li#zes-dins:before

Het eerste deel van de selector is gewoon normaal: de lijst-ingang met id="zes-dins". Dit is de <li> met 'dinsdag' binnen de zesde lijst.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li> met id="zes-dins" in de zesde lijst.

In dit geval voeg ik niets in, want dat heb ik al bij ul#zes li:before gedaan. Hier geef ik alleen wat extra opmaak.

font-style: italic;

Zesde lijst dinsdagInhoud van content cursief weergeven. En omdat dit geen 'normaal' symbool bij een lijst is, wordt de inhoud van de <li> niet cursief.

color: red;

Voorgrondkleur rood. Dit is onder andere de kleur van de tekst. En omdat dit geen 'normaal' symbool bij een lijst is, verandert de kleur van de inhoud van de <li> niet mee.

li#zes-woens

De lijst-ingang met id="zes-woens". Dit is de lijst-ingang met 'woensdag' uit de zesde lijst.

color: brown;

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

li#zes-woens:before

Het eerste deel van de selector is gewoon normaal: de lijst-ingang met id="zes-woens". Dit is de <li> met 'woensdag' binnen de zesde lijst.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li> met id="zes-woens" in de zesde lijst.

In dit geval voeg ik niets in, want dat heb ik al bij ul#zes li:before gedaan. Hier geef ik alleen wat extra opmaak.

color: blue;

Zesde lijst dinsdagVoorgrondkleur blauw. Dit is onder andere de kleur van de tekst. En omdat dit geen 'normaal' symbool bij een lijst is, verandert de kleur van de inhoud van de <li> niet mee.

font-weight: bold;

Vet. En omdat dit geen 'normaal' symbool bij een lijst is, wordt de inhoud van de <li> niet vet.

ul#zes li#zes-don:before

Het eerste deel van de selector is gewoon normaal: de lijst-ingang met id="zes-don" binnen de ul met id="zes". Dit is de <li> met 'donderdag' binnen de zesde lijst.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li> met id="zes-don" in de zesde lijst.

In dit geval voeg ik niets in, want dat heb ik al bij ul#zes li:before gedaan. Hier geef ik alleen wat extra opmaak.

Deze selector is langer dan die van de andere <li>'s in de zesde lijst: er staat ul#zes voor, en bij de andere niet.

Bij ul#zes li:before heb ik een marge opgegeven voor alle <li>'s binnen de zesde lijst. Alleen deze <li> moet een afwijkende marge krijgen. Als ik als selector alleen li#zes-don:before neem, heeft hij te weinig gewicht om ul#zes li:before te overrulen. Door er ul#zes aan toe te voegen, krijgt hij genoeg gewicht.

margin: 0 40px 0 -30px;

Zesde lijst donderdagMet behulp van de marge kan ik de precieze plaats van de teller opgeven.

Boven en onder gewoon op normale regelhoogte.

De teller wordt eerst gewoon normaal voor de <li> gezet.

Met de marge van -30px aan de linkerkant wordt de teller 30 px naar links gezet. Maar daardoor gaat ook de <li> daarachter 30 px naar links mee.

Zowel teller als <li> staan dus nu 30 px naar links, gewoon naast elkaar.

Nu geef ik de rechtermarge van de teller 'n waarde van 40px. Hierdoor wordt de <li> 40 px naar rechts verplaatst, terwijl de teller gewoon blijft staan. Deze teller komt hierdoor dus links van alle andere tellers te staan, terwijl de <li> gewoon is uitgelijnd met de andere <li>'s.

font-style: italic;

Cursief. En omdat dit geen 'normaal' symbool bij een lijst is, wordt de inhoud van de <li> niet cursief.

ul#zes li+li+li+li+li:before

Het eerste deel van de selector is gewoon normaal: elke lijst-ingang die gelijk volgt op 'n lijst-ingang die ook weer gelijk volgt op 'n lijst-ingang en dit nog twee maal, binnen de ul met id="zes". Dit is de zesde lijst.

li+li+li+li+li is 'n iets minder bekende selector, omdat Internet Explorer 6 de + niet kent en Internet Explorer 7 hem niet goed uitvoerde. Omdat deze twee fossielen sowieso niet met dit voorbeeld overweg kunnen, hebben we er geen last van en kunnen we dit dus gewoon gebruiken.

Elke <li> die gelijk op een andere <li> volgt, en dit nog drie keer. Dus de vijfde, zesde, enz. Er mag geen enkel ander element tussen de vijf <li>'s zitten.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de vijfde <li> uit 'n serie.

In dit geval voeg ik niets in, want dat heb ik al bij ul#zes li:before gedaan. Hier geef ik alleen wat extra opmaak.

text-decoration: overline underline;

Zesde lijst vrijdagLijntje boven en onder de teller zetten. En omdat dit geen 'normaal' symbool bij een lijst is, krijgt de inhoud van de <li> de lijntjes niet.

Speciaal voor Internet Explorer 6 en 7

< !--[if (IE 6) | (IE 7)]> <style type="text/css"> ul {padding-left: 20px; list-style-type: disc;} ul#drie li:first-letter {font-style: normal; color: black;} ul#vijf li, li#zes-woens {color: black; background: none;} ul#drie li+li:first-letter, ul#drie li+li+li:first-letter, ul#vijf li+li+li {border: 0; color: black; text-decoration: none; background: none;} </style> <![endif]-->

Dit eigenaardige stukje code heet een 'conditional comment' en wordt door alle browsers gezien als commentaar, omdat het tussen <!-- en --> staat. Maar Internet Explorer herkent het, door de extra toevoegingen, als speciaal voor Internet Explorer bedoeld en zal het dus uitvoeren. Het is veiliger dan een zogenaamde 'hack', waarbij vaak gebruik wordt gemaakt van 'n fout (bug) in de browser. Dit is opzettelijk aangebracht door Microsoft en zal dus blijven bestaan, terwijl 'n bug gerepareerd kan worden.

De style voor Internet Explorer moet ná de normale komen, omdat de opdrachten voor Internet Explorer dan over de normale heen gaan.

Dit stukje geldt voor Internet Explorer 6 en 7 (het verticale streepje betekent 'of'), maar je kunt het ook voor andere versies aangeven.

In plaats van de style kun je ook 'n normale link naar 'n extern css-bestand aanbrengen:

<!--[if (IE 6) | (IE 7)]> <link rel="stylesheet" type="text/css" href="../../css/naam-van-ie-stylesheet.css"> <![endif]-->

Op de plaats van "../../css/naam-van-ie-stylesheet.css" vul je pad naar en naam van jouw stylesheet voor Internet Explorer 6 en 7 in. De css voor Internet Explorer 6 en 7 komt dan apart in die stylesheet te staan, zodat het de andere browsers niet stoort.

Het is belangrijk dat de spaties in <!--[if (IE 6) | (IE 7)]> en <![endif]--> precies zo worden overgenomen zoals ze hier staan.

Internet Explorer 6 en 7 herkennen beide content en :before niet, dus negeren ze dat. Hierdoor werkt dit voorbeeld bij geen van beide.

Maar sommige regels van de css worden wel herkend, bijvoorbeeld 'n andere voorgrondkleur voor 'n bepaalde <li>. Dat moet hier dus worden uitgeschakeld.

Internet Explorer 6 herkent ook + in 'n selector niet en negeert die ook. Dus voor Internet Explorer 6 hoeft iets minder te worden uitgeschakeld.

Maar omdat dit voorbeeld niet werkt in Internet Explorer 6 én 7 en ze gedeeltelijk dezelfde correcties nodig hebben, combineer ik de css voor deze beide fossielen gewoon. Dat er dan voor Internet Explorer 6 meer in staat dan nodig is, is geen probleem.

Feitelijk zou ik vrijwel alle selectors in één regel kunnen zetten. Maar zodra er :first-letter binnen een selector staat, negeert Internet Explorer 6 alle andere selectors in dezelfde regel. Dus moet ik 'n aantal aparte regels maken.

ul

Alle ongeordende lijsten.

padding-left: 20px;

In de algemene css is de padding op 0 gezet. Daardoor is er geen ruimte voor 'n symbool, dus die maak ik hier.

list-style-type: disc;

'n Rondje voor elke <li> zetten. Ik kan natuurlijk ook 'n getal of letter nemen. Mogelijk moet je dan wel 'n grotere padding-left geven.

ul#drie li:first-letter

De eerste letter van de lijst-ingangen in de lijst met id="drie". Dat is de derde lijst.

font-style: normal; color: black;

In de algemene css zijn deze eigenschappen veranderd, hier weer terug naar normaal.

ul#vijf li, li#zes-woens

De lijst-ingangen in de ul met id="vijf" (de vijfde lijst) en de lijst-ingang met id="zes-woens" (de lijst-ingang met 'woensdag' in de zesde lijst).

color: black; background: none;

In de algemene css zijn deze eigenschappen veranderd, hier weer terug naar normaal.

ul#drie li+li:first-letter, ul#drie li+li+li:first-letter, ul#vijf li+li+li

li+li wil zeggen: twee <li>'s gelijk achter elkaar, zonder iets ertussen. li+li+li idem, maar dan drie.

Dus elke serie van twee of drie <li>'s achter elkaar in de ul met id="drie" (de derde lijst) en elke serie van drie <li>'s achter elkaar in de ul met id="vijf" (de vijfde lijst).

border: 0; color: black; text-decoration: none; background: none;

In de algemene css zijn deze eigenschappen veranderd, hier weer terug naar normaal.

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 (accessibility in het Engels) is belangrijk voor bijvoorbeeld blinden die een spraakbrowser gebruiken, of voor motorisch gehandicapte mensen die moeite hebben met het bedienen van een muis. Een spider van een zoekmachine (dat is het programmaatje wat de site indexeert voor de zoekmachine) is te vergelijken met een blinde. Als je je site goed toegankelijk maakt voor gehandicapten, is dat dus 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

Zonder css, zoals veel spraakbrowsers en dergelijke het zien, zijn dit gewoon ongeordende lijsten. Het veranderen van de standaard-symbolen levert dus geen extra toegankelijkheidsproblemen op.

Getest in

Laatst gecontroleerd op 27 maart 2012.

(Internet Explorer 6 is voor het laatst gecontroleerd op 21 maart 2010. Op deze browser test ik niet meer. Maar omdat de code niet is veranderd, neem ik aan dat dit voorbeeld ook nog werkt in Internet Explorer 6.)

Dit voorbeeld is getest in Firefox, Opera, Safari, Google Chrome, Internet Explorer 6, 7, 8 en 9 in de resoluties 800x600, 1024x768, 1280x1024 en 1440x900. Steeds met de laatste versie van die browsers, omdat ik geen zin heb om rekening te houden met mensen die met zwaar verouderde browsers surfen. Dat is trouwens vragen om ellende, want updates van browsers hebben heel vaak met beveiligingsproblemen te maken. In de resoluties 1024x768, 1280x1024 en 1440x900 is ook in- en uitzoomen en een kleinere en grotere letter getest. Er is ingezoomd en vergroot tot zover de browser kan, maar niet verder dan tot 200%.

Eventuele problemen met betrekking tot zoomen en lettergrootte staan bij Bekende problemen.

Er is getest met behulp van muis en toetsenbord.

Naast deze 'gewone' browsers is ook getest in Lynx, WebbIE, NVDA en Fangs Screen Reader Emulator. Lynx is een browser die alleen tekst laat zien en geen css gebruikt. WebbIE is een browser die gericht is op mensen met een handicap. NVDA is een screenreader, zoals die door blinden wordt gebruikt. Fangs Screen Reader Emulator is een extensie bij Firefox, die de pagina laat zien zoals een screenreader hem ziet.

Als het voorbeeld in deze vier 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 van dit voorbeeld staan onderaan 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 mobiele systemen als iOS of Android, en ook niet op apparaten als smartphones, iPad, enz. De kans is heel erg groot dat dit voorbeeld niet (volledig) werkt op dat soort systemen en apparaten. Om het wel (volledig) werkend te krijgen, zul je vaak wijzigingen en/of aanvullingen moeten aanbrengen.

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

Nieuwe browsers test ik pas als ze uit het bèta-stadium zijn, omdat er anders 'n redelijke kans is dat ik 'n bug zit te omzeilen, 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 kan ik niet beantwoorden, en het melden van fouten in niet-geteste browsers heeft ook geen enkel nut. (Melden van fouten, problemen, enz. in wel geteste browsers: graag!)

Wijzigingen

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

:

Nieuw opgenomen.

25 april 2011:

Bekende problemen

Alle browsers

Niet alle eigenschappen werken in alle browsers binnen content:. Daarom moet alles goed worden getest in verschillende browsers. In Firefox werkt bijvoorbeeld position niet, in Internet Explorer 8 verandert de breedte van de marge niet mee met de lettergrootte, ook niet bij gebruik van de eenheid em. De lettergrootte zelf verandert trouwens ook niet. Goed testen in verschillende browsers is hier absoluut noodzakelijk.

(Opmerking 25 april 2011: In Firefox lijkt position inmiddels ook te werken, maar het principe van bovenstaande blijft bestaan: goed testen.)

Internet Explorer 6 en 7

Internet Explorer 6

In selectors waarin :first-letter voorkomt mag alleen de selector waar :first-letter bij hoort staan. Andere selectors in dezelfde regel worden genegeerd.

ul#drie li:first-letter {font-style: normal; color: black;}

en

ul#vijf li {color: black; background: none;}

mogen dus niet gecombineerd worden tot één regel met twee selectors, want ul#vijf li wordt dan genegeerd.