Uitleg slideshow met thumbnail en foto's van verschillende grootte. Gebruikt weinig bandbreedte

Korte omschrijving

Bij hoveren over de thumbnail opent de bijbehorende grote foto. Je kunt van foto naar foto gaan door te scrollen, door te klikken of met de Tab-toets. Alleen de getoonde grote foto's worden gedownload, dus er wordt zo weinig mogelijk bandbreedte gebruikt.

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

De gebruikte afbeeldingen zijn afkomstig van Public Domain Pictures.net.

Voor dit soort effecten wordt meestal JavaScript gebruikt, maar het kan vaak ook uitstekend met alleen (x)html en css. Voordelen zijn dat dit ook werkt als JavaScript uit staat en dat het meestal veel simpeler is.

Net als met andere methoden waar thumbnails bij worden gebruikt, heb je kleine afbeeldingen (thumbnails) nodig en grote. De thumbnails worden snel geladen omdat ze klein zijn. Pas als de bijbehorende grote foto wordt getoond, wordt deze gedownload, dus er wordt zo weinig mogelijk bandbreedte gebruikt.

Er wordt geen nieuwe pagina geladen of 'n nieuw venster geopend of zoiets: alles gebeurt in dezelfde pagina in hetzelfde venster.

Hoewel dat niet absoluut nodig is, is het wel heel handig als de afbeeldingen dezelfde maat hebben. Of twee maten eigenlijk: één voor liggende en één voor staande afbeeldingen. Je kunt de foto's dan desgewenst centreren, er 'n kadertje om zetten, 'n onderschrift eronder zetten, enz. Bij dit voorbeeld hebben de foto's verschillende afmetingen, ze staan dan ook niet gecentreerd en dergelijke.

Voor het weergeven van de grote afbeelding wordt gebruik gemaakt van position: fixed. In kleinere vensters zou dat tot gevolg kunnen hebben dat de grote afbeelding gedeeltelijk buiten het venster komt te staan, terwijl geen scrollbalk verschijnt. Waardoor het deel dat buiten het venster staat op geen enkele manier is te bekijken. Door background-size: contain; te gebruiken, wordt dit voorkomen: de maat van de foto wordt aangepast aan de maat van het venster. Omdat Internet Explorer 7 en 8 dit niet kennen, verdwijnt bij die browsers wel het deel dat niet in het venster past.

Dit voorbeeld is niet geschikt voor spraakbrowsers en dergelijke. Afhankelijk van het gebruikte programma en de instellingen daarvan worden alleen de titels en/of de alt-beschrijving van de thumbnail voorgelezen. Als het belangrijk is dat een beschrijving van de afbeelding wordt gegeven, moet daarvoor een andere oplossing worden bedacht.

Als er nog meer tekst op de pagina staat, kan het handig zijn om een zogenaamde skip-link aan te brengen aan het begin van de hele handel. Mensen die de Tab-toets gebruiken om van link naar link te gaan, kunnen dan desgewenst in één keer alle thumbs passeren.

Zonder css zie je de grote afbeeldingen niet. Maar behalve bij tekstbrowsers zie ik dit niet zo snel gebeuren. En tekstbrowsers tonen nooit afbeeldingen, gebruikers daarvan kiezen daarvoor.

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.

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

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:

Achterliggend idee

Dit voorbeeld valt in twee grote delen uiteen: de thumbnails en de grote foto's. Daarnaast is er nog het hulpvenstertje en 'n vakje met de titel en zo, maar die zijn niet wezenlijk van belang voor dit voorbeeld.

Bij het openen van de pagina worden alle thumbs gedownload. Omdat het thumbs zijn, gaat dat relatief snel. De grote foto's worden nog niet gedownload.

In feite staat er aan de linkerkant 'n hele rij thumbs, maar die rij wordt verstopt. Er is er maar één thumb tegelijk zichtbaar of, bij scrollen, twee gedeeltelijk. Dit wordt bereikt door als het ware 'n kijkgaatje (div#content) over de rij thumbs te zetten. div#content is even hoog als één thumb. Daarbij staat overflow op auto, waardoor een scrollbalk ontstaat.

Elke thumb zit in een link, en die link zit weer in een span, die als blok-element wordt weergegeven. Aan het begin van elk van die spans zit een anker.

Elke link met thumb linkt naar het anker van de volgende span. Bij klikken op een thumb verschuift hierdoor de hele rij precies één thumb in verticale richting. De onderste link linkt weer naar de bovenste span, zodat je weer bovenaan begint als je onderaan bent aangekomen.

In elk van de hierboven genoemde spans zitten, naast de thumb, nog twee links: eentje met het pijltje naar links en eentje met het pijltje naar rechts. Deze linken naar de vorige en de volgende span. Bij klikken op het pijltje wordt dus één thumb terug- of vooruitgegaan. Het eerste pijltje terug verwijst naar de laatste span, het laatste pijltje vooruit naar de eerste span. Hierdoor ga je bij klikken op de pijltjes bij klikken op het laatste pijltje terug naar het begin, en omgekeerd.

De grote foto's zijn background-images. Deze staan in een span, die als blok-element wordt weergegeven. Omdat de foto's in dit voorbeeld ongelijk van grootte zijn, zijn de foto's verder niet gecentreerd of zo, maar in principe zou dat ook nog kunnen.

Deze span met de grote foto staat binnen dezelfde link, waarin ook de thumb staat. Bij hoveren over die link wordt de span - en dus de grote foto - zichtbaar. Zolang je niet boven de link komt met de cursor, wordt de grote foto niet geopend, ook niet als je klikt op de pijltjes bovenaan de thumb of als je klikt op de scrollbalk.

Omdat de links even groot zijn als de thumbs, ziet het eruit alsof je over de thumb moet hoveren om de grote afbeelding te openen. Dat je in feite over 'n link hovert, is nergens aan te zien. En dat is ook precies de bedoeling.

Met behulp van de Tab-toets kun je van link naar link gaan. Als je op die manier bij 'n link aankomt, heeft die link focus. Door het gebruik van :active en :focus opent de bijbehorende grote foto als 'n link focus heeft. Omdat de links even groot zijn als de thumbnails, lijkt het alsof je van thumb naar thumb gaat.

De span waarbinnen de grote foto wordt weergegeven, heeft een fixed positie. Hierdoor zou de span bij een kleiner venster zo klein kunnen worden, dat een (groot) deel van de afbeelding er niet meer in past en buiten het venster valt. Zonder dat een scrollbalk verschijnt. Dat deel van de afbeelding zou dan op geen enkele manier te zien zijn.

Om dat te voorkomen is de css3-eigenschap background-size: contain; gebruikt. Met behulp daarvan wordt de grote foto zo groot mogelijk weergegeven, maar niet groter dan in de span past. Bij een kleinere span wordt de afbeelding verkleind, waarbij de verhouding tussen breedte en hoogte hetzelfde blijft. Internet Explorer 7 en 8 kennen dit niet, dus daar kan in een kleiner venster inderdaad een deel van de afbeelding gewoon verdwijnen.

De span met de achtergrond-afbeelding vult in principe het hele venster van de browser. In een groot venster kan de span dan ook érg groot worden. En door het gebruik van background-size: contain; zou de achtergrond-afbeelding dan ook erg groot worden. Vergroten van een afbeelding op deze manier levert zelden mooie resultaten op: browsers zijn daar niet zo goed in. Daarom is een maximumbreedte en -hoogte aan de span gegeven, die even breed en hoog is als de breedste en hoogste foto. Hierdoor worden foto's hoogstens 'n klein stukje vergroot, en dat gaat prima.

De links met de thumbs hebben een tabindex, omdat anders in Opera de Tab-toets niet werkt. De links met de pijltjes hebben een negatieve tabindex, zodat bij gebruik van de Tab-toets deze worden overgeslagen. Anders zou iemand die de Tab-toets gebruik na het zien van de laatste foto eerst 28 keer moeten tabben om de pijltjes te passeren, voordat de eerste thumb weer wordt bereikt.

Normaal genomen zouden alle afbeeldingen gelijk bij het openen van de pagina worden gedownload, ook de grote. Dat is hier geen goed idee, omdat dat nogal lang kan gaan duren met de veertien afbeeldingen uit dit voorbeeld. Laat staan bij 'n echt grote serie foto's, of bij echt grote afbeeldingen.

De thumbs worden wel vrij snel gedownload, omdat ze veel kleiner zijn. De thumbs moeten trouwens hoe dan ook worden gedownload, want anders kun je ze niet zien. Maar dat geldt niet voor de grote foto's. Die hoeven pas te worden gedownload, als je er eentje wilt zien.

Elke grote foto heeft 'n eigen span. De grote foto is 'n background-image binnen die span. Door bij elke span expliciet te zeggen dat die background-image pas wordt geopend bij :hover, :focus of :active, wordt de grote foto pas gedownload als over de thumb wordt gehoverd, als op de thumb wordt geklikt of als via de Tab-toets de thumb focus heeft gekregen. Op die manier worden alleen de grote foto's die daadwerkelijk worden bekeken gedownload.

Zonder deze expliciete opdracht downloaden sommige browsers álle grote foto's gelijk bij het openen van de pagina, en daar word je niet echt gelukkig van, hoe mooi de foto's ook zijn.

Dan zijn er nog wat kleine dingetjes, zoals het blokkeren van het grootste deel van het scherm tegen hoveren, het hulpschermpje, en nog zo het een en ander, maar die komen aan de orde bij de beschrijving van de code.

Alleen :hover of :hover, :focus en :active?

Het eerste deel van deze tekst is voor alle voorbeelden met links en dergelijke hetzelfde, het laatste deel (onder het kopje Speciaal bij dit voorbeeld) is speciaal voor dit voorbeeld.

De meeste mensen openen 'n link door erop te klikken. Er is echter 'n tweede manier: met behulp van de Tab-toets (sommige browsers gebruiken andere toetsen, maar het principe is hetzelfde). Met behulp van de Tab-toets kun je van link naar link 'springen'. Op welke link je staat, wordt door alle browsers aangegeven met een of ander kadertje rondom de link.

De link met het kadertje eromheen heeft focus. Dat wil zeggen dat je die link volgt als je op de Enter-toets drukt. In principe werkt dit precies hetzelfde als gewoon klikken op de link.

Als iemand geen muis wil of kan gebruiken, bijvoorbeeld door 'n handicap, is deze manier om 'n link te openen erg handig. Als de volgorde van de links in de code niet logisch is, kun je eventueel met behulp van tabindex 'n afwijkende volgorde van de links opgeven. De Tab-toets volgt dan die afwijkende volgorde.

Tot zover is er nauwelijks verschil tussen het gebruik van de Tab-toets of van de muis.

Als je echter extra dingen onder de link hebt gestopt, die pas gaan werken als je over de link hovert, is er wel 'n verschil. Je geeft dat aan met :hover: als je over de link hovert. Met de Tab-toets alleen kun je niet over 'n link hoveren. Dus als er bijvoorbeeld 'n pop-up wordt geopend, zul je die niet zien als je de Tab-toets gebruik om naar 'n link te gaan.

Om dit op te lossen kun je op dezelfde manier als je :hover gebruikt :focus gebruiken: als de link focus heeft. Dat is dus als er 'n kadertje rondom de link staat en de link wordt gevolgd bij het indrukken van Enter.

Door dus a:hover, a:focus {...} te gebruiken, opent bijvoorbeeld 'n pop-up ook als je de Tab-toets gebruikt. Maar er zitten 'n paar adders onder het gras.

* Naast :hover en :focus is er nog :active. Deze laatste zou horen te werken als de muis wordt ingedrukt op de link. Dat werkt ook zo in alle browsers, behalve in Internet Explorer vóór versie 8. In haar onmetelijke wijsheid heeft Microsoft besloten af te wijken van de standaard: :active werkt in oudere versies zoals :focus hoort te werken, en :focus werkt gewoon helemaal niet vóór versie 8. In alle andere browsers werken :focus en :active dus wel volgens de standaard, en met ingang van versie 8 van Internet Explorer houdt Microsoft zich ook eindelijk aan de standaard.

Dit betekent dat je niet kunt volstaan met a:hover, a:focus {...}, maar dat je a:hover, a:focus, a:active {...} moet gebruiken, want anders werkt het niet in oudere versies van Internet Explorer. Het zal nog jaren duren voor deze oude versies niet meer worden gebruikt, maar omdat Microsoft zich nu eindelijk ook aan de standaard houdt op dit punt, wordt :active nu ook langzaamaan bruikbaar voor waar het voor is bedoeld.

* Belangrijke informatie moet je niet geven via :focus of active, omdat dit niet werkt als css uit staat.

* Ten slotte kan 'n pop-up of zoiets gruwelijk in de weg komen te staan, bijvoorbeeld door de rest van de pagina af te dekken. Iemand die gewoon de muis kan gebruiken, verplaatst deze even en de pagina is weer zichtbaar. Iemand die moeite heeft met het gebruik van de muis, heeft deze mogelijkheid niet of minder. Als je buiten de link en de daarbij horende pop-up en dergelijke klikt, sluit deze weliswaar, maar dat is nu juist het probleem: mensen die de muis niet goed kunnen gebruiken, hebben nou net daar problemen mee.

Als je via de terug-toets teruggaat naar de vorige pagina, heeft de link waar je vandaan kwam nog steeds focus, en dus staan pop-up en dergelijke ook nog open. Wat ook heel storend kan zijn als andere delen van de pagina daardoor niet te zien zijn. Op het moment dat ik dit schreef, werkte de terug-toets bij alle browsers zo, met uitzondering van Google Chrome. Maar 't kan best zijn dat Google Chrome het inmiddels ook doet, of 'n andere juist weer niet, want dit schijnt nogal te veranderen.

Om al deze redenen is het goed je even af te vragen of de voordelen van 'n pop-up en dergelijke wel opwegen tegen de nadelen. Ik zet zelf mijn eigen overwegingen bij elk voorbeeld steeds even erbij. Wat natuurlijk niet wil zeggen dat je daar geen andere mening over zou kunnen hebben.

Speciaal bij dit voorbeeld

Ik gebruik hier :hover, :focus en :active alle drie. Als je via de Tab-toets door de afbeeldingen loopt, blijft de afbeelding geopend. Maar dat lijkt me hier geen probleem, want het gaat juist om de afbeeldingen. En bij de volgende tab verschijnt de volgende afbeelding gewoon. In dit geval lijken :focus en :active me een aanwinst.

Beschrijving van code en 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;
	}

.vorige, .volgende

De elementen met class="vorige" en class="volgende". Dit zijn de links, waarbinnen de pijltjes terug en vooruit staan. De meeste instellingen zijn voor beide links hetzelfde, dus die kan ik hier combineren. Verderop geef ik voor .volgende een paar afwijkende instellingen op.

position: absolute;

Om de links op de goede plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste ouder die een relatieve, absolute of fixed positie heeft. Dat is hier span.wrap.

Een link is van zichzelf een inline-element. Door de link absoluut te positioneren, verandert ze in een soort blok-element. Daardoor kun je eigenschappen als hoogte en breedte gebruiken.

left: 1px;

Op 1 px vanaf de linkerkant van span.wrap zetten.

Op de afbeelding hiernaast heb ik de achtergrond van de pijltjes even zwart gemaakt, zodat ze wat duidelijker te zien zijn.

Rechts van het rechterpijltje zit een kier van ongeveer 1 px breed. Door die kier zie je de achtergrondkleur van de pagina. Die kier is niet goed weg te krijgen, dat heeft kennelijk met de scrollbalk te maken. Voor de symmetrie heb ik daarom links een even grote kier gemaakt. Je moet trouwens wel héél goed kijken om die kier te zien, maar goed, je moet iets over hebben voor het in stand houden van je diploma Rijksgediplomeerd Senior Mierenneuker.

z-index: 1;

Dit zou overbodig moeten zijn. Maar om een of andere wonderlijke reden werkt de Tab-toets in Opera niet, als je dit hier niet neerzet.

Pardon??? Die Tab-toets heeft hier toch niets mee te maken? Nee. Daarom noem ik het ook 'n 'wonderlijke' reden. Mogelijk zouden allerlei andere dingen ook werken, maar dat heb ik verder niet uitgezocht. De Tab-toets is niet bepaald Opera's sterkste punt...

Een z-index werkt alleen als het element een fixed, absolute of relatieve positie heeft, zoals hier het geval is.

width: 1.4em; height: 1.4em;

Breedte en hoogte. Door de maat in em te nemen en niet in px, verandert de link en dus de daarin zittende achtergrond mee met de lettergrootte.

border-radius: 0 0 10px;

Omdat voor linksonder geen waarde is ingevuld, krijgt die automatisch dezelfde waarde als rechtsboven. Hier staat dus eigenlijk 0 0 10px 0 in de volgorde linksboven - rechtsboven - rechtsonder - linksonder. Alleen rechtsonder een ronde hoek.

Oudere browsers zoals Internet Explorer 7 en 8 kennen dit niet, dus die negeren dit en houden gewoon rechte hoeken.

color: black;

Tekst binnen een link krijgt normaal genomen een afwijkende kleur. Dat wil ik hier niet.

background-color: white; background-color: rgba(255, 255, 255, 0.7);

Het gebruik van rgba() kan bij iets oudere browsers grote problemen geven, tot en met het volledig onleesbaar worden van tekst. Deze browsers kennen wel css en veranderen dus bijvoorbeeld wel de kleur van de tekst, maar kennen geen rgba(), waardoor de kleur van de achtergrond niet wordt veranderd. Met 'n beetje pech levert dat 'n tekstkleur op, die niet of nauwelijks is te onderscheiden van de achtergrond. In dit geval zouden op een wat donkerder thumb de pijltjes vrijwel volledig onzichtbaar worden.

Daarom staat er twee keer een achtergrondkleur. De eerste wordt door alle browsers gelezen, ook door oudere. De tweede achtergrondkleur met rgba() wordt genegeerd door de oudere browsers, omdat ze dit niet kennen. Die oudere browsers, zoals Internet Explorer 7 en 8, krijgen dus gewoon een massief witte achtergrond.

(Zo zou het volgens de standaard horen te werken. Maar Internet Explorer 7 trekt zich daar niets van aan. Voor die browser volgt eigen css.)

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

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

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

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

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

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

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

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

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

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

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

In dit voorbeeld is deze achtergrondkleur behoorlijk ondoorzichtig: 0.7. Hierdoor zie je de thumbs nog enigszins door de achtergrond heen, maar zijn de zwarte pijltjes toch altijd goed zichtbaar, ook op donkere thumbs.

text-decoration: none;

Tekst binnen een link wordt normaal genomen onderstreept, dat wil ik hier niet.

.thumb

De elementen met class="thumb". Dit zijn de thumbnails, de <img>'s.

max-width: 134px;

De thumbs mogen maximaal 134 px breed zijn. Hierdoor kan ik ze netjes centreren. Deze manier van weergeven leidt, in combinatie met de hieronder opgegeven hoogte, tot (een beetje) vervorming bij thumbs die breder zijn dan 134 px. Meer daarover gelijk hieronder bij hoogte.

In de html is bij sommige thumbs een grotere breedte opgegeven, omdat die breder zijn. Maar de in de css opgegeven breedte wint altijd van de breedte die in de html staat.

height: 100px;

Alle thumbs worden op deze hoogte weergegeven. Daarom is in de html geen hoogte opgegeven, het is hier efficiënter om dat in de css te doen. Zou je eventueel ook in de html een hoogte opgeven, dan heeft die geen enkel effect, omdat een hoogte in de css altijd wint van een hoogte in de html.

In combinatie met de hierboven opgegeven maximale breedte van 134 px leidt deze hoogte bij thumbs die breder zijn dan 134 px tot (enige) vervorming.

Het venstertje waarin de thumbs verschijnen, heeft een vaste breedte en hoogte. Maar de thumbs zijn niet allemaal even breed en hoog. Dit kun je op 'n aantal manieren oplossen, die allemaal hun eigen voor- en nadelen hebben. Ze hebben gemeenschappelijk dat ze geen van allen de perfecte oplossing zijn.

Het best is het te zien bij de laatste thumb, want die is nogal breed. Hiernaast staat de thumb, zoals hij in werkelijkheid is, met de juiste verhoudingen.

Ik heb gekozen voor een vaste hoogte en een maximumbreedte. Daardoor zie je wel de hele thumb, maar vervormd. Of dit kan, zal ook sterk afhangen van de afbeelding. Ik kan me voorstellen dat een bioloog zal gruwen van deze vervorming, terwijl ik het hier geen enkel probleem vind. De Mona Lisa zou ik weer niet zo willen vervormen, en de Toren van Pisa valt spontaan om.

Kortom: een ideale oplossing is dit niet.

Als je geen breedte of hoogte geeft, wordt de hele thumb getoond in de juiste verhoudingen. Maar het wordt dan wel heel klein bij een brede thumb.

Een andere mogelijkheid is nog om alleen de hoogte op te geven en geen breedte. De verhoudingen zijn dan juist en het is lekker groot, maar het arme beestje is wel de rechterhelft van z'n lichaam kwijtgeraakt.

outline: solid transparent 0;

Opera zet een brede knalblauwe outline rondom een afbeelding in een link, als de link focus heeft. Vuurtorens worden niet meer gebouwd en ik vermoed dat de ontwerper van vuurtorens nu bij Opera werkt, want qua intensiteit is deze outline alleen te vergelijken met de voormalige Scheveningse vuurtoren.

Hoe dan ook, Opera is kennelijk zo trots op deze outline dat hij alleen met deze regel is uit te schakelen. Een simpel outline: 0; werkt niet.

(Zie je wel: ik mopper echt niet alleen op Internet Explorer.)

border: 0;

Ooit kreeg in alle browsers een image binnen een link standaard een blauwe border, die overduidelijk bedacht was door het kleine nichtje van voornoemde vuurtoren-ontwerper: even foeilelijk, maar iets minder 'n knalkleur en iets minder breed.

Inmiddels doet alleen Internet Explorer dit nog. Hiermee wordt de lelijke rand rondom de thumbnail weggehaald.

.link:hover #foto-1, .link:focus #foto-1, .link:active #foto-1

Doe iets met het element met id="foto-1" dat binnen een element met class="link" ligt, maar alleen als over het element met class="link" wordt gehoverd of als dit focus heeft of actief is.

De elementen met class="link" zijn de links, waarbinnen de thumbs en de spans met de grote foto zitten.

Elke span waarin een grote afbeelding als achtergrond-afbeelding wordt getoond, heeft een eigen id. Dat is hier "foto-1". Dit is nodig, omdat elke span een andere achtergrond-afbeelding moet krijgen: de afbeelding die bij de thumb hoort waarover wordt gehoverd of die actief is of focus heeft (feitelijk is dat niet de thumbnail, maar de link waar de thumb in zit).

De instellingen die voor al deze spans hetzelfde zijn, zijn al opgegeven bij .foto en .link:hover .foto, .link:focus foto, .link:active. foto.

Een link heeft focus als de link wordt gevolgd als je op Enter drukt. De :active is nodig, omdat oudere versies dan Internet Explorer 8 :active foutief behandelen alsof het :focus is, en :focus gewoon volledig negeren. Meer over :hover, :focus en :active bij Alleen :hover of :hover, :focus en :active?

background: url(011-pics/paard.jpg) no-repeat #ff9;

Zet de afbeelding 'paard.jpg' in de span als achtergrond-afbeelding.

no-repeat: bij .foto zijn deze spans even groot gemaakt als het venster van de browser, met een maximumbreedte en -hoogte van 650 px.

Een achtergrond-afbeelding vult normaal genomen de héle achtergrond. Als de afbeelding te klein is, wordt hij herhaald tot het hele element is gevuld. Geen goed idee hier. Zelfs een paardenliefhebber zal niet vrolijk worden van het onthoofde paard hiernaast.

no-repeat voorkomt deze vorm van ernstige dierenmishandeling: de afbeelding wordt maar één keer getoond, ook als hij niet de hele achtergrond vult.

#ff9: de achtergrond-afbeelding vult niet altijd de hele span, waar hij in staat. Feitelijk vult zelfs geen enkele afbeelding die.

Als bijvoorbeeld de link met de sprinkhaan focus heeft en je scrolt terug naar het paard, blijf je de sprinkhaan zien. Maar je ziet ook het paard, want over die thumbnail hover je. Daardoor zou je twee afbeeldingen over elkaar heen zien.

Door de span op te vullen met dezelfde kleur als de pagina, wordt de sprinkhaan afgedekt en voorkom je dat het paard sprinkhanen lijkt te eten.

background-size: contain;

Dit is een van de nieuwe css3-eigenschappen. En dat is te merken, want hij werkt (nog) niet in alle browsers op precies dezelfde manier. In Safari en Google Chrome kan ik hem gewoon bij .foto zetten, waardoor ik hem maar één keer hoef op te geven. Maar in Internet Explorer 9, Firefox en Opera werkt hij dan niet. In deze browsers werkt hij wel, als ik hem bij elke grote afbeelding opnieuw opgeef. Op allerlei andere plaatsen waar hij maar één keer zou hoeven te staan, werkt hij ook niet in die browsers.

De specificatie zegt het niet expliciet, maar volgens mij hebben Google Chrome en Safari het bij het goede eind. Over enige tijd zal dit ongetwijfeld in alle browsers hetzelfde werken (behalve in Internet Explorer 9, want Microsoft brengt dit soort veranderingen alleen maar in een compleet nieuwe versie aan, dus de komende tien jaar of zo moet het op deze manier vanwege het geweldige update-beleid van Microsoft).Internet Explorer 7 en 8 kennen deze eigenschap niet, dus die negeren hem.

Zonder background-size in een klein venster.

background-size regelt de grootte van de achtergrond-afbeelding. contain zorgt ervoor dat de afbeelding altijd in z'n geheel wordt getoond, ook als hij groter is dan het element waar hij in staat. In dat geval wordt de afbeelding verkleind tot hij past. Hierbij blijft de verhouding tussen hoogte en breedte hetzelfde.

Bij .foto is opgegeven dat de span waar de grote afbeelding in staat, even hoog en breed als het venster van de browser moet worden (met links een ruimte van 165 px en een maximale breedte en hoogte van 615 px).

De foto met het paard is 615 px breed. Als het venster van de browser zo smal is dat de span minder dan 615 px breed wordt, zou hierdoor een deel van het paard wegvallen, zoals op de afbeelding is te zien. Maar met behulp van deze eigenschap wordt het paard verkleind, tot het in z'n geheel binnen de span past.

Speciaal voor Internet Explorer 7

<!--[if IE 7]> <style type="text/css"> html {overflow: hidden;} #content {position: absolute; background: url(011-pics/space-1x1.gif);} .vorige, .volgende {background: white;} .link {display: inline-block; height: 100px;} #titel {top: 120px; z-index: -1;} #help {left: 0;} </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 die uit de algemene stylesheet dan in principe overrulen.

Dit stukje geldt voor Internet Explorer 7, 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 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 7 in. De css voor Internet Explorer 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 7]> en <![endif]--> precies zo worden overgenomen, zoals ze hier staan.

html {overflow: hidden;}

Als je 'n externe stylesheet gebruikt, loop je tegen 'n apart probleem aan bij html. Als je zonder meer html {overflow: hidden;} in je stylesheet zet, geldt dit voor élke pagina van je site. Terwijl het vrijwel zeker is dat er ook pagina's zullen zijn, waar deze instelling niet moet worden gebruikt.

Normaal genomen is dit geen probleem, omdat je bijvoorbeeld de body 'n id kunt geven. Maar <html valt buiten de body. Om dit op te lossen, kun je op de pagina's waar html {overflow: hidden;} moet worden gebruikt de html 'n id geven, bijvoorbeeld "ie-overflow-hidden". In je html wordt de regel dan iets als <html id="ie-overflow-hidden" lang="nl">. De precieze regel hangt af van het doctype wat je gebruikt.

In de stylesheet gebruik je dan gewoon html#ie-overflow-hidden {...}. Nu is dit alleen geldig voor de pagina's die bij html de juiste id hebben staan.

De overflow: hidden; zorgt voor het verdwijnen van de lelijke, volstrekt overbodige scrollbalk aan de linkerkant van het venster van deze browser.

#content

Het element met id="content". Dit is de div waarbinnen alle thumbs en dergelijke staan.

position: absolute;

Gelukkig is het inmiddels niet meer echt belangrijk om de oorzaak van alle grappen en grollen van dit kreng te kennen, omdat het gebruik heel snel afneemt. Dit is weer zo'n kuur van in de categorie 'Ome-Piet-had-weer-'ns-te-veel-gedronken-en-dacht-leuk-te-zijn'.

Zonder deze toevoeging toont Internet Explorer 7 alle thumbs. Netjes onder elkaar, dat wel. Door dit toe te voegen, is alleen één thumb zichtbaar, zoals de bedoeling is.

background: url(011-pics/space-1x1.gif);

Zonder gif werkt het scrollwieltje niet boven de kier tussen twee thumbs.

Dit is een hele kleine doorzichtige gif. Echt heel klein: 1 x 1 px.

In de algemene css is opgegeven dat de thumbnails 100 px hoog moeten zijn met een maximale breedte van 134 px. Internet Explorer 7 negeert dat. Als de thumb breder is, toont hij toch de volle breedte. Daarbij wordt de hoogte verkleind.

Hierdoor ontstaat er soms een kier tussen de thumbnails. Als je precies boven die kier gaat hangen met de cursor, werkt het scrollwieltje niet. Deze gif zorgt ervoor dat het scrollwieltje ook boven die kier tussen de thumbs werkt.

.vorige, .volgende

De elementen met class="vorige" en class="volgende". Dit zijn de links waarbinnen de pijltjes staan.

background: white;

In de algemene css is een gewone witte achtergrondkleur opgegeven, maar daarna komt nog een achtergrondkleur, waarbij rgba() wordt gebruikt. Internet Explorer 7 kent dit niet, dus zou hij dit horen te negeren en de gewone achtergrondkleur moeten gebruiken. Maar in plaats daarvan negeert hij de achtergrondkleur volledig, ook de gewone. Als ik hem hier nog 'ns herhaal, snapt de ziel het wel.

.link

De elementen met class="link". Dit zijn de links waarbinnen de thumbs en de spans met de grote afbeeldingen zitten.

display: inline-block;

Van zichzelf is een link een inline-element. Door er een inline-blok van te maken, blijft het zich gedragen als een inline-element, terwijl ik toch eigenschappen als hoogte kan gebruiken.

height: 100px;

Om onduidelijke redenen worden lagere thumbs soms aan boven- of onderkant 'opgevuld' met de thumbs ervoor of erna. Dit gebeurt niet altijd. Ik heb verder niet uitgebreid gezocht naar de oorzaak, want het gewoon simpel 100 px hoog maken van de links waar de thumbs in staan, lost het op.

#titel

Het element met id="titel". Dit is de paragraaf waarbinnen 'Foto's van mijn huisdieren' staat.

top: 120px;

Om redenen die waarschijnlijk alleen Microsoft écht begrijpt, komt de tekst met de titel iets te hoog te staan in deze wereldbrowser. Dus iets lager neerzetten.

z-index: -1;

De zoomfunctie in Internet Explorer 7 is hopeloos slecht (in Internet Explorer 8 en later werkt hij wel goed). Zonder de css voor #titel is het ontroerend slechte resultaat bij inzoomen (vergroten) te bewonderen op bovenstaande afbeelding: de grote afbeelding wordt niet groter en blijft op dezelfde plaats staan, maar de thumbs worden wel groter. Hierdoor komen de thumbnails ónder de grote afbeelding te staan.

Ook de titel komt ónder de grote afbeelding te staan. Althans: dat zou mooi zijn, maar de werkelijkheid is vaak niet zo mooi als de droom. De titel komt pontificaal óver de grote afbeelding te staan. Door een negatieve z-index te geven, komt de titel helemaal onderaan te staan.

Dan nog blijft het resultaat belabberd, maar in ieder geval is de grote afbeelding in z'n geheel te zien.

#help

Het element met id=”help”. Dit is de span waar de tekst van het hulpschermpje in staat.

left: 0;

Het hulpschermpje wordt in deze browser te ver naar links gezet. Bij een grotere letter levert dat problemen op, omdat er dan een scrollbalk in het hulpschermpje verschijnt. Maar scrollen kan niet, want er zit een opening tussen het plaatje met het vraagteken en het hulpschermpje. Het hulpschermpje sluit daardoor al voordat je het hebt bereikt. Deze regel lost dat op: nu staat het ook in Internet Explorer 7 op de juiste plaats.

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 20 juli 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, 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.

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

7 september 2008:

Nieuw opgenomen.

12 september 2008:

Bij het maken van het voorbeeld hierna, ook 'n slideshow, heb ik enkele oplossingen gevonden voor kleine probleempjes die hier nog in zaten. Ook is 'n enkele verbetering aangebracht.

• Bij Internet Explorer 7 stond 'n klein streepje, zoals bij 'n link. Door toevoeging van a.link {text-decoration: none;} is dit verdwenen.
• Bij Internet Explorer 7 werkte het scrollwieltje niet als je precies tussen twee thumbs in stond. Door die opening zo klein mogelijk te maken was dat min of meer opgelost. 'n Betere oplossing bleek het toevoegen van 'n doorzichtig background-image te zijn: nu is de opening helemaal weg en werkt het wieltje overal.
• Het hulpschermpje krijgt nu 'n scrollbalk als de inhoud, bij 'n heel grote letter, er niet meer in zou passen.

15 januari 2009:

Omdat de pijltjes 'n hoge z-index hadden, waren die in sommige browsers zichtbaar door het hulpschermpje heen. Door bij p#wrapper-help a:hover span#help 'n hogere z-index op te nemen is dat verholpen.

23 maart 2009:

Tekst aangepast voor de nieuw verschenen Internet Explorer 8. De code hoefde niet te worden gewijzigd.

11 april 2009:

Er was toch 'n aanpassing nodig voor Internet Explorer 8. Door een bug daarin bleven - alleen in de download, niet op de site - alle afbeeldingen openstaan als je de Tab-toets gebruikte.

4 augustus 2009:

Alleen het voorbeeld op de site is gewijzigd en wijkt nu enigszins af van het voorbeeld in de download.

5 oktober 2009:

Download is nu hetzelfde als het voorbeeld op de site, beide hebben nu hetzelfde doctype en dezelfde tabindex.

24 mei 2010:

Breedte en hoogte toegevoegd aan de thumbnails. Foei tegen mezelf gezegd omdat ik dat was vergeten.

20 juli 2011:

• Waarschuwing over gebruik doctype voor html 5 weggehaald. Dit kan inmiddels probleemloos worden gebruikt.
• Charset aangepast aan html 5.
• color: black; toegevoegd bij css voor p#titel vanwege toegankelijkheid.
• Bij Opera op Windows blijft de grote afbeelding niet meer regelmatig geopend, dus weggehaald bij Bekende problemen.

28 augustus 2011:

Volledig herschreven. Omdat geen rekening meer is gehouden met Internet Explorer 6 en door het gebruik van enkele nieuwe css3-eigenschappen, kon de werking sterk worden verbeterd, terwijl toch minder html en css is gebruikt. Hieronder staan alleen maar de belangrijkste wijzigingen.

• a.klikker is helemaal verwijderd. (Dit waren veertien rechtstreekse links naar de grote afbeeldingen, bedoeld voor programma's die niet met css uit de voeten kunnen. Dat speelt eigenlijk niet meer.) Omdat deze duidelijke links er niet meer zijn, heb ik de alt-tekst en titels bij de thumbnails duidelijker gemaakt.
• De extra <p> waarbinnen de hele slideshow stond is niet meer nodig en dus weggehaald.
• De afbeeldingen hebben duidelijke namen gekregen. Geen 'foto-1.jpg', maar 'zwaan.jpg'. Voor dit voorbeeld niet van belang, maar normaal genomen wel van belang voor zoekmachines. En programma's die 'n link voorlezen hebben ook meer aan 'zwaan' dan aan 'foto-1'.
• Bij de thumbs om dezelfde reden een alt-tekst toegevoegd.
• Titel bij de thumbs veranderd van '1/14' in '1 van 14', ook al om dezelfde reden. (En '2 van 14', enz.)
• Het hulpschermpje (onder het vraagteken) zit niet meer in een link, maar in een gewone <p>. Internet Explorer 6 wordt niet meer ondersteund, en alle nog ondersteunde browsers herkennen hoveren over een <p>.

• Allerlei marges en zo aangepast, waardoor alles beter is uitgelijnd. Nu Internet Explorer 6 niet meer wordt ondersteund, hoef je minder compromissen te sluiten.

  (Concreet: padding rechts bij body weggehaald. div#top en de daarin zittende <p> samengevoegd tot div#content. Negatieve marge aan de bovenkant van de thumbs weggehaald. Alle eigenschappen voor de plaatsing zijn samengevoegd tot margin-top: 3px; bij deze div#content.)

• Hoogte van 110px bij de nu verdwenen <p> veranderd in hoogte van 100 px bij div#content. Hierdoor staan de thumbs nu altijd precies op de juiste plaats, wat ze soms niet helemaal het geval was bij tabben.
• span.wrap hoogte van 100 px gegeven, zodat ook bij lagere thumbs alles goed blijft staan.

• Relatieve positie aan span.wrap gegeven. Hierdoor kunnen a.vorige en a.volgende, de links waarin de pijltje staan, absoluut worden gepositioneerd ten opzichte van span.wrap. Hierdoor verspringen de thumbs niet meer, wat ze bij sommige browsers bij tabben en vooral bij Shift+Tab deden.

  Doordat de a.vorige en a.volgende absoluut zijn gepositioneerd, blijven deze nu altijd op de juiste plaats staan, ook bij zoomen en een andere lettergrootte. Dit ging vooral mis bij het rechterpijltje.

• Links met de pijltjes ronde hoek en doorzichtige achtergrond gegeven. Hoogte en breedte veranderd van px in em, waardoor de achtergrond nu mee verandert met de lettergrootte. Internet Explorer 7 en 8 krijgen geen ronde hoeken en een witte ondoorzichtige achtergrond.
• Outline weggehaald bij links die focus hebben. (Normaal genomen is dat 'n bijzonder slecht idee, omdat je dan niet meer ziet wat er focus heeft, maar hier is die outline volslagen overbodig.)
• Alle thumbs hoogte van 100 px gegeven en maximumbreedte van 134 px. Hierdoor is de marge links en rechts even groot en kan altijd de hele thumb worden getoond, ook als deze breder is dan 134 px.
• Aan span.foto, de span waarin de grote afbeelding als background-image wordt getoond, een maximumbreedte en -hoogte van 615 px gegeven. Hierdoor kan de afbeelding nooit te sterk worden vergroot, iets waar browsers niet zo erg goed in zijn.
• Aan span.foto, de span waarin de grote afbeelding als background-image wordt getoond, dezelfde achtergrondkleur als de pagina gegeven. Als een thumb focus heeft en dus de bijbehorende grote afbeelding is geopend, kun je over 'n andere thumb hoveren. Er zijn dan twee thumbs open, waardoor je soms 'n deel van de ene afbeelding onder de andere uit zag komen. Nu dekt de bovenste afbeelding altijd de eronder zittende volledig af.
• Aan span.foto, de span waarin de grote afbeelding als background-image wordt getoond, background-size: contain; toegevoegd. Als, bijvoorbeeld op een kleiner scherm, de span nu niet groot genoeg is om de hele achtergrond-afbeelding te tonen, wordt deze verkleind tot hij in de span past. Daarbij blijft de verhouding tussen breedte en hoogte hetzelfde.
• De bug in Internet Explorer 8 waardoor alle afbeeldingen open bleven staan bij gebruik van de Tab-toets, wordt (kennelijk door al deze veranderingen) niet meer getriggerd. De extra css om deze bug te omzeilen is dus weggehaald.
• Met vliegende vaandels en roffelende trommels alles wat maar rook naar Internet Explorer 6 eruit gesloopt. Eindelijk!

• Als een thumb focus heeft en je over een eerdere thumb hovert, is de bij die eerdere thumb horende afbeelding nu volledig te zien.

  (Eerst verdween die grotendeels of helemaal onder de afbeelding die focus had. Ahum, nee, dat kwam niet door Internet Explorer 6, maar door een bijzonder oenige beginnersfout van mij. Love hurts fade away en zo. Als je dat niet begrijpt, zoek, dan maar even op internet naar 'link love hurts fade away'. Je kunt ook zonder 'link' zoeken, maar dan krijg je eerst 'n serie liefdesliedjes...)

  In Internet Explorer 7 werkt hoveren niet als je over 'n eerdere thumb dan de thumb met focus hovert. Maar dat ligt aan die browser en daar ga ik geen tijd meer in stoppen.

• Alle selectors nog 'ns kritisch bekeken en, waar dat kon, ingekort.
• Hoogte van de thumbs uit de html naar de css verplaatst. Omdat ze alle veertien even hoog zijn, is dat in dit geval efficiënter.

Bekende problemen

Internet Explorer 7 en 8

• Omdat gebruikt wordt gemaakt van position: fixed mogen de foto's niet groter zijn dan het venster van de browser, omdat anders aan de rechterkant en aan de onderkant delen van de foto verdwijnen. Er verschijnt geen scrollbar: het verdwijnt gewoon. In nieuwere browsers wordt dit verdwijnen voorkomen door background-size, maar deze twee browsers kennen dat niet.
• De achtergrond bij de pijltjes heeft geen ronde hoeken en is niet doorzichtig, omdat deze twee browsers border-radius en rgba() niet kennen.

Internet Explorer 7

• Thumbs die breder zijn dan in het venstertje past, zouden moeten worden versmald. Deze browser laat de volle breedte zien en verkleint de hoogte. Niet echt heel ernstig dus, en sommige mensen zullen dit zelfs beter vinden, omdat het de thumb niet vervormt.
• Bij inzoomen (vergroten) komt de grote afbeelding over de thumb te staan. Dit komt door de slechte werking van de zoomfunctie in Internet Explorer 7. (In Internet Explorer 8 werkt de zoomfunctie wel goed.)

• Als een thumb focus heeft en de bijbehorende grote afbeelding dus is te zien, kun je met behulp van het scrollwieltje, de scrollbalk of de pijltjes naar een eerdere thumb gaan. Als je over die thumb hovert, zou die zichtbaar moeten worden. In deze browser gebeurt dat niet.

  Als je hovert over een latere thumb dan de thumb die focus heeft, verschijnt de bijbehorende grote afbeelding wel. Ook hier geldt weer: mogelijk wel op te lossen, maar ik vind dit soort kleine probleempjes niet meer de moeite waard voor deze overjarige draak.

Safari, Opera en Google Chrome

Er zit verschil in hoe browsers met :focus omgaan. Welke browser het bij het goede eind heeft, is onduidelijk, want de specificatie is nogal vaag op dit punt. Dit was ook een van de redenen waardoor de thumbs in een vorige versie soms wat versprongen. Nu Internet Explorer 6 niet meer meedoet, kon dit verspringen worden gerepareerd. Maar niet alle problemen met :focus zijn goed op te lossen.

Als je op 'n thumb klikt, krijgt in Internet Explorer en Firefox geen enkele thumb focus. In Safari, Google Chrome en Opera krijgt de thumb waarop je klikt focus. Maar de link waarin die thumb zit, linkt naar de volgende span, dus naar de volgende thumb. Oftewel: niet de link die focus heeft, maar de daarop volgende link met de daarin zittende thumb is zichtbaar.

Zolang je met de cursor boven de thumb hangt, merk je daar niets van. Want dan hover je over de thumb, en dus opent de bij die thumb horende grote foto. Maar tegelijk is de grote foto van de thumb die focus heeft geopend, alleen zie je dat niet.

Zodra je echter niet meer over de thumb hovert, wordt de grote foto van de thumb die focus heeft zichtbaar. En dat is een andere foto, dan de thumb die zichtbaar is.

Dit speelt alleen maar bij klikken op de thumbs en dan nog alleen maar op het moment dat je de cursor van de thumb afhaalt. Er is weinig aan te doen, en omdat dit niet tegen de specificatie in lijkt te gaan, zit het er niet in dat dit snel gaat veranderen.

Mogelijk zou je met JavaScript iets kunnen doen, maar daar vind ik het niet ernstig genoeg voor, want tabben enz. werkt allemaal gewoon zoals het is bedoeld. Het speelt echt alleen maar op het moment dat je na klikken de cursor van de thumb afhaalt.

Opera

Als je op 'n thumb klikt, moet je de cursor even 'n tikje bewegen voor de bijbehorende grote foto opent. 'n probleem dat vaker speelt in Opera, dus ik neem aan dat gebruikers van Opera dat wel weten.

Alle browsers

• Brede thumbs worden (enigszins) vervormd weergegeven. De reden daarvan en hoe je dat eventueel kunt voorkomen staat bij Het venstertje waarin....
• Als er meer op de pagina staat dan alleen dit voorbeeld, kan het zijn dat klikken, tekst selecteren, enz. bij de extra elementen niet werkt. De oorzaak en een oplossing staan bij #blokkeer.