Skip links en inhoudsopgave

Laatst aangepast: 23 januari 2012

Lijst met automatische nummering en bijpassende (lelijke) lay-out

Korte omschrijving

Volledig automatisch verschillende soorten tellers aanmaken. Het uiterlijk van de tellers wordt onafhankelijk van de inhoud opgemaakt.

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

In Internet Explorer 6 en 7 werken de tellers niet, daar worden gewone lijsten met gewone tellers weergegeven. Zie verder Bekende problemen.

Als je de eigenschap content: gebruikt, moet die helemaal onderaan in de stylesheet komen te staan. Alles wat na deze eigenschap komt te staan in de stylesheet, wordt namelijk genegeerd door Internet Explorer 6 en 7. Dit lijkt alleen te gebeuren als er iets tussen aanhalingstekens bij content: staat, zoals ".", maar voor de zekerheid zet ik het altijd achter de rest van de css.

Dit voorbeeld is natuurlijk niet om aan te zien. Het ging me er alleen maar om te laten zien dat 'gemengde' tellers mogelijk zijn, en dat de lay-out van de inhoud min of meer los staat van de lay-out van de tellers.

Als je de kopjes van de inhoud in een link <a> zet, kun je hier in principe een inhoudsopgave voor een site van maken. Het blijft natuurlijk foeilelijk en of het echt handig is...

Zonder css, zoals veel spraakbrowsers en dergelijke de pagina zien, blijven gewone geneste lijsten over. De tellers worden wisselend weergegeven, afhankelijk van het programma. Overal worden alleen cijfers gebruikt. De weergave varieert van geen cijfers via één cijfer tot alle cijfers, inclusief subtellers.

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

Bij een geordende lijst (<ol>) kan worden gekozen voor een automatische nummering van elk lijst-item <li> in de lijst. Die nummering kan uit gewone getallen bestaan, maar ook uit letters of Romeinse cijfers. Het handige hiervan is dat de nummering zich automatisch aanpast als je 'n lijst-item weghaalt of toevoegt. Geneste lijsten krijgen automatisch een eigen teller.

Nadeel is dat er vrijwel geen mogelijkheid is om de nummering op te maken. Het is gewoon 'n enkel getal of 'n enkele letter, gevolgd door 'n punt. Je kunt nog wel kiezen of de teller binnen of buiten de eigenlijke lijst komt te staan, maar daarmee is het over. Kleur, lettersoort, enz. worden allemaal hetzelfde als van het bijbehorende lijst-item in de lijst.

Er bestaat nog 'n ander soort teller, die met behulp van css wordt aangemaakt. Deze teller heeft meer opmaakmogelijkheden.

De html is precies hetzelfde, de lijsten worden op precies dezelfde manier genest. In de css wordt list-style-type: none; gezet, zodat de gewone tellers niet worden getoond.

Nu kan ik met css een teller aanmaken en precies opgeven wat de beginstand is, en wanneer en met hoeveel die teller moet worden verhoogd of verlaagd. Elke lijst krijgt automatisch een eigen teller, net als met de standaardteller.

Ik kan alle tellers achter elkaar weergeven, waardoor je bijvoorbeeld zoiets krijgt bij geneste lijsten:

1Buitenste lijst eerste lijst-item
1.1Eerste geneste lijst eerste lijst-item
1.1.1Tweede geneste lijst eerste lijst-item
1.1.2Tweede geneste lijst tweede lijst-item
1.2Eerste geneste lijst tweede lijst-item
1.2.1Tweede geneste lijst eerste lijst-item

Enz.

De tellers worden weergegeven met behulp van content:. Daarmee kun je voor of achter 'n element, dus ook voor of achter 'n <li>, iets weergeven. In dit geval zijn dat de tellers. Het aantal tellers wordt automatisch aangepast aan het niveau van de geneste lijst. Bij de buitenste teller verschijnt maar één teller, bij de eerste geneste lijst twee tellers, enz.

Tussen de tellers komt een teken te staan, dat je zelf op kunt geven. In het voorbeeld is dat 'n punt, maar het kan van alles zijn, zelfs woorden.

De tellers zijn ook te combineren met gewone tekst voor of na de tellers. Als ik in de css binnen content: bijvoorbeeld 'Hoofdstuk' voor de tellers zet, komt er ook op het scherm 'Hoofdstuk ' voor de tellers te staan.

Anders dan bij de standaardtellers kan ik de inhoud van content: wel min of meer onafhankelijk van het lijst-item opmaken, en ook de plaats kan ik vrij precies bepalen.

Er is nog meer mogelijk. Als ik de tellers elk 'n eigen naam geef en die koppel aan 'n bepaalde lijst, kan ik 'n combinatie van cijfers, letters en Romeinse cijfers gebruiken. Dat heb ik in het voorbeeld gedaan. Die tellers zijn natuurlijk te lelijk om aan te pakken, maar 't laat wel zien wat er mogelijk is.

Met enige moeite zou 't zelfs mogelijk moeten zijn elke teller 'n eigen kleur te geven. Ga ik ooit nog 'ns proberen, lijkt me 'n prima manier om je bezoekers weg te jagen.

In het verleden was het toevoegen van dingen eigenlijk niet mogelijk, omdat Internet Explorer 6 en 7 content: niet ondersteunden. En helaas werden die het meest gebruikt. Nu Microsoft met Internet Explorer 8 eindelijk 'n browser op de markt heeft gezet die 'n heel, heel, heel klein beetje in de buurt begint te komen van wat Firefox, Opera en Safari al jaren kunnen, en Google Chrome vanaf z'n geboorte, worden dit soort dingen eindelijk bruikbaar.

Omdat Internet Explorer 6 en 7 de css die ze niet kennen gewoon negeren, worden in die browsers gewone geneste lijsten met 'n gewone teller weergegeven. Ook nog steeds acceptabel, alleen veel simpeler. Alle lay-out heb ik ook weggehaald, maar dat hoeft niet.

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.

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

Zwarte letter.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de kleur en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de tekstkleur, 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 tekstkleur geen van beide.

background: #ff9;

Achtergrondkleurtje.

div#content

De div met id="content". Binnen deze div staat de hele handel. Wordt hier alleen gebruikt om 'n marge aan te kunnen brengen.

margin-left: 30px;

Links 'n marge van 30 px.

ol

Alle ongeordende lijsten. Aan deze selector voldoet élke <ol>, ook de geneste. Als ik bij 'n geneste lijst iets anders wil doen dan ik hier opgeef, moet ik dat daarom verderop in de css overrulen.

counter-reset: een;

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

Omdat dit voor álle <ol>'s geldt, krijgt élke <ol> een teller met de naam 'een', ook de dieper geneste. De tellers worden wel apart per <ol> bijgehouden. Zodra ik echter binnen een genest element, dus ook een geneste lijst, binnen deze <ol> een nieuwe teller aanmaak, vervangt die deze teller. Dit geeft de mogelijkheid om op 'n bepaald niveau van nesting 'n andere teller aan te maken, bijvoorbeeld een met letters in plaats van cijfers.

list-style-type: none;

Ook al maak ik eigen tellers aan, de standaard-tellers staan ook nog steeds aan. Die wil ik hier niet.

padding: 0;

De lijst-items en de geneste <ol>'s krijgen automatisch een padding aan de linkerkant. Die wil ik hier niet, want ik ga dat zelf regelen.

Internet Explorer 6 en 7 krijgen gewoon de standaardtellers en de standaardlijsten. Maar die maken om een reden die alleen Microsoft kent geen gebruik van padding, maar van margin, dus toevallig pakt dat hier goed uit.

font-weight: bold; font-size: 1.2em;

Vette letter, die iets groter is. Omdat ook de met content: neergezette teller deze lay-out krijgt, moet ik dat voor die teller verderop weer corrigeren. Ook voor alle geneste <ol>'s moet ik dit weer corrigeren, anders worden ze allemaal vet en iets groter.

Ik gebruik em als eenheid, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

ol ol

Alle <ol>'s die binnen een <ol> liggen. Dit geldt dus ook voor bijvoorbeeld de laatste <ol> binnen de serie <ol> <ol> <ol>, want ook die ligt binnen 'n <ol>. Oftewel: deze selector geldt voor alle <ol>'s, behalve de buitenste.

font-weight: normal;

Bij ol heb ik een vette letter opgegeven. Die geldt ook voor de geneste <ol>'s. Weer veranderen in 'n gewone. Omdat deze selector geldt voor álle <ol>'s, behalve de buitenste, krijgen deze nu allemaal 'n gewone letter.

font-size: 0.85em;

Bij ol stond font-size: 1.2em;. Maar dat geldt voor élke <ol>. En omdat lettergrootte wordt geërfd, is de lettergrootte bij de eerste geneste <ol> dus geen 1.2em, maar 1.2 x 1.2 = 1.44em. Bij de tweede geneste <ol> is het al 1.2 x 1.2 x 1.2 = 1.728em, enz. Kortom: bij de zesde geneste <ol> heb ik een gigantische lettergrootte.

Omdat de lettergrootte is geërfd van de buitenste <ol>, gebruik ik 0.85, want 0.85 x 1.2 is ongeveer 1em.

(Voor slimmeriken: ja, inderdaad, bij de volgende geneste <ol> is de lettergrootte dan weer 0.85 keer zo klein, dus geen 1em, maar 0.85em, en bij die daarna 0.85 x 0.85 = 0.7225em, enz. Dat corrigeer ik bij ol ol ol door daar 'n lettergrootte van 1em op te geven.)

Ik gebruik em als eenheid, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

font-style: italic;

Ter bevordering van de Bonte Kermis-lay-out 'n schuine letter.

ol ol ol

Alle <ol>'s die binnen een <ol> liggen, die zelf ook weer binnen een <ol> ligt. Dit geldt dus ook voor bijvoorbeeld de laatste <ol> binnen de serie <ol> <ol> <ol> <ol>, want ook die ligt binnen <ol> <ol>. Oftewel: deze selector geldt voor alle <ol>'s die minimaal twee keer zijn genest.

counter-reset: drie;

Maak een nieuwe teller aan met de naam 'drie'. Ik heb voor 'drie' gekozen omdat de teller bij de derde <ol> hoort. Omdat ik geen begingetal opgeef, wordt de teller geïnitialiseerd op 0.

Bij ol heb ik een teller met de naam 'een' geïnitialiseerd. Die geldt dus voor álle <ol>'s, want elke <ol> valt nou eenmaal onder de selector ol. Door nu bij de derde geneste <ol> een nieuwe teller aan te maken met een eigen naam, kan ik deze verderop bijvoorbeeld letters geven in plaats van cijfers.

Als ik geen nieuwe teller zou aanmaken onder de naam 'drie', zou ik wel een teller kunnen weergeven, maar die zou er dan precies hetzelfde uitzien als teller 'een'.

font-style: normal;

Bij ol ol heb ik font-style: italic; opgegeven. Dat geldt voor alle dieper liggende <ol>'s, want die vallen allemaal onder de selector ol ol.

Door nu voor de selector ol ol ol weer 'n normale letter op te geven, beperkt het italic zich tot ol ol, oftewel: tot de eerste geneste lijst. Alle dieper geneste lijsten vallen onder ol ol ol en krijgen dus weer 'n normale letter.

font-variant: small-caps;

Maar omdat ik m'n aandelen in hoofdpijntabletten toch nog wat wil opkrikken, maak ik deze kleinkapitaal. Dat geldt dus ook voor de dieper geneste lijsten, want ook die vallen allemaal onder de selector ol ol ol.

font-size: 1em;

Bij ol ol is font-size: 0.85em; opgegeven. Dat geldt voor elke serie van ol ol. Bij ol ol ol zijn er twee series van ol ol. Bij de derde <ol> is de lettergrootte dus geen 0.85em, maar 0.85 x 0.85 = 0.7225em. En bij de volgende serie 0.85 x 72.25, enz.

Om dit steeds kleiner worden te stoppen, geef ik hier gewoon 'n lettergrootte van 1em op. Het enige effect daarvan is dat de lettergrootte vanaf nu hetzelfde blijft.

Ik gebruik em als eenheid zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

ol ol ol ol

'n <ol> binnen 'n <ol> binnen ... Enfin, als je tot vier kunt tellen kun je de rest zelf aanvullen. Als je niet tot vier kunt tellen, moet ik je ernstig ontraden verder te gaan, want straks moet je wel helemaal tot zes tellen.

counter-reset: vier;

Maak een nieuwe teller aan met de naam 'vier'. Ik heb voor 'vier' gekozen omdat de teller bij de vierde <ol> hoort. Omdat ik geen begingetal opgeef, wordt de teller geïnitialiseerd op 0.

Bij ol ol ol heb ik een teller met de naam 'drie' geïnitialiseerd. Die geldt dus ook voor alle <ol>'s die onder ol ol ol ol vallen, want de laatste <ol> binnen de selector ol ol ol ol valt nou eenmaal automatisch ook onder de selector ol ol ol.

Door nu bij de vierde geneste <ol> een nieuwe teller aan te maken met een eigen naam, kan ik deze verderop bijvoorbeeld letters geven in plaats van cijfers.

Als ik geen nieuwe teller zou aanmaken onder de naam 'vier', zou ik wel een teller kunnen weergeven, maar die zou er dan precies hetzelfde uitzien als teller 'drie'.

font-variant: normal;

Bij ol ol ol heb ik font-variant: small-caps; opgegeven. Dat geldt voor alle dieper liggende <ol>'s, want die vallen allemaal onder de selector ol ol ol.

Door nu voor de selector ol ol ol ol weer 'n normale variant op te geven, beperkt het small-caps zich tot ol ol ol, oftewel: tot de tweede geneste lijst. Alle dieper geneste lijsten vallen onder ol ol ol ol en krijgen dus weer 'n normale variant.

letter-spacing: 0.4em;

Uiteraard kan ik 't niet laten om ook hier weer 'n wijziging aan te brengen: 'n grotere letter-afstand. Ook dit geldt weer voor alle dieper geneste lijsten, want ook die vallen allemaal onder ol ol ol ol.

ol ol ol ol ol

'n <ol> binnen 'n <ol> binnen ..., en dat vijf keer. Dit geldt dus alleen voor <ol>'s die binnen minstens vier andere <ol>'s zijn genest. Dat is dus ook de laatste <ol> uit de serie ol ol ol ol ol ol, want ook die valt binnen ol ol ol ol ol.

counter-reset: vijf;

Maak een nieuwe teller aan met de naam 'vijf'. Ik heb voor 'vijf' gekozen omdat de teller bij de vijfde <ol> hoort. Omdat ik geen begingetal opgeef, wordt de teller geïnitialiseerd op 0.

Bij ol ol ol ol heb ik een teller met de naam 'vier' geïnitialiseerd. Die geldt dus ook voor alle <ol>'s die onder ol ol ol ol ol vallen, want de laatste <ol> binnen de selector ol ol ol ol ol valt nou eenmaal automatisch ook onder de selector ol ol ol ol.

Door nu bij de vijfde geneste <ol> een nieuwe teller aan te maken met een eigen naam, kan ik deze verderop bijvoorbeeld letters geven in plaats van cijfers.

Als ik geen nieuwe teller zou aanmaken onder de naam 'vijf', zou ik wel een teller kunnen weergeven, maar die zou er dan precies hetzelfde uitzien als teller 'vier'.

letter-spacing: normal;

Bij ol ol ol ol heb ik letter-spacing: 0.4em; opgegeven. Dat geldt voor ook alle dieper liggende <ol>'s, want die vallen allemaal onder de selector ol ol ol ol.

Door nu voor de selector ol ol ol ol ol weer 'n normale afstand op te geven, beperkt de grotere letterafstand zich tot ol ol ol ol, oftewel: tot de derde geneste lijst. Alle dieper geneste lijsten vallen onder ol ol ol ol ol en krijgen dus weer 'n normale afstand.

font-size: 0.75em;

Kleinere lettergrootte. Ook dit geldt weer voor alle dieper geneste lijsten.

Ik gebruik em als eenheid zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

ol ol ol ol ol ol

De diepst geneste lijsten. Deze liggen allemaal binnen vijf andere lijsten.

counter-reset: zes;

Maak een nieuwe teller aan met de naam 'zes'. Ik heb voor 'zes' gekozen omdat de teller bij de zesde <ol> hoort. Omdat ik geen begingetal opgeef, wordt de teller geïnitialiseerd op 0.

Bij ol ol ol ol ol heb ik een teller met de naam 'vijf' geïnitialiseerd. Die geldt dus ook voor alle <ol>'s die onder ol ol ol ol ol ol vallen, want de laatste <ol> binnen de selector ol ol ol ol ol ol valt nou eenmaal automatisch ook onder de selector ol ol ol ol ol.

Door nu bij de zesde geneste <ol> een nieuwe teller aan te maken met een eigen naam, kan ik deze verderop bijvoorbeeld letters geven in plaats van cijfers.

Als ik geen nieuwe teller zou aanmaken onder de naam 'zes', zou ik wel een teller kunnen weergeven, maar die zou er dan precies hetzelfde uitzien als teller 'zes'.

font-size: 1em;

Bij ol ol ol ol ol is font-size: 0.75em opgegeven. Dat geldt voor elke serie van ol ol ol ol ol. Bij ol ol ol ol ol ol zijn er twee series van ol ol ol ol ol. Bij de zesde <ol> is de lettergrootte dus geen 0.75em, maar 0.75 x 0.75 = 56.25em. Omdat ik dit veel te klein vind, moet ik dat voorkomen. Daarom geef ik hier gewoon 'n lettergrootte van 1em op. Het enige effect daarvan is dat de lettergrootte nu hetzelfde blijft.

Ik gebruik ems als eenheid zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

color: #555;

Lichter kleurtje.

ol li

Elk lijst-item dat binnen een lijst ligt. Omdat per definitie élk lijst-item binnen een lijst ligt, geldt dit dus voor álle lijst-items.

counter-increment: een;

Verhoog teller 'een'. Omdat ik geen waarde opgeef, wordt gewoon met 1 verhoogd. Teller 'een' hoort bij de buitenste en bij de eerste geneste lijst. De dieper geneste lijsten heb ik elk 'n nieuwe teller gegeven met 'n andere naam. Daardoor geldt teller 'een' automatisch niet meer voor die dieper geneste lijsten.

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.

ol ol ol li

Elk lijst-item binnen 'n twee keer geneste lijst.

counter-increment: drie;

Verhoog teller 'drie'. Omdat ik geen waarde opgeef, wordt gewoon met 1 verhoogd. Teller 'drie' hoort bij de tweede geneste lijst. De dieper geneste lijsten heb ik elk 'n nieuwe teller gegeven met 'n andere naam. Daardoor geldt teller 'drie' automatisch niet meer voor die dieper geneste lijsten.

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.

ol ol ol ol li

Elk lijst-item binnen 'n drie keer geneste lijst.

counter-increment: vier;

Verhoog teller 'vier'. Omdat ik geen waarde opgeef, wordt gewoon met 1 verhoogd. Teller 'vier' hoort bij de derde geneste lijst. De dieper geneste lijsten heb ik elk 'n nieuwe teller gegeven met 'n andere naam. Daardoor geldt teller 'vier' automatisch niet meer voor die dieper geneste lijsten.

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.

ol ol ol ol ol li

Elk lijst-item binnen 'n vier keer geneste lijst.

counter-increment: vijf;

Verhoog teller 'vijf'. Omdat ik geen waarde opgeef, wordt gewoon met 1 verhoogd. Teller 'vijf' hoort bij de vierde geneste lijst. De dieper geneste lijsten heb ik elk 'n nieuwe teller gegeven met 'n andere naam. Daardoor geldt teller 'vijf' automatisch niet meer voor die dieper geneste lijsten.

ol ol ol ol ol ol li

Elk lijst-item binnen 'n vier keer geneste lijst.

counter-increment: zes;

Verhoog teller 'zes'. Omdat ik geen waarde opgeef, wordt gewoon met 1 verhoogd. Teller 'zes' hoort bij de vijfde geneste lijst.

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.

ol li:before

Zet vóór elke <li> die binnen een <ol> ligt iets neer. :before is een pseudo-element. Het zorgt ervoor dat de hieronder bij content: opgegeven tekst en dergelijke vóór elke ol li wordt neergezet. Het heet een pseudo-element omdat er als het ware een extra element bij wordt gezet. Internet Explorer 6 en 7 kennen ook :before niet en negeren dit dus.

Omdat ook elke <li> van de geneste lijsten onder deze selector valt, geldt deze regel voor álle <li>'s. Daarom moet ik verderop voor de dieper geneste lijsten een nieuwe :before opgeven, waarin de bij die lijsten horende eigenschappen en waarden worden opgegeven.

content: counters(een, " ");

Wat achter content: staat wordt neergezet op de hier gelijk boven aangegeven plaats, dus vóór <li>. Het sleutelwoord counters wordt gebruikt als er meerdere tellers met dezelfde naam moeten worden weergegeven: geef alle tellers met de naam 'een' weer. Dat zijn er twee, maar omdat deze content: bij de buitenste <ol> hoort, wordt er toch maar één teller weergegeven. De tweede teller met de naam 'een' verchijnt pas bij de eerste geneste <ol>.

Het tweede deel achter de komma, de " ", wordt gebruikt als scheiding tussen de tellers. Hoewel er hier maar één teller wordt weergegeven, is daar toch 'n waarde nodig, omdat anders niet alle browsers de content: weergeven.

De tekst en dergelijke van content: wordt in dezelfde opmaak weergegeven als de tekst en dergelijke van het element waar het bijhoort. Daarom moet ik alle eigenschappen die ik anders wil hebben hier expliciet opgeven.

Bij de diverse <ol>'s heb ik allerlei veranderingen in het uiterlijk van de tekst opgegeven. Die kan ik hier in één keer allemaal uitschakelen, omdat deze selector voor álle <li>'s geldt, en dus ook voor álle bijbehorende before:'s. Als ik hier font-variant: normal; opgeef, blijft dat gelden tot ik bij 'n volgende before: eventueel iets anders opgeef.

display: inline-block;

Om de eigenschap breedte te kunnen gebruiken, moet een element een blok-element zijn. Maar dat begint op een nieuwe regel, en dat kan ik hier niet gebruiken. Dit zorgt ervoor dat het element inline wordt weergegeven, maar dat ik toch de eigenschappen van een blok-element kan gebruiken, zoals breedte.

width: 230px;

Bij de <ol>'s heb ik de padding weggehaald, zodat ze niet meer inspringen, ook niet de geneste. Ik maak nu deze content: 230 px breed, zodat de <li> op 230 px van links begint, links uitgelijnd met alle andere <li>'s.

font-weight: normal; font-family: monospace; font-style: normal; font-variant: normal; letter-spacing: normal; color: black;

Met één uitzondering worden al deze eigenschappen bij één of meer van de <ol>'s veranderd. Ik zet ze hier allemaal weer op de standaardwaarde, zodat de tellers niet cursief en dergelijke worden weergegeven.

De ene uitzondering is font-family: monospace;. Geef alle cijfers en letters even breed weer. Ik geen geen lettersoort op, waardoor ik het aan de browser overlaat 'n lettersoort uit te zoeken. Als die maar monospace is.

Ik geef niets op voor de lettergrootte, zodat deze bij alle content:'s hetzelfde is als bij de bijbehorende elementen. Anders heeft óf de content:, óf de <li> te veel of te weinig ruimte.

ol ol li:before

Zet voor elke <li> die binnen een <ol> staat, die ook weer binnen 'n <ol> staat, iets neer.

content: counters(een, ".");

Wat achter content: staat wordt neergezet op de hier gelijk boven aangegeven plaats, dat is dus vóór de <li>'s binnen de eerste geneste lijst.

Het sleutelwoord counters wordt gebruikt als er meerdere tellers met dezelfde naam moeten worden weergegeven: geef alle tellers met de naam 'een' weer. Dat zijn er twee: eentje voor de buitenste <ol> en eentje voor de eerste geneste <ol>.

De "." geeft het teken aan dat tussen de tellers moet worden gezet: hier een punt. Maar als ik "Sinterklaas" opgeef, komt er keurig 'Sinterklaas' tussen de tellers te staan.

width: 210px;

Maak de content: 210 px breed.

margin: 0 0 0 20px;

Links een marge van 20 px. Samen met de breedte van 210 px komt de <li> dan op 230 px van links te staan, links uitgelijnd met alle andere <li>'s.

ol ol ol li:before

Zet voor elke <li> die binnen een <ol> staat, die ook weer binnen 'n <ol> staat, die ook weer..., iets neer. Dit is de selector voor de tweede geneste lijst.

content: counters(een, ".") "." counter(drie, upper-alpha) " ";

Wat achter content: staat wordt neergezet op de hier gelijk boven aangegeven plaats, dat is dus vóór de <li>'s binnen de tweede geneste lijst.

Het sleutelwoord counters wordt gebruikt als er meerdere tellers met dezelfde naam moeten worden weergegeven: geef alle tellers met de naam 'een' weer. Dat zijn er twee: eentje voor de buitenste <ol> en eentje voor de eerste geneste <ol>.

De "." geeft het teken aan dat tussen de tellers moet worden gezet: hier een punt.

Deze punt komt alleen tússen de eerste tellers met de naam 'een' te staan. Maar er staan hier drie tellers. Daarom wordt achter counters() nog een "." toegevoegd. Deze wordt gewoon letterlijk weergegeven, omdat hij tussen aanhalingstekens staat, en komt dus tussen de tweede en de derde teller te staan.

Daarna volgt de teller met de naam 'drie', de teller die bij de tweede geneste lijst hoort. Standaard worden tellers met 'n cijfer weergegeven, maar hier wil ik hoofdletters: upper-alpha.

Helemaal achteraan staat nog een spatie tussen aanhalingstekens. Ook deze wordt letterlijk weergegeven en zorgt, tot op zekere hoogte, ook bij 'n grotere lettergrootte voor enige afstand tussen tellers en <li>.

width: 190px; margin: 0 0 0 40px;

Een combinatie van een breedte van 190 px een een marge links van 40 px maakt samen 230 px. Daardoor beginnen de bijbehorende <li>'s op 230 px vanaf links, uitgelijnd met alle andere <li>'s.

ol ol ol ol li:before

Zet voor elke <li> die binnen een <ol> staat, die ook weer binnen 'n <ol> staat, die ook weer..., iets neer. Dit is de selector voor de derde geneste lijst.

content: counters(een, ".") "." counter(drie, upper-alpha) "." counter(vier, lower-alpha) " ";

Het eerste deel is precies hetzelfde als bij ol ol ol li:before. Alleen is de spatie achter teller drie vervangen door een punt, want er komt nu nog een vierde teller achter te staan: de teller met de naam 'vier'. De spatie staat nu achter deze teller.

Voor deze teller gebruik ik kleine letters: lower-alpha.

width: 170px; margin: 0 0 0 60px;

Een combinatie van een breedte van 170 px een een marge links van 60 px maakt samen 230 px. Daardoor beginnen de bijbehorende <li>'s op 230 px vanaf links, uitgelijnd met alle andere <li>'s.

ol ol ol ol ol li:before

Zet voor elke <li> die binnen een <ol> staat, die ook weer binnen 'n <ol> staat, die ook weer..., iets neer. Dit is de selector voor de vierde geneste lijst.

content: counters(een, ".") "." counter(drie, upper-alpha) "." counter(vier, lower-alpha) "." counter(vijf, lower-roman) " ";

Het eerste deel is precies hetzelfde als bij ol ol ol ol li;before. Alleen is de spatie achter teller vier vervangen door een punt, want er komt nu nog een vijfde teller achter te staan: de teller met de naam 'vijf'. De spatie staat nu achter deze teller.

Voor deze teller gebruik ik kleine Romeinse cijfers: lower-roman.

width: 150px; margin: 0 0 0 80px;

Een combinatie van een breedte van 150 px een een marge links van 80 px maakt samen 230 px. Daardoor beginnen de bijbehorende <li>'s op 230 px vanaf links, uitgelijnd met alle andere <li>'s.

ol ol ol ol ol ol li:before

Zet voor elke <li> die binnen een <ol> staat, die ook weer binnen 'n <ol> staat, die ook weer..., iets neer. Dit is de selector voor de vijfde geneste lijst, de diepste.

content: counters(een, ".") "." counter(drie, upper-alpha) "." counter(vier, lower-alpha) "." counter(vijf, lower-roman) "." counter(zes, upper-roman) " ";

Het eerste deel is precies hetzelfde als bij ol ol ol ol ol li:before. Alleen is de spatie achter teller vijf vervangen door een punt, want er komt nu nog een vijfde teller achter te staan: de teller met de naam 'zes'. De spatie staat nu achter deze teller.

Voor deze teller gebruik ik grote Romeinse cijfers: upper-roman.

In de praktijk ben je natuurlijk, laat ik 't netjes houden, geen begenadigd ontwerper als je zo'n extreem gemengde teller gaat gebruiken. Tenzij je acht jaar bent, dan is 't normaal gedrag, maar dan zou je eigenlijk elke teller ook nog 'n eigen wilde kleur moeten geven.

width: 130px; margin: 0 0 0 100px;

Een combinatie van een breedte van 130 px een een marge links van 100 px maakt samen 230 px. Daardoor beginnen de bijbehorende <li>'s op 230 px vanaf links, uitgelijnd met alle andere <li>'s.

Speciaal voor Internet Explorer 6 en 7

< !--[if (IE 6)|(IE 7)]> <style type="text/css"> ol {list-style-type: decimal; font-size: 1em; font-weight: normal;} ol ol {font-style: normal;} ol ol ol {font-variant: normal;} ol ol ol ol {letter-spacing: normal;} ol ol ol ol ol {font-size: 1em;} ol ol ol ol ol ol {color: black;} </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.

ol

Alle <ol>'s.

list-style-type: decimal;

In de algemene css is de standaardteller vervangen door eigen tellers. Dat kan niet in Internet Explorer 6 en 7, dus ik moet de standaardteller weer aanzetten. decimal zorgt voor getallen.

font-size: 1em; font-weight: normal;

De in de algemene css opgegeven lay-out weer uitschakelen, zodat alles gewoon standaard wordt weergegeven.

Ik gebruik em als eenheid zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

ol ol {font-style: normal;} ol ol ol {font-variant: normal;} ol ol ol ol {letter-spacing: normal;} ol ol ol ol ol {font-size: 1em;} ol ol ol ol ol ol {color: black;}

Het enige wat hier gebeurt is de lay-out voor alle <ol>'s weer weghalen. Maar als ik in de algemene css ol ol heb gebruikt in een selector, moet ik dat hier ook weer gebruiken, want alleen <ol> heeft minder gewicht. Hetzelfde geldt voor wat is ingesteld met ol ol ol: ik moet hier dan ook weer drie keer ol gebruiken.

Je zou alles ook gewoon kunnen laten staan, maar dat vind ik niet erg mooi.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

Eventuele opmerkingen specifiek voor dit voorbeeld staan bij Opmerkingen.

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:

Getest in

Laatst gecontroleerd op 23 januari 2012.

(Internet Explorer 6 is voor het laatst gecontroleerd op 12 januari 2010. Op deze browser test ik niet meer. Maar omdat de code nauwelijks 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.

Naast deze 'gewone' browsers is ook getest in Lynx, WebbIE, Jaws 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. Jaws 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 bij Opmerkingen.

Dit voorbeeld is niet getest op geschiktheid voor mobiele apparaten (hier worden geen laptop/notebook/netbook en dergelijke mee bedoeld, want die gedragen zich als een gewone desktopcomputer). Er wordt in veel voorbeelden css en/of html gebruikt, waar niet elk mobiel apparaat mee uit de voeten zal kunnen. En lang niet alles is geschikt voor schermen met een breedte van minder dan 800 px.

Dingen die problemen zouden kunnen opleveren, zijn onder andere een te grote breedte, het gebruik van (te veel) afbeeldingen en/of css en html die niet (volledig) wordt ondersteund, zoals :hover, float en position.

Onder Opmerkingen staat mogelijk nog wat meer over de geschiktheid van dit voorbeeld voor mobiele apparaten.

(Terzijde: de site zelf is zeker niet geschikt voor kleine mobieltjes. Dat gaat ook niet veranderen. Ik kan me namelijk niet voorstellen dat iemand zo masochistisch is 'n uitleg van tientallen schermen op 'n klein mobieltje te gaan lezen. Voor de site zelf is een minimale breedte van 800 px vereist.)

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.

2 augustus 2009:

Nieuw opgenomen.

23 september 2009:

Bij Bekende problemen opmerking over genegeerde css na content: door Internet Explorer 6 en 7 toegevoegd.

3 februari 2011:

Google Chrome en Safari hadden een eigenaardige bug: als je in- of uitzoomde, veranderde het eerste cijfer van elke teller in een 3. Deze bug bestaat niet meer, dus weggehaald.

23 januari 2012:

Bij Bekende problemen stukje over grotere lettergrootte bij Safari, Firefox en Internet Explorer toegevoegd.

Bekende problemen

Internet Explorer 6 en 7

Firefox en Safari

Als de letters worden vergroot tot 150% en meer, komen delen van de nummering over de teksten te staan. Als alleen wordt gezoomd, speelt dit niet.

Dit kan eventueel worden voorkomen door de in de regels met :before opgegeven breedte te verhogen. Als deze breedte met 70 px wordt verhoogd, kan probleemloos tot 200% worden vergroot.

Internet Explorer 8 en 9

Als in deze browsers de grootste lettergrootte wordt ingesteld, staat de nummering een heel klein stukje over de tekst heen. Voor de rest geldt ook alles, wat hierboven bij Firefox en Safari staat.