Korte omschrijving
Onder het plaatje zit een link. Als de link nog niet is bezocht, heeft het plaatje een rode waas. Als de link is bezocht, krijgt het plaatje een groene waas. Bij hoveren over het plaatje verdwijnt de waas.
Alles op deze site kan vrij worden gebruikt. Je gebruikt het wel op eigen risico: als er ergens fouten in zitten, ben ik daar niet verantwoordelijk voor en ook niet voor eventueel daardoor aangerichte schade in welke vorm dan ook. Een link naar http://www.css-voorbeelden.nl is niet verplicht, maar wordt wel gewaardeerd.
Opmerkingen
- Als je 'n link hebt bezocht, verandert de kleur van de waas van rood in groen. Om de oorspronkelijke rode kleur van een onbezochte link weer terug te krijgen, moet je de geschiedenis van je browser verwijderen.
- Aantal knoppen, grootte en vorm, plaats, enz. kunnen natuurlijk worden aangepast.
-
Zonder css, zoals veel spraakbrowsers en dergelijke de pagina weergeven, zijn dit gewone links onder een afbeelding. De knoppen zijn dus redelijk goed toegankelijk voor bijvoorbeeld mensen die moeite hebben om de muis te gebruiken.
Als ook afbeeldingen uit staan, blijft nog steeds 'n min of meer normale link over.
Bij dit soort links is het extra belangrijk voor spraakbrowsers en dergelijke (en voor zoekmachines), dat bij de link 'n title en bij de afbeelding 'n alt-tekst is opgegeven. Afhankelijk van programma en instellingen worden dan title, alt-tekst of beide gelezen.
Veel mensen gaan met de tab-toets (of een soortgelijke toets) van link naar link. De link die focus heeft (als je op Enter drukt, wordt die link gevolgd) wordt automatisch door de browser gemarkeerd met een kadertje.
Rondom een thumbnail is dit kadertje in sommige browsers erg onduidelijk. Hierdoor kan het moeilijk zijn om te zien, welke link focus heeft. Daarom geef ik een outline aan de link die focus heeft.
Internet Explorer 7 kent geen outline, dus dat werkt niet in die browser. Zie voor een mogelijke oplossing Bekende problemen.
-
Hoewel het hier maar om drie losstaande knoppen gaat en niet om een heel menu, staan ze toch in een ongeordende lijst <ul>. In het algemeen is het veel beter (en makkelijker) om een menu in een <ul> te zetten.
Een menu in een <ul> kan vaak door spraakbrowsers en dergelijke worden herkend, zodat gebruikers het in één keer kunnen passeren en naar de eigenlijke inhoud van de pagina kunnen gaan.
In dit voorbeeld zal dit echter niet altijd goed werken. Voorwaarde is namelijk dat er alleen links in de <ul> staan. In dit voorbeeld staan ook de onderschriften bij de thumbnails in de <ul>, en die zijn geen onderdeel van een link.
Daarom heb ik in dit geval een zogenaamde skip-link aangebracht. Deze link staat helemaal vooraan en is normaal genomen onzichtbaar. Maar een spraakbrowser leest hem wel voor. En ook als mensen de tab-toets gebruiken wordt de skip-link zichtbaar als hij focus heeft. Door deze link te gebruiken, wordt het menu gepasseerd en ga je in één keer naar de eigenlijke inhoud van de pagina.
Ik had ook als oplossing de onderschriftjes binnen de link kunnen zetten. Met een <br> kun je ze onder de thumbnail zetten, en met css kun je ze er dan uit laten zien als gewone tekst. Dan staan er alleen links binnen de <ul>, waardoor deze in één keer gepasseerd kan worden. Maar op het scherm zien de onderschriftjes er als gewone tekst uit. Iedereen tevreden dus.
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.
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:
Achterliggend idee
Ik zal 't maar gelijk opbiechten: bij de Korte omschrijving staat een vuige leugen. Er ligt helemaal geen waas over de afbeelding. Dat kan namelijk helemaal niet meer.
In een eerdere versie van dit voorbeeld werd de thumbnail minder zichtbaar als de link was bezocht. Maar ook dit kan niet meer.
Omdat het kinderlijk eenvoudig was met behulp van JavaScript en css te achterhalen, welke sites iemand had bezocht, kunnen bij de pseudo-class :visited alleen nog color, background-color, border-color en outline-color worden gebruikt. Daarnaast kan de kleur transparent niet worden gebruikt. Ook hsla() en rgba() kunnen niet worden gebruikt.
Dat beperkt de mogelijkheden voor opmaak van een bezochte link dus nogal. Maar deze beperkingen zijn volkomen terecht, omdat het om een joekel van een beveiligingslek gaat. Ook de standaard voor css is aan deze beperkingen aangepast.
Ik kan dus geen zichtbaarheid (opacity) meer gebruiken om de thumb minder zichtbaar te maken, zoals ik in de eerste versie van dit voorbeeld deed.
Op het moment dat ik dit schrijf, is dit alleen in Safari en Google Chrome het geval. Maar Firefox heeft al aangekondigd dezelfde beperkingen in te voeren, en de andere browsers zullen ongetwijfeld volgen.
Ik wilde toch iets doen met zichtbaarheid. Maar de zichtbaarheid van de thumb kan dus niet worden veranderd, en ik kan er ook geen filter overheen leggen als de link is bezocht, omdat opacity, hsla() en rgba() niet zijn toegestaan. Ik kan echter wel de hele thumb enigszins doorzichtig maken en de achtergrondkleur van de thumb veranderen.
De thumb moet bij een bezochte link dezelfde zijn als bij een niet-bezochte link, ik kan een afbeelding binnen een link niet meer wijzigen door de nieuwe beveiliging. Maar de achtergrondkleur van de thumb mag ik nog wel wijzigen.
De thumbnail is een gewone afbeelding, die in een link wordt gezet. Het formaat is png, omdat je dat enigszins doorzichtig kunt maken, zodat je de achtergrondkleur erdoorheen ziet. Dit wekt de indruk dat er een waas over de thumbnail heen ligt, maar dat is dus niet zo: alleen de achtergrondkleur verandert.
(Een doorzichtige png kun je bijvoorbeeld maken met het grafische programma Gimp, gratis en open source.)
Zolang de link niet is bezocht, is de achtergrondkleur van de thumb rood. Als de link is bezocht, wordt de achtergrondkleur groen. Bij hoveren over de thumb maak ik de achtergrondkleur wit, en omdat de thumb niet al te doorzichtig is, lijkt het dan min of meer een gewone afbeelding.
Originele foto. Niet doorzichtig.
Enigszins doorzichtig op witte achtergrond.
Enigszins doorzichtig op groene achtergrond.
Enigszins doorzichtig op rode achtergrond.
Hierboven staat de thumb met de verschillende achtergrondkleuren, en ook het niet-doorzichtige origineel.
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>
<html 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.
Het hier gebruikte doctype is dat van html 5. Dit kan al veilig worden gebruikt.
<meta charset="utf-8">
Zorgt dat de browser letters met accenten en dergelijke goed kan weergeven.
utf-8 is de beste charset (tekenset), omdat deze alle talen van de wereld (en nog heel veel andere extra tekens) bestrijkt, maar toch niet meer ruimte inneemt voor de code dan nodig is. Als je utf-8 gebruikt, hoef je veel minder entiteiten (ä en dergelijke) te gebruiken, maar kun je bijvoorbeeld gewoon ä gebruiken.
Deze regel moet zo hoog mogelijk komen te staan, als eerste regel binnen de head, omdat hij anders door sommige browsers niet wordt gelezen.
<link rel="stylesheet" type="text/css" href="../../css/naam-van-stylesheet.css">
Deze regel 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).
Deze regel 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.
<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 dat 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 deze lay-out alleen, 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 vanwege verschillen tussen browsers.
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.
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;
Tekstkleur zwart.
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.
Hoewel in dit voorbeeld geen tekst staat, geef ik toch een tekstkleur op. De meeste pagina's zullen immers wel tekst bevatten, en daarom is het opgeven van achtergrondkleur en tekstkleur beide een goede gewoonte.
background: #ff9;
Achtergrondkleurtje.
a#skippy
De link met id="skippy". Dit is een zogenaamde skip-link. De link in het rode kadertje hiernaast zie je normaal genomen niet, omdat hij met behulp van css ver links buiten het scherm wordt geparkeerd.
De skip-link. Normaal genomen niet zichtbaar.
Maar voor bijvoorbeeld een spraakbrowser, zoals blinden die gebruiken, bestaat hij gewoon. En is dus te gebruiken. Deze link staat helemaal bovenaan in de code, nog voor het menu. Het geeft de mogelijkheid in één keer het menu te passeren, zodat dit niet wordt voorgelezen.
Een menu dat binnen een <ul> staat, zoals in dit voorbeeld ook het geval is, wordt door spraakbrowsers en dergelijke vaak herkend en kan dan in één keer worden overgeslagen. De gemiddelde gebruiker van een spraakbrowser zal niet echt genieten van het voorlezen van steeds hetzelfde menu op elke pagina. Door het menu binnen een <ul> te zetten, kan de gebruiker dat voorlezen voorkomen.
Binnen deze <ul> staan echter niet alleen links: de onderschriftjes bij de thumbs staan buiten de link. Daardoor herkent de spraakbrowser dit niet als een serie links en kan het menu niet, of lastiger, in één keer worden overgeslagen. Daarom heb ik in dit geval een zogenaamde skip-link boven het menu gezet. Hiermee kun je het menu passeren en in één keer naar de echte inhoud van de pagina gaan.
Door het toevoegen van één simpele regel html maak je de pagina gelijk een stuk toegankelijker voor mensen met een handicap:
<a id="skippy" href="#tekst" title="Gelijk naar content">Skip menu</a>
De link zelf wordt met wat css buiten het scherm geparkeerd, zodat je hem niet ziet.
Pardon? Ik ben toch niet gek? Ik zíé die link toch zeker hierboven?
Ja, dat klopt. Met nog iets meer css kun je namelijk de pagina toegankelijker maken voor een tweede groep mensen. Veel mensen gaan met de tab-toets (of een soortgelijke toets) van link naar link, omdat ze moeite hebben een muis te bedienen. Of gewoon omdat het toetsenbord vaak veel sneller en makkelijker werkt dan de muis.
De skip-link is de eerste link. Als je de tab-toets gebruikt, is dit dus ook de eerste link die focus krijgt. Alleen heb je daar weinig aan, als je dat niet kunt zien, omdat de link ergens buiten het scherm is geparkeerd. Daarom wordt de link, als hij focus heeft, op het scherm gezet. Bij het nogmaals indrukken van de tab-toets krijgt de volgende link focus, en verdwijnt de skip-link dus weer.
Ik heb de skip-link behoorlijk opvallend gemaakt. 'n Heel klein, verlegen, bescheiden skip-linkje wordt snel over het hoofd gezien, als iemand nogal enthousiast de tab-toets gebruikt. Om deze skip-link te missen moet je toch behoorlijk je best doen, lijkt mij.
In feite heb je op elke pagina alleen maar die ene simpele regel html van hierboven nodig. Daarnaast nog wat css, maar dat is voor elke pagina hetzelfde. Maar dit soort hele kleine dingetjes maakt wel het verschil tussen een volstrekt ontoegankelijke en een redelijk toegankelijke pagina.
position: absolute;
Om de skip-link buiten het scherm te kunnen parkeren. Ik kan hem ook onzichtbaar maken met display: none;, maar dan ziet niet elke spraakbrowser en dergelijke hem.
Een link is van zichzelf een inline-element. Door hem absoluut te positioneren verandert hij in een blok-element en kan ik eigenschappen als breedte en hoogte gebruiken.
left: -2000px;
Ver links buiten het scherm parkeren, zodat hij normaal genomen onzichtbaar is.
top: 20px;
20 px vanaf de bovenkant van het venster van de browser.
z-index: 50;
Een z-index werkt alleen als het element absoluut, relatief of fixed is gepositioneerd, zoals hier het geval is. Ik wil zeker weten dat de skip-link altijd zichtbaar is (als hij binnen het scherm wordt gezet) en niet onder 'n ander element verdwijnt, vandaar een vrij hoge z-index.
width: 10em; height: 5em;
Gewoon wat hoogte en breedte, anders wordt het venstertje niet groter dan de inhoud van de tekst die erin staat.
background: white;
Witte achtergrond, valt lekker op.
line-height: 5em;
Regelhoogte. Tekst wordt altijd in het midden van de regelhoogte gezet. Als ik die even hoog maak als de hoogte van de skip-link, komt de tekst dus verticaal in het midden van de skip-link te staan.
text-align: center;
Ook horizontaal de tekst centreren.
a#skippy:focus, a#skippy:active
Als de link met id="skippy" focus heeft of als deze actief is.
Een link heeft focus als je er met de tab-toets (of een soortgelijke) toets bent aangekomen. Er staat dan een klein kadertje rondom de link, tenzij je dat zelf met css verandert. Als je op Enter drukt, wordt de link gevolgd.
Een link is actief, zolang je de muis indrukt op de link.
Althans: zo hoort het te zijn. Maar Microsoft heeft om volstrekt duistere redenen besloten om :focus niet te implementeren, en :active de werking van :focus te geven. In Internet Explorer 8 is deze enormiteit gelukkig eindelijk hersteld. Maar voor eerdere foutenfestivals van Microsoft, zoals Internet Explorer 7, is dus :active nodig.
left: 20px;
De skip-link stond ver links buiten het scherm. Nu mag hij op het scherm worden gezet en wordt dus zichtbaar.
border: red solid 3px;
Rode rand rondom de link.
Ik heb de hele link hierboven bij a#skippy al opgemaakt. Waarom dan die border pas hier? Dat heeft ook weer te maken met het technische hoogstandje Internet Explorer 7, ten onrechte ook wel 'ns browser genoemd.
Los van dat :active dus gewoon ronduit fout is geïmplementeerd, werkt left ook nog 'ns niet. Tenzij ik iets onzinnigs doe, zoals hier. Ik geef de border pas als de link actief wordt, en dan werkt left opeens. Terwijl dit helemaal niets te maken hoort te hebben met left. Maar goed, het werkt op deze manier, en andere browsers hebben er geen last van.
Maar hoe het grootste softwarebedrijf van de wereld het toch voor elkaar heeft weten te krijgen, dit soort stupide fouten in dat kreng te krijgen...
(Ja, klopt, je proeft enige irritatie. Wat heet: hoge bloeddruk en 'n woede-koliek. Dat ding zit stampvol met dit soort grappen. En Internet Explorer 6 was nóg erger. Ja, ik heb wat afgeleden...)
div#content
De div met id="content". De hele pagina (behalve de skip-link) staat binnen deze div. op deze manier kan ik alles makkelijk centreren en zo.
width: 770px;
Breedte.
margin: 0 auto;
Omdat voor onder en links geen waarde is ingevuld, krijgen die 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. Dat betekent hier: evenveel. De marge links en rechts is dus altijd evenveel. Alles staat dus steeds horizontaal gecentreerd, ongeacht de grootte van het venster van de browser en dus van het scherm.
Deze manier van horizontaal centreren van een blok-element werkt alleen, als het blok-element een breedte heeft.
ul#knoppen
De ongeordende lijst met id="knoppen". Hierbinnen staat het menu.
margin: 0; padding: 0;
De standaard-instellingen van marge en padding bij een lijst verschillen bij de diverse browsers, dus zet ik alles op 0.
list-style: none;
De gebruikelijke balletjes en dergelijke van een <ul> wil ik hier niet.
ul#knoppen li
De lijst-ingangen binnen de ongeordende lijst met id="knoppen".
float: left;
Zet zo hoog mogelijk neer en dan zover mogelijk naar links.
Een <li> is een blok-element en zou dus op een nieuwe regel komen te staan. Door ze naar links te floaten, komen ze naast elkaar te staan op dezelfde regel.
Normaal genomen vult een blok-element de hele breedte van zijn ouder, maar niet als het wordt gefloat. Het krijgt dan automatisch precies genoeg breedte om de inhoud weer te kunnen geven. Die inhoud bestaat hier uit de links met de daarin zittende thumbs, die op deze manier dus tegen elkaar aan komen te staan.
margin: 20px 35px;
Omdat voor onder en links geen waarde is ingevuld, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 20px 35px 20px 35px in de volgorde boven - rechts - onder - links.
Links en rechts 35 px marge. Hierdoor komt er wat ruimte tussen linkerkant van het venster van de browser en linkerknop, en tussen de twee knoppen. Omdat links én rechts een marge is, zit er tússen twee knoppen dus een marge van 2 x 35 px = 70 px.
Boven en onder 'n marge van 20 px. Hierdoor ontstaat er wat ruimte tussen knoppen en bovenkant van het venster van de browser. Als de twee knoppen niet naast elkaar op dezelfde regel zouden passen, komen ze onder elkaar te staan. Door deze marge zit er in dat geval ook wat afstand tussen beide knoppen.
Anders dan bij een horizontale marge, worden de verticale marges bij een blok-element over elkaar heen gezet. De grootste marge 'wint' dan. In dit geval zijn de marge aan de bovenkant van de onderste knop en aan de onderkant van de bovenste knop beide 20 px. De marge tussen beide knoppen wordt dus ook 20 px.
text-align: center;
Onder de thumbs staat een klein onderschrift. Het is netjes, als dat horizontaal onder de thumb wordt gecentreerd.
Als ik bij een <li> geen breedte opgeef, krijgt de <li> normaal genomen, omdat het een blok-element is, dezelfde breedte als zijn ouder. De ouder is hier de <ul>, die zelf ook weer een blok-element is.
De <ul> heeft ook geen breedte en wordt dus ook weer even breed als zijn ouder. Dat is div#content, die een breedte van 770 px heeft.
Normaal genomen zouden <ul> en <li> dus ook 770 px breed worden. Bij zo'n breedte krijg je de tekst natuurlijk nooit met text-align: center; midden onder elke thumb.
Maar omdat de <li> naar links wordt gefloat, krijgt in dit geval de <li> niet de volle breedte van zijn ouder. Bij floaten wordt hij precies breed genoeg om de inhoud weer te geven. En die inhoud is hier de link met de thumb.
Oftewel: als ik de tekst horizontaal in het midden van de <li> centreer, staat hij automatisch ook midden onder de thumb, want de <li> en de thumb zijn even breed.
ul#knoppen a
De links binnen de ongeordende lijst met id="knoppen". Dat zijn hier alleen maar de drie links met de thumbnails.
display: block;
Een link is van zichzelf een inline-element. Daardoor kan ik geen hoogte en breedte gebruiken. Die hoogte en breedte heb ik nodig, omdat ik bij ul#knoppen a:focus een outline opgeef rondom de link. Door de link in een blok-element te veranderen, kan ik wel hoogte en breedte gebruiken.
Als bijkomend voordeel komen de onderschriftjes onder de thumbnails nu vanzelf op een volgende regel te staan. Deze staan buiten de <a>, en omdat de <a> een blok-element is, komen ze dus op een nieuwe regel te staan: onder de <a>. Dus ook onder de thumb, want die staat wel binnen de <a>.
width: 180px; height: 161px;
De thumbnails zijn 180 px breed en 161 px hoog. Als ik de link even groot maak, staat de outline dus niet alleen om de link, maar ook om de thumbnail.
ul#knoppen a img
Afbeeldingen die binnen een link staan, die weer binnen de ongeordende lijst met id="knoppen" staat. Dat zijn hier de drie thumbnails.
border: 0;
Een afbeelding binnen een link krijgt automatisch een knalblauwe border. Waarom dat zo is, is mij een raadsel. Voor zover de mensen die deze verschrikking hebben gezien nog in staat waren te praten, heb ik nog nooit gehoord dat iemand het mooi vond. Weg ermee dus.
background: red;
De thumb is een png die een klein beetje doorzichtig is gemaakt. Daardoor zie je de achtergrondkleur van de <img> enigszins door de thumb heen.
De achtergrondkleur van de thumb binnen een nog niet bezochte link is rood. Hierdoor lijkt het alsof er een rood waas over de afbeelding hangt.
ul#knoppen a:visited img
Afbeeldingen binnen een bezochte link, die weer binnen de ongeordende lijst met id="knoppen"staat. Dat zijn hier alleen de drie thumbnails, maar dus alleen als de link is bezocht.
background: green;
De thumb is een png die een klein beetje doorzichtig is gemaakt. Daardoor zie je de achtergrondkleur van de <img> enigszins door de thumb heen.
Maak de achtergrondkleur van de thumb binnen een bezochte link groen. Hierdoor lijkt het, alsof er een groen waas over de afbeelding hangt.
ul#knoppen a:hover img
Afbeeldingen binnen een link, die weer binnen de ongeordende lijst met id="knoppen"staat, maar alleen als er over de link gehoverd wordt. Dat zijn hier alleen de drie thumbs, maar dus alleen als erover de link wordt gehoverd.
background: white;
Verander de achtergrondkleur van de <img> in wit. Omdat de thumbnail maar 'n klein beetje doorzichtig is, lijkt hij hierdoor weer min of meer een gewone afbeelding.
Bij Zolang de link niet is... kun je het verschil zien tussen de originele foto en de iets doorzichtige png op een witte achtergrond.
ul#knoppen a:focus
Als een link binnen de ongeordende lijst met id="knoppen" focus heeft.
Veel mensen gebruiken niet de muis, maar de Tab-toets of iets soortgelijks om van link naar link te gaan. Bijvoorbeeld vanwege een handicap, maar ook omdat dat vaak veel sneller werkt dan de muis.
Alle browsers geven via een kadertje om een link aan, welke link focus heeft. Als een link focus heeft en je drukt op Enter, wordt de link gevolgd.
Bij gebruik van een afbeelding is niet in alle browsers duidelijk te zien, welke link focus heeft. Daarom regel ik het kadertje hier zelf met een outline.
Internet Explorer 7 kent geen outline. Een mogelijke oplossing voor deze browser staat bij Bekende problemen.
outline: black dotted 3px;
Zwarte stippellijn van 3 px dik.
Het voordeel van outline is, dat het geen ruimte inneemt. Als ik een border van 3 px toevoeg, wordt het element 6 px breder en schuiven de buur-elementen op. Bij outline blijven andere elementen gewoon op hun plaats staan, de outline wordt eroverheen gezet.
p#tekst
De paragraaf met id="tekst". Dit is de eerste paragraaf met Latijnse tekst.
clear: both;
De lijst-ingangen, en dus de hele inhoud daarvan, zijn naar links gefloat. Normaal genomen worden blok-elementen zoals een lijst-ingang op een nieuwe regel gezet, maar niet als ze zijn gefloat. Ze komen dan naast elkaar op dezelfde regel te staan. En dus ook de in de lijst-ingangen zittende links en thumbs.
Maar als om een of andere reden de lijst-ingangen niet op dezelfde regel passen, worden ze wel onder elkaar gezet. En dan gaat het mis met de tekst die eronder staat.
Zonder clear: both; bij de bovenste paragraaf met tekst.
Met clear: both; bij de bovenste paragraaf met tekst.
Het zwarte kadertje rondom bovenstaande afbeeldingen is er voor de duidelijkheid even omheen gezet.
div#content is wit gemaakt. Hierbinnen staat de hele pagina. Deze div is 770 px breed, dus de andere onderdelen van de pagina worden ook niet breder.
De lijst-ingangen, waarbinnen de links met de thumbs staan, hebben een blauw kadertje. Lijst-ingangen zijn blok-elementen, dus normaal genomen komen ze op een nieuwe regel te staan. Maar omdat ze worden gefloat, komen ze hier naast elkaar te staan. De derde lijst-ingang past niet meer op dezelfde regel en wordt dus op een nieuwe regel gezet. De ruimte rondom de lijst-ingangen ontstaat door de marges rondom de lijst-ingangen.
De bovenste paragraaf met tekst heeft een rood kadertje.
Als een element wordt gefloat, wordt het uit de normale stroom (in het Engels flow) van de pagina gehaald.
Voor de na de gefloate lijst-ingangen komende html, hier de bovenste paragraaf met tekst, bestaan de lijst-ingangen daarom niet. De bovenste paragraaf met tekst wordt dus gewoon neergezet op dezelfde plaats als de lijst-ingangen, zoals aan het rode kadertje is te zien. Net alsof die lijst-ingangen er gewoon helemaal niet zijn.
Zou ik de paragraaf een achtergrondkleur geven, dan komt die ook onder de lijst-ingangen te staan. (Dat is anders dan normaal, want normaal genomen zou de achtergrondkleur van de paragraaf de lijst-ingangen helemaal afdekken, als hij op dezelfde plek komt te staan. De paragraaf komt in de html immers na de lijst-ingangen.)
Voor de inhoud van de paragraaf, dat is hier de Latijnse opvultekst, ligt het anders. Hoewel de paragraaf zelf vrolijk op dezelfde plaats als de lijst-ingangen komt te staan, wordt de inhoud van de paragraaf, de tekst, netjes naast de lijst-ingangen gezet.
Dit is een uitermate handige eigenschap, die het mogelijk maakt een pagina heel flexibel te vullen, maar niet helemaal wat ik hier wil hebben. Daarom voeg ik clear: both; toe aan de css voor de bovenste paragraaf met tekst.
Door een element te clearen komt het altijd op een nieuwe regel te staan, en niet op dezelfde plaats als gefloate elementen. En daardoor komt ook de inhoud daarvan, hier de Latijnse tekst, op een nieuwe regel te staan. Zoals te zien is op de rechterafbeelding.
Omdat de lijst-ingangen allemaal naar links zijn gefloat, had ik hier ook clear: left; kunnen gebruiken. Maar meestal gebruik ik clear: both;, omdat dat voorkomt dat je in de problemen komt als je later 'n float naar links in 'n float naar rechts verandert. Alleen als dat om een of andere reden echt nodig is, gebruik ik clear: left; of clear: right;. Maar hier wordt verschillend over gedacht.
De code aanpassen aan je eigen ontwerp
- Als je dit voorbeeld gaat aanpassen voor je eigen site, houdt het dan in eerste instantie zo eenvoudig mogelijk. Ga vooral geen details invullen.
Gebruik vooral geen FrontPage, Publisher of Word (alle drie van Microsoft). Deze programma's maken niet-standaard code die alleen goed te bekijken is in Internet Explorer. In alle andere browsers zie je grotendeels bagger, áls je al iets ziet.
Publisher en Word zijn niet bedoeld om websites mee te maken. FrontPage is zwaar verouderd en wordt niet meer onderhouden door Microsoft. Als je beslist 'n duur product (299 dollar) van Microsoft wilt gebruiken, neem dan Microsoft Expression Web 2. Andere uitvoeringen zijn nog veel duurder.
Je kunt natuurlijk ook het gratis programma Kompozer, de opvolger van nvu, gebruiken. Dit programma is te downloaden vanaf www.kompozer.net/download. Meer links over Kompozer vind je op de pagina met links onder Gereedschap → wysiwyg-editor.
Maar het allerbeste is om gewoon zelf html, css, enz. te leren, omdat zelfs het allerbeste programma het nog steeds zwaar verliest van 'n op de juiste manier met de hand gemaakte pagina.
- Het beste kun je 'n site maken in Firefox. Als je 'n site maakt in Firefox, Opera, Safari of Google Chrome, is er 'n hele grote kans dat hij in alle browsers werkt. Als je in Internet Explorer begint, is dat niet zo. Dat heeft te maken met historische oorzaken (als je geïnteresseerd bent: zoek maar naar 'boxmodel' en 'probleem' of zo op internet, of naar 'quirks mode'). Ik geef de voorkeur aan Firefox, omdat er zoveel extensies (uitbreidingen) voor bestaan. De twee belangrijkste voor 't maken van sites zijn Web Developer en Firebug, maar er bestaan nog tientallen andere.
Het allereerste dat je moet invoeren, is het doctype, vóór welke andere code dan ook. Een lay-out met een missend of onvolledig doctype ziet er totaal anders uit dan een lay-out met een geldig doctype. Wát er anders is, verschilt ook nog 'ns tussen de diverse browsers. Als je klaar bent en dan nog 'ns 'n doctype gaat invoeren, weet je vrijwel zeker dat je van voren af aan kunt beginnen met de lay-out.
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.
Gebruik een 'strict' doctype of het doctype voor html 5. Deze zijn bedoeld voor nieuwe sites. Het transitional doctype is bedoeld voor al bestaande sites, niet voor nieuwe. Het transitional doctype staat talloze tags toe, die in html 5 zijn verboden. Deze tags worden al zo'n tien jaar afgeraden. Het transitional doctype is echt alleen bedoeld om de puinhoop van vroeger, toen niet volgens standaarden werd gewerkt, enigszins te herstellen.
Het strict doctype staat verouderde tags niet toe. Daardoor kan met 'n strict doctype, of het nu html of xhtml is, probleemloos worden overgestapt naar html 5. Met een transitional doctype en het gebruik van afgekeurde tags kun je niet overstappen naar html 5. Je moet dan eerst alle verouderde tags verwijderen, wat echt ontzettend veel werk kan zijn.
- Als tweede voer je de charset in. Het beste kun je utf-8 nemen. Als je later van charset verandert, loop je 'n grote kans, dat je alle aparte tekens als letters met accenten weer opnieuw moet gaan invoeren.
- Test vanaf het allereerste begin in zoveel mogelijk verschillende browsers in 'n aantal resoluties (schermgroottes). Onder het kopje Getest in kun je in deze uitleg vinden waar ikzelf op test. Ook van Internet Explorer kun je meerdere versies naast elkaar draaien. Je kunt daarvoor zoeken op internet en op de pagina met links staan onder de kopjes Gereedschap → Meerdere versies van Internet Explorer draaien en Gereedschap → Weergave testen 'n aantal links die daar ook bij kunnen helpen.
- Voor alle voorbeelden geldt: breng veranderingen stapsgewijs aan. Als je bijvoorbeeld foto's wilt laten weergeven, begin dan alleen met het veranderen van de namen van de foto's, zodat je eigen foto's worden weergegeven. Maakt niet uit als de maten niet kloppen en de teksten fout zijn. Als dat werkt, ga dan bijvoorbeeld de maten aanpassen. Dan de teksten. En controleer steeds, of alles nog goed werkt.
Als het om een lay-out of iets dergelijks gaat: zorg eerst dat header, kolommen, footer, menu, en dergelijke staan en bewegen zoals je wilt, en ga dan pas details binnen die blokken invullen. In eerste instantie gebruik je dus bijvoorbeeld 'n leeg blok voor waar uiteindelijk het menu komt te staan.
Als je begint met allerlei details, is er 'n heel grote kans dat die de werking van de blokken gaan verstoren. Bouw eerst het huis, en ga dan pas de kamers inrichten. Als de blokken eenmaal werken zoals je wilt, zul je het gelijk merken als 'n toegevoegd detail als tekst of 'n afbeelding iets gaat storen. Daarvoor moet je natuurlijk wel regelmatig controleren in verschillende browsers, of alles nog wel goed werkt.
Je kunt de blokken tijdens het aanpassen opvullen met bijvoorbeeld <br>1<br>2<br>3 enz., tot ze de juiste hoogte hebben. Het is handig om aan het einde even iets toe te voegen als 'laatste', zodat je zeker weet dat er niet drie regels onderaan naar 't virtuele walhalla zijn verhuisd.
Om de breedte te vullen kun je het best 'n kort woord als 'huis' duizend keer of zo herhalen. Ook hier is het handig om aan 't einde (en hier ook aan 't begin) 'n herkenningsteken te maken, zodat je zeker weet dat je de hele tekst ziet.
- Zolang je in grotere dingen zoals 'n lay-out aan 't wijzigen bent, zou ik je aanraden de verschillende delen een achtergrondkleur te geven. Je ziet dan goed waar 'n deel precies staat.
- Als je instellingen verandert in de style, doe er dan maar 1, hooguit 2 tegelijk. Als je er 17 tegelijk verandert, moet je niet verbaasd zijn, als je niet weet wat er is gebeurd. En als je 't niet meer terug kunt draaien.
- Marges, padding en border worden bij de hoogte en breedte van de inhoud opgeteld (gaat volkomen tegen je gevoel in, maar 't is niet anders). Hier worden vaak fouten mee gemaakt. Als je bijvoorbeeld in een lay-out 'n border toevoegt aan een van de 'hoofdvakken' (header, footer, kolommen), dan wordt deze er dus bij opgeteld. Bij 'n border van 2 px rondom de linkerkolom wordt deze dus plotseling 4 px breder (2 aan beide kanten), en 4 px hoger. Zoiets kan je hele lay-out verstoren, omdat iets net te breed of te hoog wordt. Je moet dan elders iets 4 px kleiner maken. Dat zal vaak zo zijn: als je één maat verandert, zul je vaak ook 'n andere moeten aanpassen.
- In plaats van px kun je ook andere maten gebruiken, met name em. Voordeel van em is dat het door de gebruiker kan worden vergroot en verkleind, ook in Internet Explorer (andere browsers hebben meer mogelijkheden op dit gebied). Nadeel is dat het de lay-out sneller kan verstoren dan bijvoorbeeld px. Dit moet je gewoon van geval tot geval bekijken.
Valideren, valideren, valideren en dan voor 't slapen gaan nog 'ns valideren.
Valiwie???
Valideren is het controleren van je (x)html en css op 'n hele serie fouten. Computers zijn daar vaak veel beter in dan mensen. Als je 300 keer <h2> hebt gebruikt en 299 keer </h2> vindt 'n computer die ene missende </h2> zonder enig probleem. Jij ook wel, maar daarna ben je misschien wel aan vakantie toe.
Je kunt je css en (x)html zowel valideren als 't online staat, als wanneer 't nog in je computer staat. Web Developer ('n Firefox-extensie) heeft zelfs 'n mogelijkheid om de html voortdurend, bij elke wijziging, opnieuw te valideren. (Die mogelijkheid is er ook bij css, maar daar wordt altijd aangegeven dat 't valid is, wat je er ook aan onzin in zet. Maar als je in de balk op css klikt ga je naar de echte validator, en die controleert wel goed.)
(x)html kun je valideren op: validator.w3.org
css kun je valideren op: jigsaw.w3.org/css-validator
Valideren kan helpen om gekmakende fouten te vinden. Valid code garandeert ook dat de weergave in verschillende browsers (vrijwel) hetzelfde is. En valid code is over twintig jaar ook nog te bekijken.
Toegankelijkheid en zoekmachines
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:
- Gebruik altijd een alt-beschrijving bij een afbeelding. De alt-tekst is wat wordt gebruikt, als afbeeldingen niet kunnen worden gezien (dat geldt dus ook voor zoekmachines). Als je iets wilt laten zien als je over de afbeelding hovert, gebruik daar dan het title-attribuut voor, niet de alt-beschrijving.
- Gebruik bij een link een title, waarin je omschrijft waar de link naar toe leidt.
Accesskeys (sneltoetsen) kun je beter niet gebruiken. Deze gaven te veel problemen, omdat ze vaak dubbelop zijn met sneltoetsen voor de browser of andere al gebruikte sneltoetsen. Bovendien is voor de gebruiker meestal niet duidelijk, welke toetsen het zijn.
In de komende html 5 waren ze eerst niet toegestaan, maar inmiddels lijkt het erop dat ze toch worden toegestaan, maar op 'n andere manier dan in html 4.01. Ik ga ze zelf pas weer gebruiken, als duidelijk is hoe ze gaan werken, en als ze beter zijn uitgedacht dan in html 4.01 het geval was, want bij een goede toepassing is het op zich een heel goed idee.
- Met behulp van de tab-toets (of op 'n soortgelijke manier) kun je in de meeste browsers door de links lopen. Elke tab brengt je één link verder, shift-tab één link terug. Met behulp van tabindex kun je de volgorde aangeven waarin de tab-toets werkt. Zonder tabindex wordt de volgorde van de code aangehouden, maar soms is een andere volgorde logischer.
In het verleden werd vaak aangeraden de volgorde van de code aan te passen. Een menu bijvoorbeeld kon in de html onderaan worden gezet, terwijl het op het scherm met behulp van css bovenaan werd gezet. Inmiddels zijn screenreaders en dergelijke zo verbeterd, dat dit niet meer wordt aangeraden. De volgorde in de html kan tegenwoordig beter hetzelfde zijn als op het scherm, omdat het anders juist verwarrend kan werken.
Een andere mogelijkheid is een zogenaamde skip-link: een link die je buiten het scherm parkeert met behulp van css, zodat hij normaal genomen niet te zien is. Zo'n link is wel zichtbaar te maken in speciale programma's zoals spraakbrowsers. Die link staat boven het menu en linkt naar de inhoud van de pagina, zodat mensen met één klik het hele menu kunnen passeren.
Van oorsprong was html een taal om wetenschappelijke documenten weer te geven, pas later is hij gebruikt voor lay-out. Maar daar is hij dus eigenlijk nooit voor bedoeld geweest. Het gebruiken van html voor lay-out leidt tot enorme problemen voor gehandicapten en tot een lage plaats in zoekmachines.
De html hoort alleen inhoud te bevatten, lay-out doe je met behulp van css. Die css moet in een extern stylesheet staan of, als hij alleen voor één bepaalde pagina van toepassing is, in de head van die pagina. Zoekmachines zijn ook niet dol op een oerwoud van inline-stijlen (dat zijn stijlen in de tag zelf:
<div style="...">.)Breng een logische structuur aan in je document. Gebruik een <h1> voor de belangrijkste kop, een <h2> voor een subkop, enz. Spraakbrowsers en dergelijke kunnen van kopregel naar kopregel springen. En een zoekmachine gaat ervan uit dat <h1> belangrijke tekst bevat.
Dit geldt voor al dit soort structuurbepalende tags.
Als een <h1> te grote letters geeft, maak daar dan met behulp van je css 'n kleinere letter van, maar blijf die <h1> gewoon gebruiken. Op dezelfde manier kun je al dit soort dingen oplossen.
- Een table is fantastisch, maar alleen als die wordt gebruikt om een echte tabel weer te geven, niet als hij voor opmaak wordt misbruikt. In het verleden is dat op grote schaal gebeurd bij gebrek aan andere mogelijkheden. Een tabel is, als je niet heel erg goed oplet, volstrekt ontoegankelijk voor gehandicapten en zoekmachines. Het lezen van een tabel is ongeveer te vergelijken met het lezen van een krant van links naar rechts: niet per kolom, maar per regel. Dat gaat dus alleen maar goed bij een echte tabel zoals een spreadsheet. In alle andere gevallen garandeert 'n tabel 'n lagere plaats in een zoekmachine.
Frames zijn een volstrekt verouderde techniek, die heel veel nadelen met zich meebrengt. Deze zijn hier netjes op een rijtje gezet: Webrichtlijnen. iframes hebben voor een deel dezelfde nadelen.
Als je 'n stuk code vaak wilt gebruiken, zoals 'n menu dat op elke pagina hetzelfde is, include dat dan met PHP of SSI. Dan ziet iedereen (ook 'n zoekmachines dus!) alles als één pagina in plaats van als los zand aan elkaar hangende teksten.
- Geef de taal van het document aan, en bij woorden en dergelijke die afwijken van die taal de afwijkende taal met behulp van
lang="..". Ik doe dat op mijn eigen site maar af en toe, omdat de tekst (en vooral de code) een mengsel is van Engels, Nederlands en eigengemaakte namen. Dit soort teksten is gewoon niet goed in te delen in een taal. - Gebruik de tag <abbr> bij afkortingen. Doe dat de eerste keer op een pagina samen met de title-eigenschap:
<abbr title="en dergelijke">e.d.</abbr>. Daarna kun je op dezelfde pagina volstaan met <abbr>e.d.</abbr>. Doe je dit niet, dan is er 'n grote kans dat 'n spraakbrowser e.d. uit gaat spreken als Ed, en 'n zoekmachine kan er ook geen chocola van maken. De spider van 'n zoekmachine, spraakbrowsers, en dergelijke kunnen geen plaatjes 'lezen'. Het is soms verbazingwekkend om te zien hoe veel, of eigenlijk: hoe weinig tekst er overblijft op een pagina als de plaatjes worden weggehaald. Het zelfde geldt voor die fantastisch mooie flash-pagina's, als daarbij geen voorzieningen voor dit soort programma's zijn aangebracht.
Op Linux kun je met Lynx kijken hoe je pagina eruitziet zonder plaatjes en dergelijke, als echt alleen de tekst overblijft. Een installatie-programma voor Lynx op Windows is te vinden op csant.info/lynx.
In Windows kun je ook het gratis programma WebbIE installeren. WebbIE laat de pagina zien, zoals een spraakbrowser en dergelijke hem zien. WebbIE is te downloaden vanaf www.webbie.org.uk. Nog een soortgelijk gratis programma is WebFormator.
De Firefox-extensie Web Developer heeft de mogelijkheid om 'n pagina te bekijken zonder css en/of afbeeldingen.
Tenslotte kun je je pagina nog online laten controleren op 'n behoorlijk aantal sites. Ik noem er hier enkele. Helaas zijn ze bijna allemaal Engelstalig.
colorfilter.wickline.org Laat zien hoe een kleurenblinde de site ziet.
contentquality.com Test op toegankelijkheid. Heel overzichtelijk.
wave.webaim.org Deze laat grafisch zien hoe de toegankelijkheid is. Heel erg duidelijk, maar bij grotere pagina's wordt 't al snel erg chaotisch.
Omdat ze de uitleg van de icoontjes heel goed hebben weten te verstoppen, geef ik de link daarvan ook maar gelijk: wave.webaim.org/icons
www.webrichtlijnen.nl/toetsen De enige Nederlandstalige site. Test op toegankelijkheid.
Getest in
Laatst gecontroleerd op 21 augustus 2011.
Dit voorbeeld is getest in Firefox, Opera, Safari, Google Chrome, Internet Explorer 7, 8 en 9 in de resoluties 800x600, 1024x768 en 1280x1024. 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 en 1280x1024 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 staan bij Bekende problemen.
Naast deze 'gewone' browsers is alles ook getest in Lynx, WebbIE en Jaws. 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. Als het voorbeeld in deze drie 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.
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
2 januari 2008:
Eerste versie van dit voorbeeld voor het eerst opgenomen. De huidige versie is totaal anders.
22 september 2010:
Voorbeeld is totaal herschreven en ook fors veranderd, omdat opacity om veiligheidsredenen niet meer werkt in combinatie met de pseudo-class :visited. Voor de reden zie In een eerdere versie...
Omdat de code toch totaal anders werd, heb ik gelijk de hele uitleg herschreven naar zoals ik het tegenwoordig doe.
Bekende problemen
Internet Explorer 7
Als er een link in de afbeelding staat, is niet bij alle browsers (duidelijk) te zien welke link focus heeft. Daarom gebruik ik een outline om dat aan te geven. Internet Explorer 7 kent geen outline, dus daar werkt dat niet.
Als je toch zoiets in deze browser wilt maken, kun je 'n border gebruiken. Je moet dan wel de link (en dus de thumb) verkleinen als de link focus heeft, want de border wordt bij de link opgeteld.
Als de link focus heeft, wordt hij daardoor iets groter. De elementen ernaast zouden dan 'n stukje opschuiven, wat een heel erg springerig beeld geeft.
Alle browsers
Dit zou probleemloos moeten werken. Als het niet werkt, controleer dan de volgorde van de pseudo-classes.
Als je :link gebruikt, moet dat de eerste zijn. Gevolgd door :visited, dan :focus (en eventueel :active), en als laatste :hover.