Uitleg slideshow met thumbnails en foto's van verschillende grootte
Laatst aangepast: .
Korte omschrijving
Bij hoveren over of aanraken van de thumbnail opent de bijbehorende grote foto. Met de kleine pijltjes blader je door de thumbnails, met de grote pijltjes of de Tab-toets door de grote foto's.
BELANGRIJK
Alles op deze site kan vrij worden gebruikt, met twee beperkingen:
* Je gebruikt het materiaal op deze site volledig op eigen risico. Het kan prima zijn dat er fouten in de hier verstrekte info zitten. Voor eventuele schade die door gebruik van materiaal van deze site ontstaat, in welke vorm dan ook, zijn www.css-voorbeelden.nl en medewerkers daarvan op geen enkele manier verantwoordelijk.
* Deze uitleg wordt regelmatig bijgewerkt. Het is daarom niet toegestaan deze uitleg op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat de uitleg afkomstig is van www.css-voorbeelden.nl en dat daar altijd de nieuwste versie is te vinden. Dit is om te voorkomen dat er verouderde versies worden verspreid.
Een link naar www.css-voorbeelden.nl wordt trouwens altijd op prijs gesteld.
Opmerkingen
- De gebruikte afbeeldingen zijn afkomstig van Public Domain Pictures.net.
-
Als je wilt zien, hoe deze lay-out er in een smal browservenster uit ziet, kun je het venster van de browser smaller dan 430 px maken. Firefox heeft onder Extra → Webontwikkelaar → Responsive Design Weergave een ingebouwde mogelijkheid om grotere en kleinere breedtes weer te geven.
Overigens werkt in- en uitzoomen in Opera, Firefox en Internet Explorer 8, 9 en 10 (bureaublad-versie) in Windows, OSX en Linux hetzelfde als een smaller of breder venster. In deze browsers kun je een smaller of breder venster dus ook simuleren door in- of uitzoomen.
- Omdat Microsoft graag haar tradities in ere houdt en dus haar browsers nooit update, zijn er afwijkingen in Internet Explorer 8. Zie verder bij Bekende problemen.
- Bij de eerste en laatste thumbnail staat geen < en >, maar << en >>. Bij klikken op de eerste of laatste thumb ga je gewoon weer door met de laatste of eerste thumb. Ogenschijnlijk staan deze << en >> op de verkeerde plaats. Maar na enig nadenken heb ik ze toch daar neergezet, omdat je nu gewoon op dezelfde plaats kunt blijven klikken om de cirkel rond te maken. Zou je ze aan de andere kant zetten, wat er mogelijk iets logischer uitziet, dan moet je bij de eerste of laatste thumb op een andere plaats klikken voor vorige of volgende. Vandaar.
- Het is goed mogelijk dat in dit geval JavaScript meer geschikt is dan alleen html en css, vooral voor de grote foto's. Je zou dan zelfs de thumbs en grote foto's automatisch kunnen inlezen uit een directory met behulp van PHP of SSI of zoiets. En ook grote delen van de html en css zou je via JavaScript aan kunnen laten maken, omdat het grotendeels om herhalingen van (vrijwel) dezelfde html en css gaat. Maar deze site gaat nou eenmaal voornamelijk over css, dus dat heb ik niet gedaan. De lol is nou juist om het zoveel mogelijk alleen met css en html te doen.
- Er zitten wat verschillen in de manier waarop verschillende browsers bepaalde dingen afhandelen. Om het wat overzichtelijk te houden, heb ik ook deze verschillen bij Bekende problemen gezet, hoewel het geen echte problemen zijn.
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 (Kubuntu). Daarbij is vooral gebruik gemaakt van Komodo Edit, GIMP en Firefox met extensies. De pdf-bestanden zijn gemaakt met LibreOffice.
Vragen of opmerkingen? Fout gevonden? Ga naar het forum.
Achterliggend idee
Er waren nogal wat voorwaarden, waaraan dit voorbeeld moest voldoen:
* De grote foto's mogen pas worden gedownload, als ze worden getoond.
* Het moet werken in browservensters van elke maat.
* Het moet ook werken op touchscreens.
* Je moet voor‑ en achteruit kunnen bladeren door alleen de thumbnails, of door de thumbnails met daarnaast de geopende grote foto's. (In de eerdere versie kun je alleen vooruit bladeren met de grote foto's geopend, maar inmiddels is er veel meer mogelijk met alleen css en html. Mede doordat Internet Explorer 7 en eerder niet meer worden ondersteund.)
* De grote foto's moeten ook geopend kunnen worden met behulp van de Tab-toets, zodat ook mensen die de muis niet kunnen of willen gebruiken ze kunnen zien.
* Op kleinere schermen moeten de grote foto's volledig te zien zijn.
Omdat verschillende systemen nogal verschillend werken, was dit ingewikkelder, dan ik in eerste instantie had verwacht. Uiteindelijk zijn het eigenlijk 'n aantal manieren van bewegen door de thumbs en wel of niet tonen van grote foto's geworden, die redelijk los van elkaar werken.
Algemene html en dergelijke
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.
overflow: hidden; bij div#content uit.In feite staat er aan de linkerkant 'n hele rij thumbs, maar die rij wordt verstopt. Hierdoor is maar één thumb tegelijk zichtbaar. 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 (en wat knoppen). Daarbij staat overflow op hidden, waardoor andere thumbs worden verborgen.
Op de afbeelding hiernaast is te zien, hoe het er zonder overflow: hidden; uitziet.
Elke thumbnail staat, met de erboven staande vier knoppen en de bijbehorende grote foto, in een eigen div. Deze div heeft een id, zodat ernaartoe gelinkt kan worden. Elke knop is een link naar de volgende of vorige div, zodat bij klikken op of aanraken van een knop naar de vorige of volgende div wordt gegaan. Waardoor de daarin zittende vorige of volgende thumbnail zichtbaar wordt. Dit werkt precies hetzelfde als bij elk ander anker (een anker is een link binnen de pagina zelf).
Vanuit de laatste thumbnail wordt teruggelinkt naar de eerste, en vanuit de eerste wordt verder gelinkt naar de laatste. Hierdoor kun je eindeloos door de thumbs lopen: na de laatste verschijnt de eerste weer, en omgekeerd.
De vier knoppen zijn directe kinderen van de div. De thumbnail en de span voor de bij de thumbnail horende grote foto zijn kleinkinderen van de div: ze staan samen binnen een extra span.
div#content, waarbinnen de hele handel staat, heeft overflow op hidden staan. Dat is een probleem, omdat de grote foto rechts van div#content moet komen te staan, en dat kan nu niet. Daarom wordt aan de span waarbinnen de grote foto wordt weergegeven een fixed positie gegeven, want een fixed positie trekt zich niet van overflow aan en kan dus gewoon rechts van div#content worden getoond.
(Normaal genomen kan een fixed positie grote problemen op oudere of goedkopere mobiele apparatuur opleveren, zoals het verdwijnen van delen van de pagina. Maar omdat hier niet wordt gescrold, speelt dat hier niet.)
Met behulp van css wordt voorkomen dat de span waarin de grote foto staat groter dan het venster van de browser wordt. In een klein venster zou de span hierdoor zo klein kunnen worden, dat een (groot) deel van de afbeelding er niet meer in zou passen. De grote foto is een achtergrondafbeelding, en als de span kleiner is dan die afbeelding, wordt gewoon niet de hele afbeelding getoond. 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 intact blijft. Internet Explorer 8 kent background-size niet, dus daar kan in een kleiner browservenster inderdaad een deel van de afbeelding gewoon verdwijnen.
De span met de achtergrond-afbeelding kan in principe het hele venster van de browser vullen. In een groot venster zou de span dan érg groot kunnen 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 kleinere foto's hoogstens 'n klein stukje vergroot, en dat gaat redelijk goed.
Naast deze divs met thumbs en knoppen zijn er nog wat kleine dingetjes zoals het hulpschermpje, maar die zijn niet wezenlijk van belang voor dit voorbeeld.
Bandbreedte
Aanvulling 10 maart 2020:
In tegenstelling tot wat hieronder (en mogelijk ook nog elders in deze tekst) staat, worden background-images nu meestal gelijk bij openen van de pagina gedownload.
Op Firefox en Safari na zijn vrijwel alle browsers gebaseerd op Blink, de weergave-machine van Chromium. Dit geldt voor bijvoorbeeld Google Chrome, Edge en Opera. En in 2019 heeft Blink dit veranderd: background-images worden nu net als gewone <img>'s gedownload.
Door de manier waarop de afbeeldingen hier worden gebruikt, is het downloaden ook niet te voorkomen door gebruik van het nieuwere attribuut loading = "lazy" bij <img>. Ook de Intersection Observer API biedt geen oplossing. Beide technieken werken alleen, als de afbeeldingen door scrollen binnen het browservenster worden gebracht.
In deze later gemaakte slideshow wordt voortijdig downloaden voorkomen met behulp van JavaScript, maar dat is een veel omslachtiger methode.
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.
Bij het openen van de pagina worden alleen de thumbnails gedownload. Die worden vrij snel gedownload, omdat ze veel kleiner dan de grote foto's zijn. De thumbs móéten trouwens worden gedownload, want anders kun je ze niet zien, en kun je dus ook niet weten of je de grote foto wel of niet wilt zien. Maar dat geldt niet voor de grote foto's. Die hoeven pas te worden gedownload, als je er echt eentje wilt zien.
Elke grote foto staat als background-image in een eigen span. Normaal genomen zouden de grote foto's ook worden gedownload bij het openen van de pagina. Maar dat gebeurt niet, als je er een background-image van maakt, en die background-image alleen toont bij :hover, :focus of :active. Pas als ergens op een in de css gedefinieerd element zo'n toestand van :hover, :focus of :active ontstaat, wordt de grote foto getoond. En pas dan wordt die gedownload.
Als je alleen maar met behulp van de kleine pijltjes aan de buitenkant door de thumbnails wandelt, opent er geen enkele grote foto en wordt dus ook geen enkele grote foto gedownload. Wil je 'n bepaalde grote foto zien, dan hover je over de thumbnail of raakt deze aan, en pas dan wordt de grote foto gedownload.
Als bandbreedte niet belangrijk is, kun je in plaats van background-images gewone <img>'s nemen en die met behulp van bijvoorbeeld display: none; en display: block; laten verschijnen en verdwijnen. In dat geval heb je veel minder css nodig, maar de grote foto's worden dan wel allemaal gelijk geladen bij openen van de pagina.
Kleinere browservensters
Die grote foto's zijn natuurlijk fantastisch mooi en zo, maar op een mobieltje word je daar niet echt gelukkig van. Je downloadt een poster en als beloning mag je 'n postzegel bekijken. Je verwacht 'n concert met Leonard Cohen en krijgt Justin Bieber, zoiets.
De thumbnails kunnen maximaal 320 px breed worden. Het heeft daarom geen enkel nut om in browservensters die niet breder dan 320 px zijn grote foto's te downloaden. Dat gebeurt dan ook niet. Met behulp van een @media-regel worden grote foto's alleen gedownload in vensters breder dan 430 px. De knoppen waarmee door de grote foto's kan worden gebladerd, zijn ook alleen maar zichtbaar in vensters met een breedte van minstens 430 px.
Er zit 'n verschil tussen de maximumbreedte voor de thumbnails van 320 px en de 430 px, waarbij grote foto's worden getoond. In browservensters met een minimale breedte van 430 px zie je de thumbnail én de grote foto. Die thumbnail beslaat (maximaal) 25 % van de breedte van het venster. Omdat de thumbnail ook ruimte inneemt, heeft het geen nut om al in een venster met een breedte van 321 px de grote foto te tonen. Als de thumbnail 25 % van de breedte inneemt, zou je maar ongeveer 240 px overhouden voor de grote foto. Dan kun je beter de thumbnail zo groot mogelijk weergeven. Bij (ongeveer) een breedte van 430 px komt er genoeg ruimte om de grote foto groter dan de thumbnail weer te geven.
De css voor deze kleinere browservensters is redelijk simpel. Ook oudere browsers en goedkopere toestellen zullen hier waarschijnlijk mee uit de voeten kunnen. Daarom staat deze css vooraan. Pas als een browser expliciet meldt dat het venster breder is dan 430 px, wordt de wat ingewikkelder css voor bredere vensters gebruikt. 'n Browser moet dan in ieder geval in staat zijn om de relatief nieuwe @media-regel te herkennen. Op deze manier kunnen ook oudere en simpele browsers in ieder geval de thumbnails weergeven.
Bladeren door thumbs
Bladeren door de thumbnails, zonder de grote foto's te openen, is relatief simpel. Door klikken op of aanraken van de buitenste knoppen met de kleinere pijltjes, blader je door de thumbnails. Dat zijn gewoon simpele ankers: elke knop bevat een link naar de vorige of volgende div en dus naar de daarin zittende thumbnail en knoppen.
Als je één bepaalde grote foto wilt zien, hover je over de thumbnail, klikt erop of raakt de thumbnail aan.
Tab-toets
Onderstaande tekst is natuurlijk alleen geldig, wanneer een toetsenbord wordt gebruikt, want – voor zover ik weet – de meeste mensen hebben geen ingebouwde Tab-toets in hun vingers.
Sommige mensen kunnen of willen de muis niet gebruiken, bijvoorbeeld vanwege een handicap. Links, invoervelden van formulieren, en dergelijke kunnen daarom ook worden afgelopen door het indrukken van de Tab-toets (of Shift+Tab-toets voor de omgekeerde volgorde). Het element waar je op deze manier aankomt, heeft 'focus'. Als het een link is en je drukt op Enter, wordt de link gevolgd. Als het een tekstveld is, kun je tekst gaan typen. Enz.
Welk element focus heeft, wordt standaard door een kadertje rondom het element aangegeven, zodat je weet waar je bent. Dat kadertje zou hier ook aanwezig zijn, maar het is hier uitgeschakeld, omdat het geen enkel nut heeft en in dit geval foeilelijk is. (Bij Opera kun je het niet uitschakelen en het is ook nog 'ns écht foeilelijk. Tja.)
Als je aan een element een tabindex geeft, kan dat element ook focus krijgen, ook als het geen link of zo is. Dat is hier gedaan bij span.wrapper-thumb-foto, waarbinnen de thumbnails en de span voor de grote foto's zitten. Door het indrukken van de Tab-toets, loop je een voor een die spans af en krijgen deze focus. Zodra een span focus heeft, wordt deze bovenaan div#content gezet, en dus de erin zittende thumbnail ook. Bovendien opent de erbij horende grote foto.
Met de Tab-toets worden standaard ook alle links afgelopen. Dat komt hier slecht uit, omdat er boven elke thumbnail vier links staan: de knoppen om door de thumbnails en grote foto's te bladeren. Je zou dus vijf keer de Tab-toets moeten indrukken, voordat je eindelijk bij de volgende thumb bent aangekomen. Door deze links een tabindex van -1 te geven, worden deze echter volledig genegeerd door de Tab-toets.
Bladeren met grote foto's zichtbaar
De bedoeling is dat, bij klikken op een van de binnenste knoppen met de grotere pijltjes, de vorige of volgende thumbnail verschijnt, en dat de daarbij horende grote foto wordt getoond. Dat had nogal wat voeten in de aarde.
In eerste instantie stonden deze knoppen boven de grote foto, ook met een fixed positie. Dat ging dus gigantisch mis. Als een bepaalde thumb zichtbaar was, waren de daarbij horende knoppen ook zichtbaar. Als je op de knop voor de volgende foto klikte of deze aanraakte, verscheen de volgende thumb. En zou de daarbij horende grote foto moeten openen.
Zodra je echter op zo'n knop klikte, verdween de thumb. Wat ook de bedoeling was, want de vorige of volgende thumb moest verschijnen. Helaas gebeurde dat verdwijnen in sommige browsers zo snel, dat ook de in de knop zittende link niet werkte: de knop verdween kennelijk voordat de link was ingelezen en/of verwerkt.
Deze methode werkte dus niet.
De knoppen op de foto zetten, zoals in de vorige versie het geval was, kon ook niet. Op touchscreens werkte een aanraking van een knop door in de eronder zittende thumbnail, die reageert op hoveren. Dat kun je wel voorkomen met behulp van JavaScript, maar de lol is nou juist om alleen css en html te gebruiken.
De oplossing was een kleine padding boven de thumbnails aan te brengen, en binnen die padding de knoppen neer te zetten.
Nu zijn er dus twee knoppen zichtbaar, speciaal voor het bladeren met de grote foto's zichtbaar. En toen begon het feest pas echt, omdat zo'n beetje elke browser en elk systeem hoveren en zo anders afhandelt.
In desktopbrowsers bijvoorbeeld laten Safari, Google Chrome en Opera de grote foto geopend bij klikken op de knop voor Vorige of Volgende foto, ook als je niet meer over die knop hovert. In Firefox en Internet Explorer echter sluit de grote foto, zodra je niet meer over de knop hovert. Om maar 'n klein verschil te noemen.
(Ook zo'n klein verschil heeft trouwens al gevolgen. Omdat in Firefox en Internet Explorer de grote foto sluit bij verlaten van de knoppen en weer opent als je boven de thumbnail komt, geeft dit een flikkerend effect. Daarom moesten de links voor vorige en volgende foto groter worden, zodat hoveren langer werkte. Maar de zichtbare knoppen mochten niet groter worden, want dat zou lelijk zijn.)
Ernstiger waren de verschillen bij het tonen van de grote foto, en helemaal volledig opgelost zijn die niet. Dat zou waarschijnlijk alleen lukken bij gebruik van JavaScript. (Een volledig overzicht staat bij Bekende problemen.)
In principe openen de grote foto's als .wrapper-thumb-foto focus heeft en bij hoveren over thumbnail of een van de knoppen Vorige foto of Volgende foto. Op een touchscreen werkt hoveren niet, maar daar openen de grote foto's bij aanraking van een van deze elementen.
Als je op de desktop op de knop voor Vorige of Volgende foto klikt, wordt naar de vorige of volgende thumbnail gegaan. Daardoor verschijnen ook de daarbij horende knoppen. De cursor staat precies boven de knop Vorige of Volgende foto, want dat is waar je bij de vorige thumb hebt geklikt. De cursor hovert dus over de knop voor Vorige of Volgende foto, waardoor de grote foto wordt getoond.
Helaas wordt op Android de verkeerde grote foto getoond in Opera Mobile, Firefox en Android browser. Dit is voor Opera Mobile en Android browser op te lossen door een aparte regel in de css toe te voegen voor als Vorige of Volgende foto focus heeft. Grote foto's sluiten niet in Android browser, dit is weer op te lossen door de regel
body:active .foto {display: none;}
Kortom: er zijn nogal wat aanpassingen nodig, wat nogal wat extra css oplevert. En dan nog werkt niet overal alles exact hetzelfde. In Firefox op Android 4.0.3 bijvoorbeeld wordt nog steeds de verkeerde grote foto getoond.
Als ik zoiets als dit 'in het echt' zou moeten maken, zou ik waarschijnlijk voor de grote foto's voor JavaScript kiezen, met eventueel deze css voor het geval JavaScript uitstaat.
Testen op hogeresolutieschermen
Er komen steeds meer apparaten met een hogere resolutie, dan op de desktop gebruikelijk is: meer dpi, dots per inch. (Van oudsher wordt helaas 'inch' gebruikt als eenheid. Zucht. Ooit zal dit wel 'ns overgaan in cm, maar helaas is dat nog niet zover.)
Als je meer pixels in een inch stopt, waardoor de pixels dichter op elkaar staan, krijg je fijnere afbeeldingen. Vooral bij ronde lijnen en dergelijke is dit goed te merken. Een ronde lijn die wordt weergegeven met 72 px per inch is grover, dan diezelfde lijn die met 300 px per inch wordt weergegeven.
Een lijn die op een normale desktopmonitor 4 px breed is, zou op zo'n hogeresolutiescherm van 300 dpi maar 1 px breed zijn. Superduidelijk, dat wel, maar zonder vergrootglas niet te zien. Omdat de pixels vier keer zo dicht op elkaar staan. Bestaande sites die vier (of meer) keer zo klein worden weergegeven, als waar ze voor bedoeld zijn, maken alleen opticiens vrolijk.
Althans: je zou die kleinere weergave op een hogeresolutiescherm verwachten. Maar gelukkig wordt dat voorkomen. Apparaten met een hogeresolutiescherm geven een 'valse' resolutie op. Een iPad met een hogeresolutiescherm geeft niet het aantal 'schermpixels' op, maar het aantal 'css-pixels'. En dat is hetzelfde als bij een 'normale' desktopmonitor. Hierdoor ziet een site er op een iPad hetzelfde uit als op een desktopmonitor.
Niet alleen de iPad heeft dit handigheidje, alle hogeresolutieschermen doen dit. Anders zouden ze volstrekt onbruikbaar zijn om mee te surfen.
Met behulp van media queries kun je testen op resolutiedichtheid. Maar de ondersteuning hiervan is is nog sterk in ontwikkeling, daarom test ik hier (nog) niet op.
Er zijn nogal wat sites die alleen rekening houden met de iPad/iPhone en Safari. Door dat te doen, werk je mee aan de kans op net zo'n monopolie als Internet Explorer ooit had. Dat heeft ons jarenlang grote ellende opgeleverd. Het lijkt me niet handig om dat nog eens te gaan herhalen met Apple, temeer niet omdat Apple zich steeds meer als een gediplomeerd patenttrol begint te gedragen en veelbelovende pogingen doet Microsoft van de troon te stoten als meest onsympathieke bedrijf in de ICT.
Persoonlijk zou ik gewoon wachten, tot dit in een standaard is opgenomen en voldoende wordt ondersteund door de diverse browsers. Mocht je het toch willen gebruiken, dan zou je in ieder geval álle vormen moeten gebruiken, en niet alleen die met -webkit-.
Op de pagina met links kun je onder CSS → Media Queries en Responsive Web Design links over dit onderwerp vinden.
:hover, :focus en :active voor muis, toetsenbord, touchpad en touchscreen
:hover
Omdat :hover mogelijk niet werkt, als css uitstaat, ontbreekt of onvolledig is geïmplementeerd, moet je nooit belangrijke informatie alleen met behulp van :hover tonen.
Je hovert over een element, als je met behulp van muis of touchpad de cursor boven dat element brengt. Hoveren kan over álle elementen. Het wordt veel gebruikt om iets van uiterlijk te laten veranderen, een pop-up te laten verschijnen, en dergelijke.
In dit voorbeeld wordt :hover gebruikt in browservensters breder dan 430 px, waarin naast de thumbnail een grotere foto moet worden getoond.
Zodra de cursor boven de thumbnail of de knop Vorige of Volgende foto komt, wordt de grote foto getoond. Op touchscreens gebeurt dit als de thumbnail of de knop Vorige of Volgende foto wordt aangeraakt.
:focus
Omdat :focus mogelijk niet werkt, als css uitstaat, ontbreekt of onvolledig is geïmplementeerd, moet je nooit belangrijke informatie alleen met behulp van :focus tonen.
De meeste mensen gaan met een muis naar een link, invoerveld, en dergelijke. Waarna ze vervolgens klikken om de link te volgen, tekst in te voeren, of wat ze ook maar willen doen.
Er is echter 'n tweede manier om naar links, invoervelden, en dergelijke te gaan: met behulp van de Tab-toets (sommige browsers gebruiken andere toetsen, maar het principe is hetzelfde). Met behulp van de Tab-toets kun je naar links, invoervelden, en dergelijke 'springen'. Waar je staat, wordt door alle browsers aangegeven met een of ander kadertje. De link en dergelijke met het kadertje eromheen heeft focus. Dat wil zeggen dat je die link volgt, als je op de Enter-toets drukt, of dat je in dat veld tekst kunt gaan invoeren, enz.
Als iemand geen muis wil of kan gebruiken, bijvoorbeeld door 'n handicap, is deze manier om de cursor te sturen erg handig. Als de volgorde van de links, invoervelden, en dergelijke in de code niet logisch is, kun je eventueel met behulp van tabindex 'n afwijkende volgorde opgeven. De Tab-toets volgt dan die afwijkende volgorde.
Links, invoervelden, en dergelijke worden automatisch bezocht bij gebruik van de Tab-toets. Maar door aan andere elementen een tabindex te geven, kunnen ook andere elementen focus krijgen.
In dit voorbeeld wordt :focus gebruikt bij .wrapper-thumb-foto, de span waar de thumbnail en de bijbehorende grote foto in staan. Zodra deze span focus heeft, wordt de bijbehorende grote foto geopend.
Verder wordt het nog gebruikt om het weergeven van de verkeerde grote foto in Android browser en Opera op Android 4.0.3 te voorkomen. Als Vorige of Volgende foto focus heeft, wordt in Android een 'verkeerde' grote foto geopend. De ene verkeerde weergave heft de andere verkeerde weergave op, waardoor het uiteindelijke resultaat een goede weergave is.
:active
Omdat :active mogelijk niet werkt, als css uitstaat geïmplementeerd, ontbreekt of onvolledig is, moet je nooit belangrijke informatie alleen met behulp van :active tonen.
:active wordt hier niet gebruikt.
(Feitelijk klopt dit niet helemaal. Het wordt in Android 4.0.3 op één plaats gebruikt. Niet voor waar :active eigenlijk voor is bedoeld, maar om een stukje gedrag te corrigeren. Hierover verderop meer.)
Aanpassingen voor touchscreens
Het gebruik van :hover om een pop-up te laten verschijnen, levert op touchscreens nogal wat problemen op. Op internet zijn waanzinnig veel methodes te vinden, om dit voor elkaar te krijgen. De meeste blijken niet, slecht of alleen op één systeem te werken.
Ik ben bijvoorbeeld voor iOS een methode tegengekomen om een pop-up te sluiten door een plaatje (een <img>) aan te raken. Op dit moment werkt dat, maar het kan prima zijn dat dit helemaal niet de bedoeling is van Apple. Als dit in een komende versie van iOS wordt aangepast aan wat Apple eigenlijk wilde, werkt deze methode plotseling niet meer.
Dit is geen vage angst of zo, in het verleden is dit op grote schaal gebeurd. Mensen gebruikten fouten in Internet Explorer om een of andere bug of afwijking voor alleen (een bepaalde versie van) die browser te repareren. Als Microsoft de fout dan in een nieuwe versie had gerepareerd, donderde de hele lay-out grotelijks in elkaar.
De hier gebruikte methode is gebaseerd op de officiële documentatie van Microsoft en Apple. Hierdoor is er een grote kans dat deze methode ook blíjft werken.
Android schittert hier door afwezigheid, omdat ik geen officiële documentatie hierover heb kunnen vinden.
Windows 8
Binnen Windows 8 werkt het met muis, toetsenbord en/of touchpad op de gebruikelijke manier. Op een touchscreen werkt het in Opera, Firefox en Google Chrome ook op de gebruikelijke manier.
Voor Internet Explorer 10 is een kleine aanpassing nodig. Om het in Internet Explorer 10 op een touchscreen goed te laten werken, moet overal in de html, waar een pop-up – in dit geval de grote foto – moet verschijnen, aria-haspopup="true" worden toegevoegd.
Hierdoor wordt bij de eerste aanraking van Vorige of Volgende foto de pop-up geopend. Als je het scherm buiten de pop-up aanraakt, wordt de pop-up weer gesloten. Als je de knop Vorige of Volgende foto nogmaals aanraakt, wordt de pop-up niet gesloten, maar wordt de link naar de vorige of volgende thumbnail gevolgd.
In dit geval moeten a.vorige-foto en a.volgende-foto in de html de toevoeging aria-haspopup="true" krijgen, want bij aanraken van deze knoppen moet de pop-up verschijnen. Weliswaar staat de pop-up niet bínnen deze knoppen, maar deze toevoeging zorgt er toch voor dat bij de eerste aanraking de grote foto wordt getoond, en pas bij de tweede aanraking de link wordt gevolgd.
Ook span#hover-help moet de toevoeging aria-haspopup="true" krijgen, omdat anders het hulpschermpje niet opent.
Ik mag graag woest worden over Microsoft, maar in dit geval vind ik dit een heel elegante oplossing. Microsoft maakt gebruik van een al bestaande standaard: WAI-ARIA. Dit is volgens mij stukken beter dan de oplossingen van Apple en Android. Over die bestaande standaard WAI-ARIA kun je op de pagina met links onder het kopje Toegankelijkheid meer vinden.
iOS
Voor iOS is in dit geval maar een kleine aanpassing nodig. Als het hulpschermpje wordt geopend, is dit niet meer te sluiten. Althans: je moet een van de knoppen boven de thumbnail of de thumbnail zelf aanraken om het hulpschermpje te sluiten.
Omdat dit niet vanzelfsprekend is, is boven het sluitschermpje een span.sluit-hulp met een sluitkruisje aangebracht. Deze span moet buiten het eigenlijke hulpschermpje staan, anders werkt het niet.
Het gaat er eigenlijk om dat de focus wordt weggenomen bij het hulpschermpje. Door aan span.sluit-hulp in de html toe te voegen onclick="void(0);", kan span.sluit-hulp ook focus krijgen. En omdat deze span er uitziet als een sluitkruisje, zullen mensen dit wel herkennen.
(Terzijde: in het algemeen is het een heel slechte en verouderde manier van programmeren om JavaScript in de html te zetten. In dit geval heb ik er geen problemen mee, omdat dit JavaScript feitelijk helemaal niets doet. In vrijwel alle andere gevallen kun je 'n pagina onoverzichtelijk, ontoegankelijk, slecht te indexeren, slecht te onderhouden, en nog vele feestelijkheden meer, maken.)
Normaal genomen zou je ook zo'n soort voorziening moeten treffen, om de grote foto's te kunnen sluiten. Maar in dit geval is het geen enkel probleem als de grote foto's alleen sluiten bij aanraking van een knop naar de vorige of volgende thumbnail, omdat er verder niets op de pagina staat.
Android
In Android browser op Android 4.0.3 sluit de grote foto niet, waardoor grote foto's over elkaar heen komen te staan. Door aan de css de regel
body:active .foto {display: none;}
toe te voegen, sluiten ook in Android de grote foto's.
Beschrijving van code en css
De code die te maken heeft met de basis van dit voorbeeld is onderstippeld blauw. 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, kun je bovenaan de pagina de hele handel 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.
Gebruik het volledige doctype, inclusief de eventuele url, anders werkt het niet goed.
Het hier gebruikte doctype is dat van html5.
<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.
In html5 hoeft deze regel niet langer te zijn, dan wat hier staat.
<meta name="viewport" content="width=device-width, initial-scale=1">
Mobiele apparaten variëren enorm in breedte. En dat is een probleem. Sites waren, in ieder geval tot voor kort, gemaakt voor desktopbrowsers. En die hebben, in vergelijking met bijvoorbeeld een smartphone, heel brede browservensters. Hoe moet je op 'n smartphone een pagina weergeven, die is gemaakt voor de breedte van een desktop? Je kunt natuurlijk wachten tot álle sites zijn omgebouwd voor smartphones, tablets, enz., maar dan moet je waarschijnlijk heel erg lang wachten.
Mobiele browsers gokken erop dat een pagina een bepaalde breedte heeft. Safari voor mobiel bijvoorbeeld gaat ervan uit dat een pagina 980 px breed is. De pagina wordt vervolgens zoveel versmald dat hij binnen het venster van het apparaat past. Op een iPhone wordt de pagina dus veel smaller dan op een iPad. Vervolgens kan de gebruiker inzoomen op het deel van de pagina dat hij of zij wil zien.
Dit betekent ook dat bij het openen van de pagina de tekst meestal heel erg klein wordt weergegeven. (Meestal, want niet alle browsers en apparaten doen het op dezelfde manier.) Niet erg fraai, maar bedenk maar 'ns 'n betere oplossing voor bestaande sites.
Nieuwe sites of pagina's kunnen echter wel rekening houden met de veel kleinere vensters van mobiele apparaten. Deze lay-out bijvoorbeeld past zich aan de breedte van het venster aan, ook bij heel smalle vensters. Maar die stomme mobiele browser weet dat niet, dus die gaat ervan uit dat ook de heel smalle lay-out 980 px breed is, en verkleint die dan. Dat is ongeveer even behulpzaam als de gedienstige kelner die behulpzaam de stoel naar achteren trekt, net als jij wilt gaan zitten.
Om de door de browser aangeboden hulp vriendelijk maar beslist te weigeren, wordt deze tag gebruikt. Hiermee geef je aan dat de pagina is geoptimaliseerd voor mobiele apparaten.
Een iPad in portretstand bijvoorbeeld is 768 px breed. De kreet width=device-width zegt tegen de mobiele browser dat de breedte van de weer te geven pagina gelijk is aan de breedte van het apparaat. Voor een iPad in portretstand dus 768 px. En dat klopt, want de weer te geven pagina past zich automatisch aan de breedte van het apparaat aan, omdat de pagina altijd 100% breed is. Als het apparaat 300 px breed is, is de pagina ook 300 px breed, maar nog altijd 100%.
Simpeler gezegd: je zegt tegen het mobiele apparaat dat de pagina geen vaste breedte heeft, en dat het dus niet nodig is om de weergave aan te passen.
Steeds meer mobiele apparaten krijgen een hogere resolutiedichtheid: er staan meer pixels in een inch dan bij een monitor voor de desktop het geval is. Als een lijn 4 px breed is, en de pixels staan vier keer zo dicht op elkaar als op de desktop, zou de lijn maar 1 px breed zijn op een mobiel apparaat. Het is wel een supermooie en strakke lijn, omdat je met vier dicht bij elkaar staande pixels fantastisch scherp kunt weergeven. Alleen is de lijn helaas nauwelijks te zien, omdat hij in al z'n pracht maar 1 px breed is.
Ook niet echt geweldig. Daarom geven ook deze apparaten de breedte weer, alsof de resolutie een standaarddichtheid heeft. Een retina-scherm (een scherm met een hoge resolutiedichtheid) jokt een beetje. Ook een venster van 2048 of 4096 px breed beweert 1024 px breed te zijn. Hierdoor ziet een lijn van 4 px breed er ook op zo'n scherm als 4 px breed uit, en niet als 1 of 2 px breed.
Die hoge resolutiedichtheid heeft wel zin, maar dan op een andere manier. Letters bijvoorbeeld worden al jaren getekend aan de hand van wiskundige formules, het zijn allang geen statische afbeeldingen meer. Die formules kunnen prima met die hoge resolutiedichtheid uit de voeten: een ronding in een letter is in een hogere resolutie veel fijner dan in een lagere resolutie. Ook voor hoge kwaliteit afbeeldingen is een hoge resolutiedichtheid zinvol. Het enige waar het niet zinvol is, is bij het aangeven van een maat. Een lijn van 4 px breed moet 4 px breed zijn, en niet 1 px breed in superkwaliteit.
Er staat nog een tweede deel in de tag: initial-scale=1. Sommige mobiele apparaten zoomen een pagina gelijk in of uit. Ook weer in een poging behulpzaam te zijn. Ook dat is hier niet nodig, want de pagina past zich aan het apparaat aan. Er is ook een instructie om zoomen helemaal onmogelijk te maken, maar die gebruik ik niet. De bezoeker kan zelf nog gewoon zoomen, wat belangrijk is voor mensen die wat slechter zien.
<link rel="stylesheet" href="../../css/naam‑van‑stylesheet.css">
Dit stukje code heeft in dit voorbeeldbestand geen enkel nut. Normaal genomen is het een verwijzing naar een extern stylesheet, waarin de style staat. In dit voorbeeld verwijst de href naar een niet bestaand bestand. In html5 is de toevoeging type="text/css" niet meer nodig, omdat dit standaard al zo staat ingesteld.
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 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 dat in dit voorbeeld tussen <style> 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>
In html5 is de toevoeging type="text/css" niet meer nodig.
Voor de duidelijkheid staat de style hier in het bestand zelf, maar het is beter deze in een apart stylesheet te zetten, zoals hierboven beschreven. In die stylesheet komt alles wat tussen bovenstaande regel en </style> staat.
Technisch gezien is er geen enkel bezwaar om het in die stylesheet te zetten met dezelfde vreselijke lay-out, zoals ik die 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;
}
css voor alle breedtes
body
Het element waarbinnen de hele pagina staat. Veel instellingen die hier worden opgegeven, worden geërfd door de nakomelingen van <body>. Ze gelden voor de hele pagina, tenzij ze later worden gewijzigd. Dit geldt bijvoorbeeld voor de lettersoort, de lettergrootte en de voorgrondkleur.
background: #ff9;
Achtergrondkleur.
color: black;
Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.
Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hierboven heb ik een achtergrondkleur opgegeven. 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 voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.
Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt in een eigen stylesheet, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.
font-family: Arial, Helvetica, sans-serif;
Lettersoort. Als er geen Arial is, wordt gezocht naar Helvetica. Als dat er ook niet is in ieder geval 'n lettersoort zonder schreef (dwarsstreepjes).
margin: 0; padding: 0;
Verschillende browsers hebben verschillende standaardinstellingen hiervoor. Door ze gewoon op 0 te zetten, zijn ze overal hetzelfde.
#content
Het element met id="content". Dit is de div, waarbinnen alles staat, op het onderschrift en het hulpschermpje na.
height: 200px;
Deze hoogte is groot genoeg om elke thumbnail redelijk goed weer te kunnen geven, zonder dat lagere thumbnails al te ver van het onderschrift komen te staan.
max-height: 100%;
Een hoogte in procenten wordt altijd genomen ten opzichte van de ouder van het element. Dat is hier <body>. <body> is normaal genomen even hoog als het venster van de browser. div#content, en dus alles wat daarin zit, kan nu nooit hoger worden dan het venster van de browser. Op kleine apparaten is dat gelijk de hoogte van het schermpje. De thumbnail is dus altijd in z'n geheel te zien.
Alleen de titel, die buiten div#content staat, kan nu eventueel buiten het venster vallen. Alleen voor de titel moet dus eventueel worden gescrold.
overflow: hidden;
Standaard staat overflow op visible. Dat betekent dat de inhoud van een element altijd is te zien, ook als het niet in dat element past. Hier staan veertien thumbnails met bijbehorende knoppen onder elkaar, dus dat past nooit binnen div#content. Maar het zou toch gewoon zichtbaar zijn.
Normaal genomen is dat 'n prima idee. Mogelijk wordt je lay-out wat verpest, maar je kunt in ieder geval alles zien. Hier is dat geen goed idee. Met deze instelling wordt alleen datgene getoond, dat binnen div#content past: één thumbnail met bijbehorende knoppen.
margin-top: 5px;
Kleine marge aan de bovenkant.
.wrapper-alles
De elementen met class="wrapper-alles". Elke thumbnail met bijbehorende grote foto en knoppen staat in een eigen div. Die divs hebben deze class.
height: 200px;
Een div wordt normaal genomen precies hoog genoeg, om de inhoud ervan weer te kunnen geven. Dat levert hier een probleem op, omdat niet alle thumbnails even hoog zijn.
div#content, waar de hele handel in staat, is bij #content 200 px hoog gemaakt. Als de thumbnail lager is, vult deze niet de volle hoogte van div#content, waardoor een deel van een eerdere of latere thumbnail zichtbaar is, zoals op de afbeelding is te zien.
Door div.wrapper-alles even hoog te maken als div#content, wordt div#content altijd gevuld. Als een thumbnail lager is dan 200 px, blijft er nu gewoon een stuk leeg.
text-align: center;
Tekst horizontaal centreren. Deze eigenschap wordt geërfd door alle nakomelingen van .wrapper-alles, tenzij dit specifiek wordt veranderd voor 'n nakomeling.
De naam van deze eigenschap is eigenlijk wat ongelukkig gekozen. Niet alleen tekst, maar álle inline-elementen worden horizontaal gecentreerd. Ook <a>'s, <span>'s en <img>'s. (In tegenstelling tot wat veel mensen denken is ook een <img> een inline-element. Weliswaar met een aantal aparte eigenschappen, maar het blijft een inline-element.)
text-align heeft hier geen effect op de links .vorige-thumb, .volgende-thumb, .vorige-foto en .volgende-foto, want die worden verderop absoluut gepositioneerd. Maar het heeft wel effect op de pijltjes die binnen deze links staan. Die worden nu in één keer allemaal horizontaal gecentreerd, hoewel ze over vier verschillende elementen zijn verdeeld.
Een div zoals .wrapper-alles wordt normaal genomen automatisch even breed als zijn ouder. Dat is hier div#content, die ook weer automatisch even breed wordt als zijn ouder. Dat is <body>, waarmee div#content en daardoor ook .wrapper-alles even breed worden als het venster van de browser. Er wordt dus horizontaal gecentreerd binnen de volle breedte van de pagina.
De thumbnails staan binnen span.wrapper-thumb-foto, ook een nakomeling van .wrapper-alles. Daardoor wordt ook deze span horizontaal gecentreerd, en ook de binnen deze span zittende thumbnail. Smallere thumbnails zullen hierdoor horizontaal gecentreerd op het scherm verschijnen.
position: relative;
De knoppen met pijltjes moet gepositioneerd worden ten opzichte van .wrapper-alles. Nakomelingen van een element kunnen alleen worden gepositioneerd ten opzichte van dat element, als dat element zelf relatief, absoluut of fixed is gepositioneerd. Dat wordt hier geregeld.
Omdat er verder geen waarden voor top en dergelijke worden opgegeven, heeft deze regel verder geen enkele invloed op .wrapper-alles zelf.
.vorige-thumb, .volgende-thumb
De elementen met class="vorige-thumb" en class="volgende-thumb". Dit zijn de links, waarbinnen de pijltjes naar de vorige en volgende thumbnail staan.
background-color: white; background-color: rgba(255, 255, 255, 0.35);
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 voorbeeld 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 8, krijgen dus gewoon een massief witte achtergrond.
Meestal wordt voor 'n kleur de hexadecimale notatie gebruikt, iets als color: #33ab01;. Daarbij worden niet alleen cijfers, maar ook letters gebruikt. 0 tot en met 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 tot en met FF.
De eerste drie getallen bij rgba() geven de kleur aan. Deze lopen van 0 tot en met 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 doorzichtig: 0.35. Hierdoor zie je de thumbs nog enigszins door de achtergrond heen, maar zijn de zwarte pijltjes toch altijd goed zichtbaar, ook op donkere thumbs.
color: black;
Normaal genomen krijgt de tekst binnen een link een afwijkende kleur. Dat is hier niet de bedoeling.
width: 30px;
Breedte.
max-height: 30px;
Hieronder wordt een regelhoogte van 30 px opgegeven. Normaal genomen krijgt deze link daardoor ook die hoogte, en is een eigen hoogte voor de link niet nodig.
Maar als de letters (sterk) vergroot worden, neemt ook de hoogte van de link toe. Waardoor deze boven de thumbnails zou komen te staan, zoals op de afbeelding hiernaast bij de buitenste twee knoppen het geval is.
Door een maximumhoogte op te geven, zal de witte achtergrond van de knoppen nooit boven de thumbs komen. Bij de middelste twee knoppen op de afbeelding is dat het geval. De pijltjes staan iets boven de thumbnail, maar de witte achtergrond niet.
Dit speelt alleen maar in bredere browservensters, want normaal genomen zal alleen daar de lettergrootte in sommige browsers kunnen worden veranderd. Maar omdat de meeste css voor deze .vorige-thumb en .volgende-thumb hier staat, heb ik het al hier opgegeven, zodat zoveel mogelijk css voor de overzichtelijkheid op één plaats staat.
(In Internet Explorer speelt dit nooit, omdat een regelhoogte in px nooit verandert in Internet Explorer, ook niet als de lettergrootte wordt veranderd.)
line-height: 30px;
Regelhoogte. Tekst wordt automatisch verticaal in het midden van de regelhoogte gezet. De maximumhoogte van de link is hierboven ook op 30 px gezet, en daarmee dus ook de hoogte van de achtergrondkleur. Nu staan de pijltjes automatisch verticaal gecentreerd.
text-decoration: none;
De normale onderstreping van een link is hier niet welkom.
border-radius: 15px;
Ronde hoeken. Omdat maar één waarde wordt opgegeven, krijgen alle hoeken dezelfde ronding.
Je kunt aparte waarden opgegeven voor horizontaal en verticaal, maar ook dat gebeurt niet. Hierdoor worden deze hoeken horizontaal en verticaal even groot, als delen van een cirkel.
Breedte en hoogte van de link zijn 30 px. Deze hoeken zijn half zo groot en cirkelvormig. Het eindresultaat is een cirkel met een doorsnede van 30 px.
Internet Explorer 8 kent border-radius niet, en geeft dus gewoon vierkante hoeken.
position: absolute;
Om de knoppen op de juiste plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste voorouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier .wrapper-alles.
Van zichzelf is een link een inline-element. Door de link absoluut te positioneren, verandert deze in een blok-element, waardoor eigenschappen als maximumhoogte en breedte gebruikt kunnen worden.
top: 5px;
5 px vanaf de bovenkant van .wrapper-alles neerzetten.
left: 1px;
En 1 px vanaf de linkerkant van .wrapper-alles. Dat is net iets mooier dan helemaal tegen de zijkant aan.
.volgende-thumb
De elementen met class="volgende-thumb". Dit zijn de knoppen rechtsboven, waarbinnen de pijltjes staan.
Hierboven bij .vorige-thumb, .volgende-thumb is de meeste css al opgegeven. Maar de plaats van deze knoppen moet worden aangepast, anders zouden ze ook linksboven komen te staan, op dezelfde plaats als .vorige-thumb.
right: 1px;
1 px vanaf de rechterkant van .wrapper-alles neerzetten. Dat is net iets mooier dan helemaal tegen de rechterkant aan.
left: auto;
Bij .vorige-thumb, .volgende-thumb zijn left: 1px; en een breedte van 30 px opgegeven. Hier gelijk boven wordt een positie vanaf rechts opgegeven. Als een element een vaste breedte heeft, kun je niet een positie vanaf rechts én vanaf links opgeven. Het effect hiervan zou gelijk staan aan vierendelen, en dat is een barbaarse gewoonte, dus daar beginnen we niet aan.
De standaardwaarde van left is auto. Door die hier op te geven, wordt left 'geneutraliseerd' en kan right gewoon netjes zonder te vierendelen z'n werk doen.
.vorige-foto, .volgende-foto
De elementen met class="vorige-foto" en class="volgende-foto". Dit zijn de binnenste twee knoppen boven de thumbnails, die de grote foto's laten verschijnen.
display: none;
De grote foto's worden alleen zichtbaar in browservensters breder dan 430 px. Daarom kunnen de knoppen hier worden verborgen. Later worden ze dan weer zichtbaar gemaakt voor bredere browservensters.
.wrapper-thumb-foto:focus
De elementen met class="wrapper-thumb-foto", maar alleen als deze elementen focus hebben. Dit zijn de spans, waarbinnen de thumbnails en de grote foto's staan.
Mensen die de muis niet kunnen of willen gebruiken, kunnen met behulp van de Tab-toets links, tekstvelden, en dergelijke aflopen. Deze elementen krijgen één voor één focus. Een element dat focus heeft, krijgt een kadertje. Hierdoor weet je altijd, waar op de pagina je bent.
Normaal genomen krijgt een span geen focus, maar in dit geval wel, omdat deze spans een tabindex hebben gekregen. Hierdoor kunnen ook gebruikers van de Tab-toets de grote foto openen.
outline: none;
Ook een span die focus heeft, krijgt een kadertje. Dat heeft in dit geval geen enkel nut én het is foeilelijk. Daarom wordt het weggehaald. In Opera is het onmogelijk dit kadertje te verwijderen, dus gebruikers van Opera die de Tab-toets gebruiken, zitten opgezadeld met een foeilelijke blauwe rand rondom de thumbnails.
.thumb
De elementen met class="thumb". Elke thumbnail is een <img>. Die <img>'s hebben deze class.
max-width: 100%;
Normaal genomen geef je bij een <img> een breedte en hoogte op in de html. Bij het laden van de pagina kan hierdoor al ruimte worden gereserveerd voor de afbeeldingen. Hoogte en breedte kunnen op precies dezelfde manier worden opgegeven met behulp van css. Als je veel afbeeldingen met dezelfde grootte hebt, is dat efficiënter, dan voor elke afbeelding apart de grootte in de html op te geven.
Hier kunnen echter geen vaste maten worden gebruikt, omdat de grootte van de thumbnails afhankelijk is van de grootte van het venster van de browser. Omdat je in de html slechts één breedte en één hoogte op kunt geven, zijn maten in de html hier onbruikbaar.
Om dezelfde reden zijn ook in de css vaste maten hier niet geschikt, maar in css zijn ook maten in procenten en dergelijke mogelijk. Hier wordt een maximumbreedte van 100% opgegeven.
Een breedte in procenten wordt altijd genomen ten opzichte van de ouder van het element. Dat is hier .wrapper-thumb-foto. Maar dat is een span, en die wordt daardoor niet breder dan nodig is voor de inhoud. Dat schiet dus niet op.
De ouder van .wrapper-thumb-foto is .wrapper-alles, een div. Een blok-element zoals een div wordt normaal genomen automatisch even breed als z'n ouder. Dat is hier div#content. Ook die wordt weer even breed als z'n ouder: <body>. Daardoor is de uiteindelijke breedte, waar die 100% op gebaseerd is, de breedte van het venster van de browser. Dat zal in hele smalle apparaten dezelfde breedte zijn als de breedte van het scherm.
Als bij een <img> geen grootte wordt opgegeven, wordt de afbeelding normaal genomen op ware grootte weergegeven. Bredere thumbnails zouden hierdoor gedeeltelijk buiten het venster van de browser komen te staan. Met deze regel worden de thumbnails nooit breder dan het venster van de browser. Als een thumbnail te breed is, wordt deze door de browser smaller gemaakt. De thumbs zijn dus altijd volledig zichtbaar, ook in smallere browservensters.
Gelijk hieronder wordt ook een maximumhoogte opgegeven. Omdat bij zowel hoogte als breedte alleen een maximum wordt opgegeven, en geen vaste maat voor breedte of hoogte, blijven bij aanpassen van de thumbnail de verhoudingen tussen hoogte en breedte intact.
max-height: 200px;
Het verhaal dat gelijk hierboven staat voor de breedte van .thumb, geldt precies zo voor de hoogte. Alleen kan hier px worden gebruikt, omdat de hoogte van .wrapper-alles bekend is: 200 px.
#wrapper-help
Het element met id="wrapper-help". Binnen deze div zitten tekst en afbeelding van het hulpschermpje.
display: none;
In browservensters smaller dan 430 px is de bediening zo simpel, dat uitleg volledig overbodig is. Dus wordt de hele handel verborgen en pas verderop zichtbaar gemaakt voor bredere vensters.
#titel
Het element met id="titel". Dit is een <p>, waarbinnen het onderschrift onder de thumbnails staat. (Met een klein beetje extra moeite zou trouwens ook een apart eigen onderschrift onder elke grote foto mogelijk zijn, maar dat heb ik hier niet gedaan.)
text-align: center;
p#titel even rood gemaakt, zodat de breedte is te zien.Een blok-element zoals een <p> wordt normaal genomen automatisch even breed zijn ouder. Dat is hier <body>, waardoor de <p> even breed wordt als het browservenster.
De tekst van het onderschrift staat in een span binnen deze <p>. Door die span, en dus de tekst daarin, horizontaal te centreren, staat de tekst hierdoor automatisch ook in het midden van het venster van de browser. Omdat ook de thumbnails horizontaal op dezelfde manier zijn gecentreerd, staat het onderschrift hierdoor altijd netjes midden onder de thumbnails.
margin: 0;
Een <p> heeft van zichzelf een marge aan boven- en onderkant. Die is hier niet welkom.
#titel span
De spans binnen het element met id="titel". Dat is er hier maar eentje, het onderschrift staat erin.
Deze span staat binnen p#titel, die de volle breedte van het venster van de browser vult. Een aantal dingen zoals de achtergrondkleur moet niet die volle breedte krijgen. Daarom is de tekst van het onderschrift binnen een span gezet. Nu kan die span afzonderlijk een achtergrondkleur en dergelijke krijgen, zonder dat die de hele <p> beslaat.
background: #ffd;
Achtergrondkleurtje.
color: black;
Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.
Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hierboven heb ik een achtergrondkleur opgegeven. 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 voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.
Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt in een eigen stylesheet, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.
border: black solid 1px;
Zwart randje.
border-radius: 2px;
Ronde hoeken. Omdat maar één waarde wordt opgegeven, krijgen alle hoeken dezelfde ronding.
Je kunt aparte waarden opgegeven voor horizontaal en verticaal, maar ook dat gebeurt niet. Hierdoor worden deze hoeken horizontaal en verticaal even groot, als delen van een cirkel.
Internet Explorer 8 kent border-radius niet, dus die krijgt gewoon rechte hoeken.
padding: 0 3px;
Omdat voor onder en links geen waarden zijn opgegeven, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 3px 0 3px in de volgorde boven – rechts – onder – links.
Boven en onder geen padding, links en rechts en kleine afstand tussen tekst en buitenkant van de span.
css voor vensters breder dan 430 px
@media screen and (min-width: 430px)
De css die hier tot nu toe staat, geldt voor alle browservensters. De css die hieronder staat, geldt alleen voor vensters breder dan 430 px. Voor een deel is dit nieuwe css, voor een deel wordt hierboven staande css aangepast.
@media: geeft aan dat het om css gaat die alleen van toepassing is, als aan bepaalde voorwaarden wordt voldaan. Al langer bestond de mogelijkheid, om met behulp van zo'n regel css voor bijvoorbeeld printers op te geven. css3 heeft dat uitgebreid tot bepaalde fysieke eigenschappen, zoals de breedte en hoogte van het venster van de browser.
screen: deze regel geldt alleen voor schermweergave. Als je wilt printen, is het beter een stylesheet daarvoor te baseren op de algemene css die hierboven staat.
and: er komt nog een voorwaarde, waaraan moet worden voldaan.
(min-width: 430px): het browservenster moet minstens 430 px breed zijn. Is het venster smaller, dan wordt de css die binnen deze media-regel staat genegeerd.
Gelijk na deze regel komt een { te staan, en aan het einde van de css die binnen deze regel valt een bijbehorende afsluitende }. Die zijn in de regel hierboven weggevallen, maar het geheel ziet er zo uit:
@media screen and (min-width: 430px) {
body {color: silver;}
(...) rest van de css voor deze @media-regel (...)
footer {color: gold;}
}
Voor de eerste css binnen deze media-regel staat dus een extra {, en aan het eind staat een extra }.
body:active .foto
Doe iets met alle elementen met class="foto" die binnen <body> staan, maar alleen als <body> actief is.
De elementen met class="foto" zijn de spans, waarbinnen de grote foto's zitten. Omdat álle elementen per definitie binnen <body> zitten, geldt dit voor al die spans.
Een element is actief tijdens de tijd dat het wordt geactiveerd, bijvoorbeeld tijdens het indrukken van de knop van de muis boven een link. Op de desktop geldt bovenstaande regel, als ergens in de <body> de knop van de muis wordt ingedrukt. Omdat <body> de hele pagina omvat, geldt deze regel dus overal.
Maar deze regel is niet voor de desktop bedoeld, maar voor Android browser. Op de desktop kan hij verder geen kwaad. Hij is op de desktop gewoon overbodig, dus hij kan gewoon worden gebruikt.
display: none;
Mobiele browsers handelen pseudo-classes als :focus, :hover, en dergelijke niet allemaal volledig op dezelfde manier af. Android browser op Android 4.0.3 sluit de grote foto's niet. Zodra een grote foto is geopend, blíjft deze open. Bovendien wordt de eerste foto in de html bovenaan gezet, daaronder de tweede, enz.
Het toevoegen van deze regel zorgt er op wonderbaarlijke wijze voor, dat ook Android browser de grote foto's weer sluit. Je kunt hetzelfde bereiken met behulp van JavaScript met dingen als ontouchstart en andere toverspreuken, maar met deze css werkt het ook, en dit is uiteindelijk een site voor css.
#content
Het element met id="content". Dit is de div waarbinnen alles staat, op het onderschrift en het hulpschermpje na.
width: 25%;
In browservensters breder dan 430 px is er ruimte om een grotere foto naast de thumbnail te vertonen. In de css voor alle breedtes was geen breedte aan div#content gegeven, waardoor deze automatisch even breed werd als het venster. Nu moet er ruimte vrij blijven voor de grote foto.
Een breedte in procenten wordt altijd genomen ten opzichte van de ouder. Dat is hier <body>, waardoor #content een kwart van de breedte van het venster van de browser krijgt toegewezen.
max-width: 320px;
Hier gelijk boven heeft #content een breedte van 25% van het venster van de browser gekregen. Op een breed scherm kan dat héél breed worden.
De thumbnails zijn allemaal 320 px breed. Je kunt #content wel breder laten worden, maar dan krijg je óf lege ruimte tussen de thumbnails en de grote foto's, óf de browser gaat de thumbnails vergroten, en dat is meestal niet zo'n succes.
Daarom wordt de breedte beperkt tot maximaal 320 px.
height: 240px;
Bij #content heeft div#content een hoogte van 200 px gekregen. Omdat er in bredere browservensters knoppen boven de thumbnail komen te staan, is hier wat extra ruimte nodig.
margin: 5px 0 0 5px;
Kleine marge aan boven- en linkerkant.
.wrapper-alles
De elementen met class="wrapper-alles". Elke thumbnail met bijbehorende grote foto en knoppen staat in een eigen div. Die divs hebben deze class.
height: 240px;
Bij .wrapper-alles heeft div.wrapper-alles een hoogte van 200 px gekregen. Hier komt 40 px extra ruimte, omdat er hier knoppen boven de thumbs komen te staan.
.vorige-thumb, .volgende-thumb
De elementen met class="vorige-thumb" en class="volgende-thumb". Dit zijn de links, waarbinnen de pijltjes naar de vorige en volgende thumbnail staan.
background: white;
Bij .vorige-thumb, .volgende-thumb hebben deze links een doorzichtige achtergrond gekregen, omdat ze soms bovenop de thumb staan. Hier staan ze altijd boven de thumbnails, dus kunnen ze een egaal witte achtergrond krijgen. Dat is duidelijker dan een doorzichtige achtergrond.
.vorige-foto, .volgende-foto
De elementen met class='vorige-foto" en class="volgende-foto". Dit zijn de links, waarbinnen de pijltjes naar de vorige en volgende thumbnail staan. De html voor deze links is vrijwel hetzelfde als die voor de links met class="vorige-thumb" en class="volgende-thumb". Het enige verschil is dat hier, voor Internet Explorer 10, aria-haspopup="true" is toegevoegd, omdat de grote foto anders niet opent in Internet Explorer 10.
De links .vorige-thumb en .volgende-thumb linken naar de vorige en volgende thumbnail, net als .vorige-foto en .volgende-foto. Maar door aparte links te gebruiken, kun je bij .vorige-foto en .volgende-foto met behulp van css de grote foto's laten openen. Iets wat niet gebeurt bij gebruik van .vorige-thumb en .volgende-thumb.
De pijltjes binnen deze links staan binnen een aparte span. Omdat alleen de span een witte achtergrond en dergelijke krijgt, kan hierdoor de link iets groter worden gemaakt, zonder dat de zichtbare knop groter wordt. Waarom dit nodig is, staat hieronder bij height: 35px;.
color: black;
Normaal genomen krijgt de tekst binnen een link een afwijkende kleur. Dat is hier niet de bedoeling.
height: 35px;
Op de afbeelding hiernaast heeft de omtrek van de link even een blauw randje gekregen, zodat de werkelijke grootte van de link zichtbaar wordt. De achtergrond van de knop is rood gemaakt, zodat de knop duidelijk zichtbaar is. De knop wordt vormgegeven met behulp van de in de link zittende span. Dit geeft de mogelijkheid de link groter te maken dan de knop, terwijl alle vier de knoppen er even groot uit blijven zien.
Als je op de desktop op de knop voor de vorige of volgende grote foto klikt, hover je tegelijkertijd over die knop. Dat kan niet anders, want zodra de muis boven de knop wordt gebracht om erop te klikken, hover je over de knop. Bij hoveren over of klikken op deze knoppen wordt de grote foto getoond. (Ook bij aanraken, maar het gaat hier om de desktop.)
Safari, Opera en Google Chrome laten de grote foto geopend, ook als je niet meer over de knop hovert. Maar Firefox en Internet Explorer sluiten hem, zodra je niet meer over de knop hovert. De knop is eigenlijk een vierkant met afgeronde hoeken, maar hoveren werkt alleen binnen de cirkel. Dat is op de afbeelding de rode cirkel. Buiten de rode cirkel werkt hoveren niet.
Als je in Firefox of Internet Explorer met de muis de knop verlaat, sluit de grote foto. Als je naar onder beweegt, zit daar de thumbnail. Als je boven de thumbnail komt, opent de grote foto weer. Zelfs als de ronde knop precies tegen de bovenkant van de thumbnail aan zou staan, zou je maar 'n miniem raakpunt tussen knop en thumbnail hebben. Je zou precies over dat raakpunt moeten gaan om te voorkomen dat de foto even sluit, terwijl de muis over de kier tussen knop en thumbnail gaat. Als je ook maar één px te veel naar links of rechts gaat, sluit de grote foto heel even. Tests hebben uitgewezen dat alleen stuurlui met minimaal zeventien jaar ervaring op vrachtschepen zo recht kunnen sturen.
Daarom is binnen de link een span aangebracht. In die span staat de lay-out voor de knop. Nu kan de knop er hetzelfde uitzien als de andere knoppen, terwijl de eigenlijke link groter kan zijn.
De link zelf heeft geen ronde hoeken: hoveren werkt gewoon over de volle breedte, ook buiten de hoeken van de zichtbare knop. De link is iets hoger gemaakt dan de knop, zodat hij tegen de thumbnail kan staan. Hiermee wordt een kier tussen link en thumbnail voorkomen. In zo'n kier zou hoveren even niet werken, waardoor de grote foto even zou sluiten.
Hieronder wordt links en rechts nog 'n padding van 5 px aan de link gegeven. Omdat hoveren ook boven 'n padding werkt, ontstaat er nu plotseling 'n riante breedte van 40 px om van knop naar thumbnail te gaan, zonder dat de foto sluit. Tests hebben uitgewezen dat zelfs Haagse politici dit na sluitingstijd van Nieuwspoort nog kunnen, zonder van koers te raken. (Alleen Diederik S. kon dit niet. Maar dat verbaast niet, want die heeft op geen enkel moment welke koersvastheid dan ook.)
text-decoration: none;
De normale onderstreping van een link is hier niet welkom.
padding: 0 5px;
Omdat voor onder en links geen waarden zijn ingevuld, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 5px 0 5px in de volgorde boven – rechts – onder – links.
Boven en rechts geen padding, links en rechts 5 px. Waarom de link deze verhoudingsgewijs brede padding krijgt, staat hierboven bij height: 35px;.
position: absolute;
Om de knoppen op de juiste plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste voorouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier .wrapper-alles.
Van zichzelf is een link een inline-element. Door de link absoluut te positioneren, verandert deze in een blok-element, waardoor eigenschappen als hoogte gebruikt kunnen worden.
top: 5px;
5 px vanaf de bovenkant van .wrapper-alles neerzetten.
left: 22%;
Een afstand in procenten wordt altijd bepaald ten opzichte van de breedte van de ouder. Dat is hier div.wrapper-alles. Normaal genomen wordt een blok-element zoals een div automatisch even breed als zijn ouder. Dat is hier div#content. Bij #content heeft div#content een breedte van 25% van het venster van de browser gekregen. In een breder venster is #content dus breder dan in een smaller venster.
Omdat .vorige-foto en .volgende-foto op een percentage vanaf de linkerkant zijn neergezet, verschuift de plaats van deze links mee met de breedte van #content. De buitenste twee knoppen staan op een vaste plaats, de binnenste twee knoppen verschuiven mee met de breedte. Het eindresultaat is een gelijkmatige verdeling van de knoppen, ongeacht de breedte van het venster van de browser.
(Feitelijk klopt dit verhaal niet helemaal. .volgende-foto moet nog naar rechts worden verplaatst. Dat gebeurt gelijk hieronder.)
.volgende-foto
De elementen met class="volgende-foto". Dit zijn de knoppen boven rechts van het midden, waarbinnen de pijltjes staan.
Hierboven bij .vorige-foto, .volgende-foto is de meeste css al opgegeven. Maar de plaats van deze knoppen moet worden aangepast, anders zouden ze ook boven links van het midden komen te staan, op dezelfde plaats als .vorige-foto.
right: 22%;
22% vanaf rechts neerzetten. De rest van het verhaal is gelijk hierboven te vinden bij left: 22%;.
left: auto;
Bij .vorige-foto, .volgende-foto is left: 22%; opgegeven. Hier gelijk boven wordt een positie vanaf rechts opgegeven. Dit zou betekenen dat deze knop gaat beginnen op 22% van rechts en doorloopt tot 22% van links. Waarmee hij veel te breed zou worden.
De standaardwaarde van left is auto. Door die hier op te geven, wordt left 'geneutraliseerd' en wordt dit voorkomen.
.vorige-foto span, .volgende-foto span
De spans binnen elementen met class="vorige-foto" of class="volgende-foto". Binnen deze spans staan de pijltjes naar de vorige en volgende grote foto.
Waarom de pijltjes van deze knoppen binnen een aparte span staan en niet gewoon rechtstreeks binnen de links, staat hierboven bij height: 35px;.
background: white;
Witte achtergrond.
display: block;
Een span is een inline-element. Door er een blok-element van te maken, kun je eigenschappen als breedte en maximumhoogte gebruiken.
width: 30px;
30 px breed.
max-height: 30px;
Omdat de span is veranderd in een blok-element, wordt deze automatisch precies hoog genoeg om de inhoud weer te kunnen geven. Hieronder wordt een regelhoogte opgegeven van 30 px. Daardoor wordt de span ook 30 px hoog.
Als de lettergrootte wordt vergroot, verandert ook de regelhoogte mee. Alleen in Internet Explorer niet, omdat in Internet Explorer een regelhoogte in px nooit verandert. Maar in alle andere browser waarin de lettergrootte kan worden veranderd, verandert ook de regelhoogte. Waardoor ook de hoogte van de span verandert. En dus ook de grootte van de witte achtergrond.
Daardoor komt bij een grote lettergrootte de witte achtergrond over de thumbnails te staan, zoals op de afbeelding is te zien. Door een maximumhoogte op te geven, wordt dat voorkomen.
font-size: 1.3em;
Grotere lettergrootte.
line-height: 30px;
Regelhoogte. Omdat de span hierboven is veranderd in een blok-element, wordt dit gelijk de hoogte van de span, en dus van de witte achtergrond van de span.
Tekst wordt automatisch in het midden van de regelhoogte gezet. Omdat de regelhoogte even hoog is als de span, staat de tekst automatisch verticaal gecentreerd boven de witte achtergrond.
border-radius: 15px;
Ronde hoeken. Omdat maar één waarde wordt opgegeven, krijgen alle hoeken dezelfde ronding.
Je kunt aparte waarden opgegeven voor horizontaal en verticaal, maar ook dat gebeurt niet. Hierdoor worden deze hoeken horizontaal en verticaal even groot, als delen van een cirkel.
Breedte en hoogte van de span zijn 30 px. Deze hoeken zijn half zo groot en cirkelvormig. Het eindresultaat is een cirkel met een doorsnede van 30 px.
Internet Explorer 8 kent border-radius niet, en geeft dus gewoon vierkante hoeken.
.wrapper-alles:first-child .vorige-thumb, .wrapper-alles:last-child .volgende-thumb, .wrapper-alles:first-child .vorige-foto span, .wrapper-alles:last-child .volgende-foto span
Deze selector lijkt mogelijk wat ingewikkeld, maar als je hem stukje voor stukje bekijkt, wordt het (hopelijk) wat overzichtelijker.
Om te beginnen gaat het om vier aparte selectors, gescheiden door een komma.
De eerste selector:
.wrapper-alles:last-child .volgende-thumb
.wrapper-alles: alle elementen met class="wrapper-alles". Elke thumbnail met bijbehorende grote foto en knoppen staat in een eigen div. Die divs hebben deze class.
:first-child: hoewel .wrapper-alles álle elementen met die class aanroept, wordt hier een beperking aangebracht: het geldt alleen voor de .wrapper-alles die het eerste kind van iets is. Alle divs met class="wrapper-alles" staan binnen div#content. Deze selector geldt alleen maar voor de eerste div.wrapper-alles, want alleen die voldoet aan het criterium :first-child.
.vorige-thumb: de elementen met class="vorige-thumb". Dat is er maar eentje: de link naar de vorige thumb.
Deze selector geldt voor de link naar de vorige thumb, maar alleen voor de link binnen de eerste div.wrapper-alles.
De tweede selector:
.wrapper-alles:last-child .volgende-thumb
Deze is vrijwel hetzelfde als de eerste selector. Alleen staat hier geen :first-child, maar :last-child. Dit geldt alleen voor de .wrapper-alles, die het laatste kind van div#content is.
.volgende-thumb is de link naar de volgende thumbnail.
Deze selector geldt voor de link naar de volgende thumb, maar alleen voor de link binnen de laatste div.wrapper-alles.
De derde en vierde selector:
.wrapper-alles:first-child .vorige-foto span,.wrapper-alles:last-child .volgende-foto span
Het eerste deel is precies hetzelfde als voor de eerste en tweede selector: deze selectors gelden alleen voor de eerste en laatste .wrapper-alles.
.vorige-foto span is de span, waar het pijltje naar de vorige grote foto in staat.
.volgende-foto span is de span, waar het pijltje naar de volgende grote foto in staat.
Alle vier selectors samen in normale mensentaal: dit geldt voor de knoppen naar volgende thumb en volgende grote foto boven de laatste thumbnail, en voor de knoppen naar vorige thumb en vorige grote foto boven de eerste thumbnail. Dit zijn de knoppen, waarin dubbele pijltjes staan: << en >>.
letter-spacing: -0.1em;
De dubbele pijltjes worden gevormd door twee keer een < of > te gebruiken. Je heb daar speciale tekens voor, maar die worden niet door alle browsers weergegeven, dus heb ik gewone tekst gebruikt.
Twee tekens achter elkaar is net iets te breed om goed binnen de knoppen te passen, daarom worden de tekens iets dichter op elkaar gezet door de letter-afstand iets te verkleinen.
Het zou simpeler zijn, als dit bij de css voor .wrapper-alles kon worden opgegeven. Dan heb je deze vier lange selectors niet nodig. Maar dat werkt hier niet goed, omdat dan ook de enkele pijltjes worden verplaatst. Nu worden alleen de dubbele pijltjes smaller weergegeven.
Een maat in em is gebaseerd op de lettergrootte. De lettergrootte van .vorige-foto en .volgende-foto is groter dan die van .vorige-thumb en .volgende-thumb. Maar omdat em gebaseerd is op de lettergrootte, wordt de grootte van de verplaatsing automatisch aan de lettergrootte aangepast.
.wrapper-thumb-foto
De elementen met class="wrapper-thumb-foto". Dit zijn de spans, waarbinnen de thumbnails en de grote foto's staan.
display: block;
Een span is van zichzelf een inline-element. Door het te veranderen in een blok-element, kun je eigenschappen als hoogte gebruiken.
height: 200px;
Hierboven is .wrapper-thumb-foto veranderd in een blok-element. Een blok-element wordt normaal genomen automatisch precies hoog genoeg, om de inhoud ervan weer te kunnen geven. Die inhoud is hier een <img> met de thumbnail, en een span met de grote foto.
De span met de grote foto doet niet mee voor de hoogte, omdat die fixed is gepositioneerd. Blijft over de <img> met de thumbnail. Als de thumbnail lager dan 200 px is, vult deze niet de hele ruimte die bestemd is voor de thumbnail. Daardoor is boven of onder een te lage thumbnail een deel van een andere thumbnail te zien.
Door deze span 200 px hoog te maken, wordt altijd de volle ruimte gevuld. Als een thumbnail lager is dan 200 px, blijft onderaan gewoon een stukje leeg.
padding-top: 40px;
Aan de bovenkant een padding van 40 px. Ruimte vrijmaken boven de thumbnail om de knoppen neer te kunnen zetten.
.foto
De elementen met class="foto". Binnen spans met deze class staan de grote foto's.
Elke thumbnail heeft een bijbehorende achtergrond-afbeelding. Maar op die achtergrond-afbeelding na zijn alle eigenschappen van .foto hetzelfde. Daarom kan ik die eigenschappen hier in één keer opgeven.
display: none;
Normaal genomen moet deze span niet worden getoond.
Omdat deze ruimte feitelijk is gereserveerd voor de grote foto's, zou deze span eigenlijk gewoon altijd 'zichtbaar' mogen zijn. Zichtbaar tussen aanhalingstekens, omdat je pas iets van de span merkt, als er een achtergrond-afbeelding in wordt gestopt.
Maar op touchscreens is deze span dan voortdurend gevoelig voor aanraking. Als het hulpschermpje wordt gesloten, staat de sluitknop boven deze span. Als die wordt aangeraakt, wordt daardoor de laatste grote foto geopend. Door de span standaard te verbergen, wordt dat voorkomen.
width: 615px;
De grote foto's worden als achtergrond-afbeelding weergegeven. Een achtergrond-afbeelding vult alleen de achtergrond van het element, ongeacht hoe groot de achtergrond-afbeelding zelf is. Als geen breedte aan .foto wordt gegeven, is er geen achtergrond om te vullen en zie je helemaal niets.
Geen enkele grote foto is breder dan 615 px, daarom is dit een goede breedte.
max-width: 73%;
Hieronder wordt .foto fixed gepositioneerd. Dat betekent dat deze maximumbreedte in procenten ten opzichte van het venster van de browser is. Zonder maximumbreedte zou in smallere browservensters een deel van de afbeelding rechts buiten het venster komen te staan en daardoor niet te zien zijn.
div#content, waarin de thumbnails staan, heeft bij #content een breedte van 25% van het venster van de browser gekregen. Samen met wat marges en zo bestrijken thumbnail en grote foto nu altijd het volledige venster. Behalve in brede vensters, omdat .foto nooit breder wordt dan 615 px en #content bij #content een maximumbreedte van 320 px heeft gekregen.
height: 615px;
De grote foto's worden als achtergrond-afbeelding weergegeven. Een achtergrond-afbeelding vult alleen de achtergrond van het element, ongeacht hoe groot de achtergrond-afbeelding zelf is. Als geen hoogte aan .foto wordt gegeven, is er geen achtergrond om te vullen en zie je helemaal niets.
Geen enkele grote foto is hoger dan 615 px, daarom is dit een goede hoogte.
max-height: 100%;
Hieronder wordt .foto fixed gepositioneerd. Dat betekent dat deze maximumhoogte in procenten ten opzichte van het venster van de browser is. Zonder maximumhoogte zou in smallere vensters een deel van de afbeelding onder het venster komen te staan en daardoor niet te zien zijn. Nu kan .foto nooit hoger worden dan het venster van de browser.
position: fixed;
Een fixed positie wil zeggen dat het element niet mee scrolt met de rest van de pagina. Het blijft altijd stil staan op de oorspronkelijke plaats, waar het bij openen van de pagina is neergezet.
Op oudere of goedkopere mobiele apparaten kan dit grote problemen geven, waaronder het volledig verdwijnen van (grote) delen van de pagina. Daarom zou ik normaal genomen voor een absolute positie kiezen. Maar dat kan hier niet, omdat bij #content overflow op hidden is gezet. Hierdoor wordt alles wat niet binnen div#content past niet weergegeven. Dat geldt ook voor absoluut gepositioneerde elementen, maar niet voor fixed.
In dit geval zijn er geen problemen, omdat er niet wordt gescrold. Bij openen van de pagina is gelijk de hele pagina zichtbaar, en dat werkt ook met een fixed positie goed op de geteste mobiele apparaten.
Een span is van zichzelf een inline-element. Door de span fixed te positioneren, verandert hij in een blok-element, waardoor eigenschappen als hoogte en breedte gebruikt kunnen worden.
top: 5px;
Op 5 px van de bovenkant van het venster van de browser neerzetten.
left: 26.9%;
Op 26,9% vanaf de linkerkant van het browservenster neerzetten. Op deze ietwat vreemd ogende afstand blijken alle grote foto's ook in een 800 px breed venster net te passen, zonder dat verkleind hoeven te worden.
z-index: 5;
Een z-index werkt alleen bij een element dat absoluut, relatief of fixed is gepositioneerd. Hierboven is deze span fixed gepositioneerd, dus dat is geregeld.
Deze z-index zou eigenlijk overbodig moeten zijn.
Opera Mobile op Android 4 heeft kennelijk een bug, waardoor deze browser álle thumbs laat zien, ondanks overflow: hidden; bij div#content. Om een of andere reden voorkomt het toevoegen van een z-index bij .foto dit. Als je als waarde 1 neemt, wordt slechts één thumb getoond, maar zijn delen van de grote foto's zichtbaar.
Nog vreemder is dat zich dit niet voortdurend voordoet, maar ogenschijnlijk volstrekt willekeurig.
(Ik heb deze oplossing toevallig ontdekt, omdat voor de knoppen op de site een z-index nodig was. En daar ging alles ook in deze browser goed.)
background-position: center top; background-repeat: no-repeat; background-size: contain;
Normaal genomen zou ik deze drie eigenschappen samenvatten in een zogenaamde 'shorthand': background. Het zou er dan zo uitzien:
background: center top no-repeat contain;
Alle browsers, behalve Internet Explorer 8, herkennen background-size al. Maar niet bij alle browsers werkt dit ook al als onderdeel van background (en Internet Explorer 8 negeert background in z'n geheel, als er iets in staat dat de sukkel niet herkent). background-size moet dus hoe dan ook apart.
Alleen background-position en background-repeat kunnen dus worden gecombineerd in background. Omdat verderop ook de achtergrond-afbeelding apart wordt afgehandeld met background-image, vind ik het hier duidelijker om ook background-repeat en background-position apart te gebruiken. Het zou hier ook nauwelijks css uitsparen, als dit werd gecombineerd.
background-position: center top;
De achtergrond-afbeelding in horizontale richting centreren, en in verticale richting bovenaan zetten.
background-repeat: no-repeat;
Hierboven heeft .foto een breedte en hoogte van 615 px gekregen. Normaal genomen wordt een achtergrond-afbeelding herhaald, tot hij de volledige achtergrond vult. Daardoor zou je afbeeldingen die lager of smaller dan 615 px zijn, meer dan één keer zien. Dit voorkomt dat.
background-size: contain;
Hierboven heeft .foto een maximumhoogte van 100% gekregen, en een maximumbreedte van 26,9%. In smallere browservensters zou de achtergrond-afbeelding hierdoor breder of hoger dan .foto kunnen worden en gedeeltelijk kunnen wegvallen.
De waarde contain bij deze eigenschap voorkomt dat. De achtergrond-afbeelding wordt nooit hoger of breder dan binnen .foto past. Als de afbeelding hoger of breder is, wordt de afbeelding verkleind. Hierbij blijft de verhouding tussen hoogte en breedte intact, zodat de afbeelding niet wordt vervormd.
.wrapper-thumb-foto:focus .foto, .thumb:hover + .foto, .vorige-foto:focus ~ span .foto, .vorige-foto:hover ~ span .foto, .volgende-foto:focus ~ span .foto, .volgende-foto:hover ~ span .foto
Hieronder volgen nog 42 aparte regels voor het openen van de grote foto's. Daarom is het lonend om het stukje css dat voor al die regels hetzelfde, hier neer te zetten. Het hoeft dan niet 42 keer herhaald te worden.
In totaal gaat het hier om zes selectors, van elkaar gescheiden door een komma.
De eerste selector:
.wrapper-thumb-foto:focus .foto
Als een element met class=".wrapper-thumb-foto" focus heeft, doe dan iets met de daarin zittende elementen met class="foto".
.wrapper-thumb-foto is een div. Elke thumbnail met bijbehorende span voor de grote foto heeft een eigen div. .foto is de span, waarbinnen de grote foto zit.
.wrapper-thumb-foto kan door het indrukken van de Tab-toets focus krijgen, omdat er een tabindex aan is gegeven. Meer over :focus staat bij :hover, :focus en :active voor muis, toetsenbord, touchpad en touchscreen.
De tweede selector:
.thumb:hover + .foto
Als over een element met class="thumb" wordt gehoverd, doe dan iets met het in de html gelijk daarop volgende element met class="foto".
De thumbnails zitten in een <img> met class="thumb". De span waarbinnen de grote foto zit, heeft een class="foto". span.foto volgt gelijk op img.thumb.
De derde selector:
.vorige-foto:focus ~ span .foto
.vorige-foto:focus: de links naar de vorige thumbnail, waarbij ook de grote foto moet worden geopend, hebben een class="vorige-foto". Als deze link focus heeft.
~: deze selector lijkt erg op de meer bekende +. Bij de + moeten twee elementen in de html gelijk na elkaar staan. Bij de ~ moet het tweede element ook na het eerste staan in de html, maar het hoeft er niet direct op te volgen. Als het maar dezelfde ouder heeft als het eerste element én ergens na het tweede element staat.
In bovenstaande selector: elke span die in de html na de link met class="vorige-foto" staat, en die dezelfde ouder heeft als .vorige-foto. In dit geval voldoet alleen span.wrapper-thumb-foto hieraan.
.foto is de span, die weer binnen span.wrapper-thumb-foto staat.
In normale mensentaal: doe iets met span.foto, die binnen een span staat die volgt op a.vorige-foto en die dezelfde ouder heeft als a.vorige-foto, maar alleen als a.vorige-foto focus heeft.
Met deze ietwat ingewikkeld ogende selector kun je toch elementen aan :focus koppelen, die niet rechtstreeks iets te maken hebben met het element dat focus heeft.
Meer over :focus staat bij :hover, :focus en :active voor muis, toetsenbord, touchpad en touchscreen.
De vierde selector:
.vorige-foto:hover ~ span .foto
Deze selector is precies hetzelfde als de derde. Het enige verschil is dat bij de derde selector .vorige-foto focus moet hebben, en dat er hier over .vorige-foto gehoverd moet worden.
De vijfde selector:
.volgende-foto:focus ~ span .foto
Deze selector is precies hetzelfde als de derde, alleen gaat het hier om de link met class="volgende-foto".
De zesde selector:
.volgende-foto:hover ~ span .foto
Deze selector is precies hetzelfde als de vierde, alleen gaat het hier om de link met class="volgende-foto".
display: block;
Bij .foto is deze span verborgen. Nu moet hij worden weergegeven. Hieronder wordt er dan de juiste achtergrond-afbeelding in gezet.
De rest van de opmaak is al bij .foto opgegeven.
.wrapper-thumb-foto:focus #foto-1, .thumb:hover + #foto-1, .vorige-foto:hover ~ span #foto-1, .volgende-foto:hover ~ span #foto-1
Deze vier selectors zijn precies hetzelfde als de eerste, tweede, vierde en zesde selector bij .wrapper-thumb-foto:focus .foto, enz. hierboven. Alleen wordt hier voor de span waar de grote foto in zit niet de class .foto gebruikt, maar de id #foto-1. Deze selectors gelden daardoor niet voor álle spans met class="foto", maar alleen voor één specifieke span met id="foto-1". Dit is de span die bij de eerste thumbnail hoort.
De spans met id="foto-1" tot en met id="foto-14" hebben, naast een id, ook allemaal de class "foto". Op de achtergrond-afbeelding na zijn bij .foto alle eigenschappen voor deze spans al opgegeven.
background-image: url(011-pics/paard.jpg);
Achtergrond-afbeelding tonen. Dit is de afbeelding die bij de eerste thumbnail hoort.
.wrapper-thumb-foto:focus #foto-2, .thumb:hover + #foto-2, .vorige-foto:hover ~ span #foto-2, .volgende-foto:hover ~ span #foto-2
{background-image: url(011-pics/kat.jpg);}
tot en met
.wrapper-thumb-foto:focus #foto-14, .thumb:hover + #foto-14, .vorige-foto:hover ~ span #foto-14, .volgende-foto:hover ~ span #foto-14
{background-image: url(011-pics/vliegding.jpg);}
Deze regels zijn precies hetzelfde als die bij .wrapper-thumb-foto:focus .foto-1, enz., alleen zijn de id's en achtergrond-afbeelding anders, omdat het hier om de tweede tot en met veertiende thumbnail gaat.
.vorige-foto:focus ~ span #foto-1
Deze selector is precies hetzelfde als de derde selector bij .wrapper-thumb-foto:focus .foto, enz.. Alleen wordt hier voor de span waar de grote foto in zit niet de class .foto gebruikt, maar de id #foto-1. Deze selector geldt dus niet voor álle spans met class="foto", maar alleen voor één specifieke span met id="foto-1": de span die bij de eerste thumbnail hoort.
De spans met id="foto-1" tot en met id="foto-14" hebben, naast een id, ook allemaal de class="foto". Op de achtergrond-afbeelding na zijn bij .foto alle eigenschappen voor deze spans al opgegeven.
Deze regel is nodig voor Opera Mobile en Android browser op Android 4.0.3.
Bij klikken op de knop Vorige foto, moet naar de vorige thumbnail worden gegaan en de daarbij horende grote foto worden geopend. Firefox, Opera Mobile en Android browser op Android 4.0.3 draaien dit om: eerst wordt de grote foto geopend, en dan wordt naar de vorige thumbnail gegaan. De grote foto is hierdoor niet hetzelfde als de thumbnail.
Hetzelfde speelt bij de knop Volgende foto, maar dan in omgekeerde richting. Echt rampzalig is dit overigens niet, het is alleen wat vreemd. Maar het is natuurlijk niet de bedoeling.
Deze regel corrigeert dit voor Opera Mobile en Android browser, maar niet voor Firefox. span#foto-1 hoort bij de eerste thumbnail. Als ik hier de knop naar de vorige foto aanraak, wordt eerst de grote foto geopend, en dan wordt naar de vorige thumbnail gegaan. Door nu gewoon de vorige grote foto te openen, corresponderen thumbnail en grote foto weer met elkaar.
Omdat dit de eerste thumbnail is, is de 'vorige' grote foto in dit geval de laatste, de grote foto die bij de laatste thumbnail hoort.
Deze regel heeft alleen effect in Opera Mobile en Android browser op Android 4.0.3, dus precies de twee die deze correctie nodig hebben. (Feitelijk Firefox ook, maar die luistert hier niet naar...)
background-image: url(011-pics/vliegding.jpg);
Achtergrond-afbeelding tonen.
.vorige-foto:focus ~ span #foto-2
{background-image: url(011-pics/paard.jpg);}
tot en met
.vorige-foto:focus ~ span #foto-14
{background-image: url(011-pics/liggende-kat.jpg);}
Deze regels zijn precies hetzelfde als die bij .vorige-foto:focus ~ span #foto-1, alleen zijn de id's en achtergrond-afbeelding anders, omdat het hier om de tweede tot en met veertiende thumbnail gaat.
.volgende-foto:focus ~ span #foto-1
{background-image: url(011-pics/kat.jpg);}
tot en met
.volgende-foto:focus ~ span #foto-14
{background-image: url(011-pics/paard.jpg);}
Voor deze regels geldt hetzelfde als bij .vorige-foto:focus ~ span #foto-1, met twee verschillen:
* De selector is niet hetzelfde als de derde selector bij .wrapper-thumb-foto:focus .foto, enz., maar als de vijfde.
* Het gaat hier niet om de knop naar de vorige grote foto, maar om de knop naar de volgende grote foto.
#titel
Het element met id="titel". Dit is een <p>, waar het onderschrift in staat.
background: #ffd;
Achtergrondkleurtje.
color: black;
Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.
Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hierboven heb ik een achtergrondkleur opgegeven. 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 voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.
Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt in een eigen stylesheet, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.
width: 25%;
Een breedte in procenten wordt altijd genomen ten opzichte van de ouder. Dat is hier <body>, waardoor #titel een kwart van de breedte van het venster van de browser krijgt toegewezen.
Bij #content heeft div#content ook een breedte van 25% van het browservenster gekregen. De thumbnails worden horizontaal gecentreerd binnen deze breedte. Als het onderschrift ook horizontaal wordt gecentreerd binnen dezelfde breedte, staat het onderschrift altijd netjes midden onder de thumbnail.
max-width: 318px;
Bij #content heeft div#content een maximumbreedte van 320 px gekregen. Door de <p> waar het onderschrift in staat ook die maximumbreedte te geven, staat het onderschrift altijd netjes midden onder de thumbnail.
Hetzelfde? Heeft-ie geblowd of zo? 320 px hetzelfde als 318 px?
Nee, ik heb al heel lang niet geblowd, dank u.
Hieronder wordt een border van 1 px gegeven. Dus links en rechts moet je 1 px optellen bij die 318 px, en dat maakt samen ook 320 px.
margin: 0 0 0 5px;
Links een marge van 5 px. Omdat een <p> van zichzelf een marge aan boven- en onderkant heeft, die hier niet welkom is, gebruik ik geen margin-left. Nu is de marge boven en onder ook gelijk weg.
div#content heeft bij #content een marge van 5 px aan de linkerkant gekregen. Om het onderschrift altijd netjes midden onder de thumbnails te zetten, moet dus ook deze <p> een marge links van 5 px krijgen.
border: black solid 1px;
Zwart randje.
border-radius: 3px;
Ronde hoeken. Omdat maar één waarde wordt opgegeven, krijgen alle hoeken dezelfde ronding.
Je kunt aparte waarden opgegeven voor horizontaal en verticaal, maar ook dat gebeurt niet. Hierdoor worden deze hoeken horizontaal en verticaal even groot, als delen van een cirkel.
Internet Explorer 8 kent border-radius niet, en geeft dus gewoon vierkante hoeken.
#titel span
De spans binnen het element met id="titel". Dat is er hier maar eentje: de span waar het onderschrift in staat. Deze extra span was nodig voor de weergave in browservensters smaller dan 430 px.
border: none;
Bij #titel span heeft deze span een border gekregen. Die kan hier vervallen, omdat bij #titel de hele <p> waar deze span in staat een border heeft gekregen. En aangezien het hier geen drielandenpunt is, is één border genoeg.
#wrapper-help
Het element met id="wrapper-help". Dit is een div, waarbinnen de afbeelding met het vraagteken, het hulpschermpje en het sluitkruisje staan.
display: block;
Bij #wrapper-help is deze div verborgen. Nu wordt hij weer zichtbaar gemaakt voor bredere browservensters.
width: 25%;
Een breedte in procenten wordt altijd genomen ten opzichte van de ouder. Dat is hier <body>, waardoor #wrapper-help een kwart van de breedte van het venster van de browser krijgt toegewezen.
Bij #content heeft div#content ook een breedte van 25% van het browservenster gekregen. De thumbnails worden horizontaal gecentreerd binnen deze breedte. Als de afbeelding met het vraagteken ook horizontaal wordt gecentreerd binnen dezelfde breedte, staat dit vraagteken altijd netjes midden onder de thumbnail en het onderschrift.
Op de afbeelding hierboven is de achtergrond van #wrapper-help even rood gemaakt, zodat de werkelijke grootte van #wrapper-help is te zien.
max-width: 320px;
Bij #content heeft div#content een maximumbreedte van 320 px gekregen. Door de div waarin de afbeelding met het vraagteken staat ook die maximumbreedte te geven, staat het vraagteken altijd netjes midden onder de thumbnail en het onderschrift.
text-align: center;
Tekst horizontaal centreren. Hier gaat het niet alleen om tekst, maar ook om de <img> met het vraagteken. In tegenstelling tot wat veel mensen denken is een <img> een inline-element. Weliswaar met wat bijzondere eigenschappen, maar het is 'n inline-element. Ook de afbeelding met het vraagteken wordt dus door text-align horizontaal gecentreerd.
margin: 5px 0 0 5px;
Kleine marge aan de boven- en linkerkant.
div#content heeft bij #content een marge van 5 px aan de linkerkant gekregen. Om de <img> met het vraagteken altijd netjes midden onder de thumbnail en het onderschrift te zetten, moet dus ook deze div een marge links van 5 px krijgen.
position: relative;
Hier gelijk onder wordt een z-index gebruikt. Die heeft alleen maar effect bij een element dat absoluut, relatief of fixed is gepositioneerd.
span#help, het hulpschermpje, en span#sluit-help, het sluitvakje, zijn beide nakomelingen van #wrapper-help. Ze worden absoluut gepositioneerd ten opzichte van #wrapper-help. Een nakomeling kan alleen maar worden gepositioneerd ten opzichte van een voorouder die zelf absoluut, relatief of fixed is gepositioneerd. Dat wordt hier dus gelijk ook geregeld.
Omdat geen eigenschappen als top worden gebruikt, heeft deze relatieve positie verder geen enkele invloed op #wrapper-help.
z-index: 30;
.foto heeft bij .foto een z-index van 5 gekregen. Hierdoor zouden hulpschermpje en sluitknop onder de achtergrond-afbeelding binnen .foto komen te staan, en daardoor gedeeltelijk onzichtbaar zijn.
Door div#wrapper-help een hogere z-index te geven, komen hulpschermpje en sluitknop boven de grote afbeeldingen te staan. 30 is 'n stuk groter dan 5, je zou ook 6 kunnen gebruiken. Maar als je één keer honderden z-indexen netjes op elkaar hebt laten volgen en er dan later helemaal aan het begin eentje hebt moeten tussenvoegen, laat je de rest van je leven voor de zekerheid ruimte tussen de z-indexen...
Een z-index werkt alleen als het element relatief, absoluut of fixed is gepositioneerd. Daarom is deze div hierboven relatief gepositioneerd.
#help
Het element met id="help". Dit is de span waarbinnen de tekst van het hulpschermpje staat.
Bij #wrapper-help zijn alle inline-elementen, en dus ook tekst, horizontaal gecentreerd met text-align: center;. Omdat text-align wordt geërfd, geldt dit ook voor de tekst binnen #help.
background: white;
Witte achtergrond.
color: black;
Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.
Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hierboven heb ik een achtergrondkleur opgegeven. 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 voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.
Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt in een eigen stylesheet, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.
display: none;
Span en dus de tekst van het hulpschermpje verbergen.
width: 410px;
Breedte.
max-height: 400px;
Maximumhoogte. In sommige browsers kun je de tekst sterk vergroten. Daardoor zou de tekst mogelijk niet meer in lagere browservensters passen. Door een maximumhoogte op te geven, in combinatie met de overflow hieronder, past het altijd. Als de tekst te hoog wordt, verschijnt rechts een scrollbalk.
overflow: auto;
Als de tekst te hoog wordt voor de span, verschijnt rechts een scrollbalk, zodat alle tekst altijd te zien is.
border: black solid 2px;
Randje rondom de tekst.
padding: 3px;
Kleine afstand tussen de tekst in en de buitenkant van de span.
position: absolute;
Om de tekst op de juiste plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste voorouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier #wrapper-help.
Van zichzelf is een span een inline-element. Door de span absoluut te positioneren, verandert deze in een blok-element. Hierdoor kunnen eigenschappen als breedte en maximumhoogte worden gebruikt.
top: -231px;
231 px boven de bovenkant van #wrapper-help zetten. Omdat #wrapper-help onder de thumbnails staat, moet de hulptekst een eind omhoog worden gezet. Op deze hoogte komt de hulptekst gelijk onder de knoppen te staan.
left: 5px;
5 px vanaf de linkerkant van #wrapper-help neerzetten.
.kopje
De elementen met class="kopje". Dit zijn tussenkopjes in de hulptekst. Je zou hier ook <h>'s voor kunnen gebruiken, maar het gaat hier – volgens mij – niet om echte kopregels, daarom gebruik ik gewone spans met wat opmaak.
display: block;
Van zichzelf is een span een inline-element. Door de spans te veranderen in een blok-element, kan de eigenschap margin-top worden gebruikt en begint elk kopje op een nieuwe regel.
font-weight: bold;
Vette letter.
margin-top: 4px;
Kleine marge aan de bovenkant.
#sluit-hulp
Het element met id="sluit-knop". Dit is het witte vlakje met het rode kruisje. Dit sluitkruisje is nodig voor iOS, omdat anders niet duidelijk is, hoe het hulpschermpje weer kan worden gesloten. De structuur van .wrapper-help en de nakomelingen daarvan is, beknopt weergegeven, als volgt:
<div id="wrapper-help">
<span id="hover-help">
<img src="help.gif">
<span id="help"> ... (hulptekst) ... </span>
</span>
<span id="sluit-help" onclick="void(0);">x</span>
</div>
In alle browsers wordt het hulpschermpje geopend door hoveren over of aanraken van span#hover-help. Ook in iOS. In alle browsers sluit het hulpschermpje weer als de cursor het hulpschermpje verlaat, of als het scherm buiten het hulpschermpje wordt aangeraakt. Behalve in iOS.
In iOS sluit een pop-up pas weer, als een andere 'klikbaar' element wordt aangeraakt. Niet als je zomaar ergens het scherm aanraakt. Klikbare elementen zijn hier bijvoorbeeld de knoppen boven de thumbnails. Door het aanraken van een van de knoppen boven de thumbnail, sluit het hulpschermpje weer. Maar deze manier van sluiten zal niet gelijk duidelijk zijn voor de bezoeker. Daarom is voor iOS een sluitkruisje toegevoegd.
Openen gebeurt door aanraken van span#hover-help. Sluiten gebeurt door aanraken van span#sluit-help, het sluitkruisje.
Deze span staat buiten #hover-help. Als de span met het sluitkruisje, net als het hulpschermpje zelf, binnen #hover-help zou staan, werkt het niet: als #sluit-help onderdeel is van #hover-help, kun je per definitie niet #sluit-help aanraken zonder tegelijkertijd #hover-help aan te raken. Daarom is #sluit-help buiten #hover-help gezet.
Door het toevoegen van onclick="void(0);" aan span#sluit-help, wordt deze span ook 'klikbaar' voor iOS. Waardoor bij aanraken van deze span het hulpschermpje sluit. Door de span er uit te laten zien als een sluitkruisje, zal voor iedereen duidelijk zijn, hoe je het hulpschermpje weer kunt sluiten.
Hoewel dit sluitkruisje alleen voor iOS nodig is, zit het op andere systemen niemand in de weg en kan dus probleemloos gebruikt worden.
background: white;
Achtergrondkleur.
color: red;
Voorgrondkleur, waaronder de kleur van de tekst.
display: none;
Sluitkruisje normaal genomen verbergen.
height: 28px; width: 28px;
Hoogte en breedte. Rondom de span komt een border van 1 px. Hoogte en breedte worden daardoor uiteindelijk 30 px, even groot als de knoppen boven de thumbnail.
font-size: 2em;
Grote letter. Het sluitkruisje is een gewone letter 'x', die groot wordt weergegeven.
line-height: 24px;
Tekst wordt automatisch halverwege de regelhoogte weergegeven.
Het is heel lastig om een gewone letter 'x' in alle browsers op alle systemen precies een rond vakje te laten vullen. Het kan wel, maar het kost je zeven jaar van je leven.
Daarom wordt het vakje expres niet helemaal gevuld. Een kleine letter 'x' met deze regelhoogte laat het er verticaal gecentreerd uitzien.
text-align: center;
Tekst horizontaal centreren.
border: black solid 1px;
Randje rondom de span.
border-radius: 15px;
Ronde hoeken. Omdat maar één waarde wordt opgegeven, krijgen alle hoeken dezelfde ronding.
Je kunt aparte waarden opgegeven voor horizontaal en verticaal, maar ook dat gebeurt niet. Hierdoor worden deze hoeken horizontaal en verticaal even groot, als delen van een cirkel.
Breedte en hoogte van de span zijn, inclusief de border, 30 px. Deze hoeken zijn half zo groot en cirkelvormig. Het eindresultaat is een cirkel met een doorsnede van 30 px, even groot als de knoppen boven de thumbnail.
Internet Explorer 8 kent border-radius niet, en geeft dus gewoon vierkante hoeken.
position: absolute;
Om het sluitkruisje op de juiste plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste voorouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier #wrapper-help.
Van zichzelf is een span een inline-element. Door de span absoluut te positioneren, verandert deze in een blok-element. Hierdoor kunnen eigenschappen als breedte en hoogte worden gebruikt.
top: -261px; left: 395px;
Het sluitkruisje moet precies rechtsboven span#help met de tekst van het hulpschermpje komen te staan. Er wordt gepositioneerd ten opzichte van #wrapper-help. Ook span#help wordt gepositioneerd van #wrapper-help.
Omdat sluitkruisje en hulptekst ten opzichte van dezelfde voorouder worden gepositioneerd, worden ze in feite ook ten opzichte van elkaar gepositioneerd en kan het sluitkruisje precies rechtsboven de hulptekst worden neergezet.
#hover-help:hover #help, #hover-help:hover + #sluit-hulp
De eerste selector, voor de komma:
Doe iets met het element met id="help" dat binnen het element met id="hover-help" zit, maar alleen als over #hover-help wordt gehoverd. #help is de span met de tekst van het hulpschermpje.
De tweede selector, na de komma:
Doe iets met het element met id="sluit-hulp" dat in de html rechtstreeks volgt op het element met id="hover-help", maar alleen als over #hover-help wordt gevolgd. #sluit-hulp is de span waar het sluitkruisje in zit.
Op deze manier worden tekst en sluitkruisje van het hulpschermpje als het ware aan elkaar gekoppeld: er moet met beide iets gebeuren als over #hover-help wordt gehoverd.
display: block;
#help is verborgen bij #help, #sluit-hulp is verborgen bij #sluit-hulp. Beide worden hier zichtbaar gemaakt, waardoor het tekst en sluitkruisje van het hulpschermpje altijd gelijktijdig openen (en sluiten).
De rest van de opmaak is al bij #help en #sluit-hulp opgegeven, hier hoeven ze alleen maar zichtbaar te worden gemaakt.
Media queries en Internet Explorer 8
In css3 zijn de @media-regels fors uitgebreid. Met behulp van @media kunnen nu dingen als de breedte en hoogte van het browservenster worden opgevraagd. Afhankelijk van het resultaat kan dan bepaalde css juist wel of juist niet worden gebruikt.
Helaas kan Internet Explorer 8 (en ouder) hier niet mee overweg, en omdat Microsoft bestaande browsers nooit update (op veiligheidsupdates na), zal dit ook niet veranderen. Wat Microsoft kennelijk niet kan, heeft een aantal programmeurs zelf dan maar geprobeerd voor elkaar te krijgen. Met behulp van JavaScript kan ook deze browser gebruik maken van media queries.
Helemaal probleemloos werkt dit bepaald niet. Omdat de code van deze browser geheim is en er bergen afwijkingen en bugs in zitten, werkt dit JavaScript ook niet altijd, of soms zelfs helemaal niet.
Er zijn twee veel gebruikte JavaScripts om media queries te kunnen gebruiken: css3-mediaqueries-js en respond.js. Als de ene niet probleemloos of helemaal niet werkt, wil de andere nog wel 'ns werken. Hieruit blijkt weer dat je de roestbakken die Microsoft abusievelijk browser noemt, uiterst goed moet testen.
In dit voorbeeld wordt css3-mediaqueries.js gebruikt.
In de <head> staat het volgende stukje code:
<!--[if IE 8]>
<script src="101-files-dl/css3-mediaqueries.js"></script>
<![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.
Dit stukje geldt voor Internet Explorer 8, maar je kunt het ook voor andere versies aangeven. Met ingang van versie 10 van Internet Explorer werken conditional comments niet meer.
Op de plaats van "101-files-dl/css3-mediaqueries.js" vul je pad naar en naam van jouw script voor Internet Explorer 8 in. Het script voor Internet Explorer 8 wordt nu alleen door deze browser geladen.
Het is belangrijk dat de spaties in <!--[if IE 8]> en <![endif]--> precies zo worden overgenomen, zoals ze hier staan.
De toevoeging type="text/javascript" bij <script> is bij html5 niet meer nodig, omdat dit de standaardinstelling is.
.css3-mediaqueries.js is het in de download bijgesloten JavaScript, dat ervoor zorgt dat Internet Explorer 8 met media queries uit de voeten kan.
Omdat dit soort scripts regelmatig wordt bijgewerkt, is het uitermate belangrijk dat je zelf dit script ophaalt van css3-mediaqueries-js en niet gewoon het script uit de download gebruikt.
Het gebruik van JavaScript betekent helaas ook dat de css in Internet Explorer 8 niet werkt, als de bezoeker JavaScript uit heeft staan. Maar normaal genomen staat JavaScript alleen uit vanwege de veiligheid. En als je ook maar enigszins met veiligheid bezig bent, dan zul je niet Internet Explorer 8 (of ouder) gebruiken. Dus het aantal mensen waarbij in deze verouderde browsers JavaScript uit zal staan, is waarschijnlijk te verwaarlozen.
Een andere mogelijkheid is het gebruik van <noscript>, zoals ik op de site heb gedaan. Dit moet dan alleen voor Internet Explorer 8 worden gebruikt, want andere browsers herkennen de nieuwe elementen en hebben geen JavaScript nodig. In Internet Explorer kan <noscript> alleen css krijgen via een inline-style. Het wordt dan zoiets:
<!--[if IE 8]>
<noscript>
<div style="border: dotted red 10px; padding: 5px; background: white;">
Helaas, deze pagina werkt niet goed met oudere versies van Internet Explorer zonder JavaScript.<br>
Drie mogelijkheden:<br>
* Schakel JavaScript in;<br>
* Installeer Internet Explorer 9;<br>
* Stop met die troep van Microsoft en installeer 'n échte browser zoals Firefox, Google Chrome of Opera.
</div>
</noscript>
<![endif]-->
Los van dat deze browser bij <noscript> alleen css binnen 'n inline-style kan verwerken, moet ook nog 'n extra <div> worden gebruikt. Als je de style met <noscript style="..."> zou aangeven, wordt een deel van de inhoud van <noscript> altijd getoond in Internet Explorer 8, ook al staat JavaScript aan.
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 iets van Microsoft wilt gebruiken, schaf dan (voor honderden euro's) een nieuwer programma aan, dat zich wel aan de standaarden houdt.
Je kunt natuurlijk ook een goed gratis programma gebruiken. Links naar dat soort programma's 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.
-
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.
Gebruik het volledige doctype, inclusief de url, anders werkt het niet goed.
-
Gebruik een 'strict' doctype of het doctype voor html5. 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 html5 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 html5. Met een transitional doctype en het gebruik van afgekeurde tags kun je niet overstappen naar html5. 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. De compatibiliteitsweergave is niet geschikt om te testen, omdat deze enigszins verschilt van de weergave in échte browsers.
- Voor alle voorbeelden geldt: breng veranderingen stapsgewijs aan. Als je bijvoorbeeld foto's wilt laten weergeven, begin dan met het alleen 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 ongemerkt 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, verander er dan maar één, hooguit twee tegelijk. Als je er zeventien 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. 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 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 een lettergrootte, regelhoogte, en dergelijke in em ook in Internet Explorer kan worden veranderd (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.
(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. Valide code garandeert ook dat de weergave in verschillende browsers (vrijwel) hetzelfde is. En valide code is over twintig jaar ook nog te bekijken.
Toegankelijkheid en zoekmachines
Het eerste deel van deze tekst is voor alle voorbeelden hetzelfde. Eventueel specifiek voor dit voorbeeld geldende dingen staan verderop onder het kopje Specifiek voor dit voorbeeld.
Toegankelijkheid (accessibility in het Engels) is belangrijk voor bijvoorbeeld blinden die een spraakbrowser gebruiken, of voor motorisch gehandicapte mensen die moeite hebben met het bedienen van een muis. Een spider van een zoekmachine (dat is het programmaatje dat de site indexeert voor de zoekmachine) is te vergelijken met een blinde. Als je je site goed toegankelijk maakt voor gehandicapten, is dat gelijk goed voor een hogere plaats in een zoekmachine. Dus als je 't niet uit sociale motieven wilt doen, kun je 't uit egoïstische motieven doen.
(Op die plaats in de zoekmachine heb je maar beperkt invloed. De toegankelijkheid van je site is maar één van de factoren, maar zeker niet onbelangrijk.)
Als je bij het maken van je site al rekening houdt met toegankelijkheid, is dat nauwelijks extra werk. 't Is ongeveer te vergelijken met inbraakbescherming: doe dat bij 'n nieuw huis en 't is nauwelijks extra werk, doe 't bij 'n bestaand huis en 't is al snel 'n enorme klus.
Enkele tips die helpen bij toegankelijkheid:
-
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.
Als een afbeelding alleen maar voor de sier wordt gebruikt, zet je daarbij
alt="", om aan te geven dat de afbeelding niet belangrijk is voor het begrijpen van de tekst of zo. - Gebruik bij een link een title, waarin je omschrijft, waar de link naartoe leidt.
-
Accesskeys (sneltoetsen) kun je beter niet gebruiken, deze geven 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 html5 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.
Op zichzelf zijn accesskeys een heel goed idee. Maar helaas zijn ze ook in html5 volstrekt onvoldoende gedefinieerd.
Er is nog steeds geen standaard voor de meest gebruikelijke accesskeys, zoals Zoek of Home.
Er is nog steeds niet vastgelegd hoe accesskeys zichtbaar gemaakt kunnen worden. Voor de makers van browsers zou dit 'n relatief kleine moeite zijn, voor de makers van 'n site is het bergen extra werk.
Voor mij redenen om accesskeys helemaal niet te gebruiken. Ik kan me wel voorstellen dat ze op sites die gericht zijn op 'n specifieke groep gebruikers nog enig nut kunnen hebben, maar voor algemene sites zou ik zeggen: niet gebruiken.
- Met behulp van de Tab-toets (of op 'n soortgelijke manier) kun je in de meeste browsers door links, invoervelden, en dergelijke lopen. Elke tab brengt je één link, invoerveld, en dergelijke verder, Shift+Tab één plaats terug. Met behulp van
tabindexkun je de volgorde aangeven waarin de Tab-toets werkt. Zondertabindexwordt de volgorde van de html 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 sterk verbeterd, dat dit niet meer wordt aangeraden. De volgorde in de html kan tegenwoordig beter hetzelfde zijn als die 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 in speciale programma's zoals spraakbrowsers. Die link staat boven menu, header, en dergelijke en linkt naar de inhoud van de pagina, zodat mensen met één toetsaanslag naar de eigenlijke inhoud van de pagina kunnen gaan.
Een skip-link is ook nuttig voor gebruikers van de Tab-toets. Zodra de normaal genomen onzichtbare link door het indrukken van de Tab-toets focus krijgt, kun je hem op het scherm plaatsen, waardoor hij zichtbaar wordt. Bij een volgende tab wordt hij dan weer buiten het scherm geplaatst en is dus niet meer zichtbaar.
-
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 kop naar kop 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. <iframe>'s hebben voor een deel dezelfde nadelen. Eén van die nadelen is dat de verschillende frames voor zoekmachines, schermlezers, en dergelijke als los zand aan elkaar hangen, omdat ze los van elkaar worden weergegeven. Ze staan wel naast elkaar op het scherm, maar er zit geen verband tussen.
Als je 'n stuk code vaker wilt gebruiken, zoals 'n menu dat op elke pagina hetzelfde is, voeg dat dan in met PHP of SSI. Dan wordt de pagina niet in de browser, maar al op de server samengesteld. Hierdoor zien zoekmachines, schermlezers, en dergelijke één pagina, net zoals wanneer je maar één pagina met html zou hebben geschreven.
- 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. Maar bij enigszins 'normale' teksten hoor je een taalwisseling aan te geven. - 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. Hetzelfde 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.
Ook kun je in Windows 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.
Ten slotte kun je je pagina nog online laten controleren op 'n behoorlijk aantal sites. Ik noem er hier enkele.
www.toptal.com/designers/colorfilter Laat zien hoe een kleurenblinde de site ziet. Engelstalig.
wave.webaim.org Deze laat grafisch zien hoe de toegankelijkheid is. Engelstalig.
Specifiek voor dit voorbeeld
-
Dit voorbeeld is niet geschikt voor spraakbrowsers en dergelijke. Afhankelijk van het gebruikte programma en de instellingen daarvan worden alleen naam en/of alt-beschrijving van de thumbnail voorgelezen. Bovendien worden tussen elke twee thumbnails de vier links naar vorige en volgende thumbnail en grote foto voorgelezen.
Als het belangrijk is dat een omschrijving van de afbeeldingen wordt voorgelezen in spraakbrowsers en dergelijke, moet hiervoor een aparte oplossing worden gemaakt, zoals bijvoorbeeld een aparte pagina met uitgebreide beschrijving van de afbeeldingen.
-
Zonder css zie je alleen de thumbnails, in één lange rij onder elkaar. Aan de onderkant staan voor elke thumbnail de vier links naar vorige en volgende thumbnail en foto. De grote foto's worden alleen getoond als css aan staat. Oftewel: feitelijk onbruikbaar zonder css.
Omdat de grote foto's zonder css niet te zien zijn, moet je belangrijke informatie niet alleen via deze foto's tonen.
Getest in
Laatst gecontroleerd op 25 mei 2013.
Onder dit kopje staat alleen maar, hoe en waarin is getest. Eventuele problemen, ook die met betrekking tot zoomen en lettergroottes, staan hieronder bij Bekende problemen. Het is belangrijk dat te lezen, want uit een test kan ook prima blijken dat iets totaal niet werkt!
Eventuele opmerkingen over de toegankelijkheid specifiek voor dit voorbeeld staan onderaan Toegankelijkheid en zoekmachines onder het kopje Specifiek voor dit voorbeeld.
Dit voorbeeld is getest op de volgende systemen:
- Windows XP:
Firefox, Opera en Google Chrome in een resolutie van 1440x900.
Internet Explorer 8 in de resoluties 800x600, 1024x768, 1280x870 en 1440x900. - Windows 7:
Firefox, Opera, Google Chrome en Internet Explorer 9 in de resoluties 800x600, 1024x768 en 1280x1024. - Windows 8:
Firefox, Opera, Google Chrome en Internet Explorer 10 (bureaublad-versie en startscherm-versie) in de resoluties 800x600, 1024x768 en 1366x768. - OS X:
Firefox, Opera, Safari en Google Chrome in de resolutie 1024x768. - Linux:
Firefox, Opera en Google Chrome in de resoluties 800x600, 1024x768 en 1280x1024. - iPad met iOS 6.1 in een resolutie van 1024x768 (MC979NF):
Safari (portret en landschap).
Opera Mini (portret en landschap).
Chrome for IOS (portret en landschap). - Android 4.0.3 in een resolutie van 1024x768 (CRESTA CTP888):
Android browser, Opera Mobile, Firefox en Chrome voor mobiel (alles portret en landschap). - Android 2.3.6 in een resolutie van 320x240 (Samsung Galaxy Y GT-S5360):
Android browser (portret en landschap).
Opera Mobile (éénkolomsstand aan/uit, portret en landschap).
Opera Mini (éénkolomsstand aan/uit, portret en landschap). Deze browser is een apart geval. De opgevraagde site wordt gedownload via de servers van Opera, waarbij het in zo'n klein venster normaal is dat (het grootste deel van) de lay-out wordt verwijderd. Daarom wordt bij deze browser voornamelijk gekeken, of er geen content (tekst en dergelijke) verloren gaat.
Er is steeds getest met de laatste versie van de browsers op de hierboven genoemde controledatum, 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 resoluties groter dan 800x600 is ook in- en uitzoomen en - voor zover de browser dat kan - een kleinere en grotere letter getest. Er is ingezoomd en vergroot tot zover de browser kan, maar niet verder dan tot 200%.
Er is getest met behulp van muis en toetsenbord, behalve op de iPad en Android, waar een touchscreen is gebruikt. Op Windows 8 is zowel met een touchscreen als met een combinatie van toetsenbord en touchpad getest.
Naast deze 'gewone' browsers is ook getest in Lynx, WebbIE, NVDA en Fangs Screen Reader Emulator. Lynx is een browser die alleen tekst laat zien en geen css gebruikt. WebbIE is een browser die gericht is op mensen met een handicap. NVDA is een screenreader, zoals die door blinden wordt gebruikt. Fangs Screen Reader Emulator is een extensie bij Firefox, die de pagina laat zien, zoals een screenreader hem ziet.
Als het voorbeeld in deze vier programma's toegankelijk is, zou het in principe toegankelijk moeten zijn in alle aangepaste browsers en dergelijke. En dus ook voor zoekmachines, want een zoekmachine is redelijk vergelijkbaar met een blinde. Eventuele opmerkingen over de toegankelijkheid specifiek voor dit voorbeeld staan onderaan Toegankelijkheid en zoekmachines onder het kopje Specifiek voor dit voorbeeld.
Alleen op de hierboven genoemde systemen en browsers is getest. Er is dus niet getest op bijvoorbeeld 'n Blackberry. De kans is (heel erg) groot dat dit voorbeeld niet (volledig) werkt op niet-geteste systemen en apparaten. Om het wel (volledig) werkend te krijgen, zul je vaak (kleine) wijzigingen en/of (kleine) aanvullingen moeten aanbrengen, bijvoorbeeld met JavaScript.
Er is ook geen enkele garantie dat iets werkt in een andere tablet of smartphone dan hierboven genoemd, omdat fabrikanten in principe de software kunnen veranderen. Dit is anders dan op de desktop, waar browsers altijd (vrijwel) hetzelfde werken, zelfs op verschillende besturingssystemen. Iets wat in Android browser werkt, zal in de regel overal werken in die browser, maar een garantie is er niet. De enige garantie is het daadwerkelijk testen op een fysiek apparaat. En aangezien er duizenden mobiele apparaten zijn, is daar eigenlijk geen beginnen aan.
De html is gevalideerd met de validator van w3c, de css ook. Als om een of andere reden niet volledig gevalideerd kon worden, wordt dat bij Bekende problemen vermeld.
Nieuwe browsers test ik pas, als ze uit het bèta-stadium zijn, omdat er anders 'n redelijke kans is dat ik 'n bug zit te omzeilen, die voor de uiteindelijke versie nog gerepareerd wordt. Dit voorbeeld is alleen getest in de hierboven met name genoemde browsers. Vragen over niet-geteste browsers kan ik niet beantwoorden, en het melden van fouten in niet-geteste browsers heeft ook geen enkel nut. (Melden van fouten, problemen, enz. in wel geteste browsers: graag!)
Bekende problemen
Waarop en hoe is getest, kun je gelijk hierboven vinden bij Getest in.
Als je hieronder geen oplossing vindt voor een probleem dat met dit voorbeeld te maken heeft, kun je op het forum proberen een oplossing te vinden voor je probleem. Om forumspam te voorkomen, moet je je helaas wel registreren, voordat je op het forum een probleem kunt aankaarten.
De meeste, zo niet alle, problemen en afwijkingen die hieronder worden genoemd, zijn te voorkomen als je voor de grote foto's JavaScript zou gebruiken. Maar omdat deze site daar niet over gaat, heb ik dat niet gedaan. Dit is hoe ver je, volgens mij, met alleen css en html kunt komen.
Verschillen tussen browsers bij klikken op Vorige foto en Volgende foto
Dit speelt alleen in de desktopbrowsers van Firefox, Google Chrome, Internet Explorer, Opera en Safari, en alleen als je met een muis (of 'n touchpad of zoiets) op Vorige foto of Volgende foto klikt.
Bij klikken op Vorige of Volgende foto, ga je 'n thumbnail achter- of vooruit, en opent de vorige of volgende grote foto. Als je vervolgens niet meer met de cursor boven Vorige foto of Volgende foto hangt, blijft in Google Chrome, Opera en Safari de grote foto geopend. In Firefox en Internet Explorer sluit de grote foto, zodra de cursor niet meer boven Vorige foto of Volgende foto hangt.
Geen echte fout of zo, alleen een verschil in afhandeling.
Firefox op Android 4.0.3
Bij klikken op de knop Vorige foto, moet naar de vorige thumbnail worden gegaan en de daarbij horende grote foto worden geopend. Firefox op Android draait dit kennelijk om: eerst wordt de grote foto geopend, en dan wordt naar de vorige thumbnail gegaan. De grote foto is hierdoor niet hetzelfde als de thumbnail.
Hetzelfde speelt bij de knop Volgende foto, maar dan, hoe verbazingwekkend, in omgekeerde richting.
Echt rampzalig is dit overigens niet, het is alleen wat vreemd. Maar je zou ook kunnen zeggen dat Firefox als enige met één aanraking niet alleen de grote foto opent, maar ook de vorige of volgende thumbnail, zodat je kunt kiezen of je die in het groot wilt zien of overslaan. Maar goed, het is natuurlijk niet de bedoeling.
Internet Explorer 10
- Bij aanraken van de knoppen Vorige en Volgende foto op een touchscreen, opent bij de eerste aanraking de grote foto. Bij de tweede aanraking van de knoppen wordt naar de vorige of volgende thumbnail gegaan.
-
Een oud probleem van Internet Explorer, dat met ingang van versie 8 was verdwenen, maar dat nu gelukkig weer terug is.
Bij klikken op Vorige of Volgende foto moet de cursor 'n heel klein beetje worden bewogen. De grote foto wordt in feite getoond door het hoveren over Vorige of Volgende foto. Internet Explorer 10 reageert pas op dat hoveren bij een beweging van de cursor. Dat hoeft geen grote beweging te zijn, de kleinste beweging is voldoende.
Bij gebruik van een touchscreen speelt dit niet.
Internet Explorer 8
-
Internet Explorer 8 kent
border-radiusniet, dus de knoppen en het onderschrift hebben geen rechte hoeken. Er bestaan polyfills omborder-radiusook in deze browser te laten werken, maar die bleken niet of niet bij alle knoppen te werken, waarschijnlijk omdat ook css3-mediaqueries.js wordt gebruikt.Ik heb pie.htc en iecss3.htc geprobeerd, maar ik heb het niet erg lang geprobeerd, want deze snelle kweekreactor voor bugs hangt me al tijdenlang 37 kilometer de strot uit. In Internet Explorer 9 en later werkt
border-radiusgewoon.Als je het zelf wilt proberen: op de pagina met links kun je onder CSS → Bugs en hacks → Dingen mogelijk maken specifiek voor Internet Explorer links vinden voor dit soort polyfills.
-
Internet Explorer 8 kent
background-sizeniet, dus in kleine browservensters kan een deel van de grote foto buiten het venster vallen en verdwijnen. Er bestaat een polyfill ombackground-sizeook in deze browser te laten werken, maar die bleek niet te werken, waarschijnlijk omdat ook css3-mediaqueries.js wordt gebruikt.Ik heb background-size-polyfill geprobeerd, maar ik heb het niet erg lang geprobeerd. In Internet Explorer 9 en later werkt
background-sizegewoon.Als je het zelf wilt proberen: op de pagina met links kun je onder CSS → Bugs en hacks → Dingen mogelijk maken specifiek voor Internet Explorer links vinden voor dit soort polyfills.
-
Internet Explorer 8 kent
rgba()niet. Hierdoor krijgen de knoppen in deze browser geen doorzichtige, maar een massief witte achtergrond. Omdat in browservensters breder dan 430 px de knoppen boven de thumbnails staan, is dat hier geen echt groot probleem.Als je de knoppen toch doorzichtig wilt hebben, moet je voor deze browser doorzichtige afbeeldingen gebruiken. Ook kun je op de pagina met links onder CSS → Bugs en hacks → Dingen mogelijk maken specifiek voor Internet Explorer manieren vinden om
rgba()mogelijk te maken met behulp van een zogenaamd filter.
Opera op Linux, Windows en OS X
-
Opera zet om een element dat focus heeft een fantastisch mooie, klassiek vormgegeven outline, zoals op de afbeelding is te zien.
Althans: ik neem aan dat Opera hem fantastisch mooi vindt, want hij is nog niet met een exorcist uit te drijven. In eerdere versies van Opera kon je hem met enige moeite nog wegkrijgen, maar inmiddels is Opera er kennelijk zo aan verknocht dat hij nu helemaal niet meer weg is te krijgen.
Vriendelijk gezegd: mijn definitie van mooi en klassiek en zo verschilt kennelijk van die van Opera.
Bij gebruik van de Tab-toets verschijnt deze outline rondom
.wrapper-thumb-foto, zoals op de afbeelding is te zien.Overigens is zo'n outline normaal genomen uiterst nuttig en noodzakelijk voor de toegankelijkheid, maar ik begrijp werkelijk niet, waarom Opera niet de mogelijkheid geeft hem uit te schakelen. In dit geval heeft hij geen enkel nut en is alleen maar lelijk.
(De outline schijnt trouwens wel enigszins of helemaal te verbergen te zijn met
outline-offset, JavaScript en andere hocus pocus voor gevorderden, maar dat is me te gek.) - Bij enigszins snel klikken op Vorige of Volgende foto, sluiten sommige grote foto's niet. Het geven van een achtergrondkleur aan
.foto, waarin de grote foto's staan, heeft geen nut, want soms blijft de foto die niet sluit bovenaan staan.z-indexheeft ook geen effect. Bij:focusspeelt dit probleem niet, en ook niet bij een touchscreen op Windows 8.
Opera Mini op de iPad en Android
Alleen de eerste thumbnail is zichtbaar. Bij aanraken van 'n knop verschuift de hele pagina 'n stukje omhoog, waardoor de thumbnail boven buiten het venster komt te staan. Helaas verschijnen er geen nieuwe thumbnails.
In Android kan de éénkolomsstand worden aangezet, waardoor alle thumbnails onder elkaar komen te staan. Opera Mini op de iPad kent geen éénkolomsstand.
In Opera Mini is dit voorbeeld feitelijk gewoon onbruikbaar.
Nou wordt Opera Mini in Nederland en België nauwelijks gebruikt, en al helemaal niet om slideshows mee te bekijken. Slideshows gebruiken per definitie veel bandbreedte, en Opera Mini wordt nou juist gebruikt om zo weinig mogelijk bandbreedte te gebruiken. Dus in hoeverre dit echt 'n probleem is, is nog maar de vraag.
Wijzigingen
Alleen grotere wijzigingen worden hier vermeld, geen dingen als een link die is geüpdatet.
:
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 html5 weggehaald. Dit kan inmiddels probleemloos worden gebruikt.
- Charset aangepast aan html5.
color: black;toegevoegd bij css voorp#titelvanwege 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.klikkeris 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:
paddingrechts bijbodyweggehaald.div#topen de daarin zittende <p> samengevoegd totdiv#content. Negatieve marge aan de bovenkant van de thumbs weggehaald. Alle eigenschappen voor de plaatsing zijn samengevoegd totmargin-top: 3px;bij dezediv#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.wraphoogte van 100 px gegeven, zodat ook bij lagere thumbs alles goed blijft staan.-
Relatieve positie aan
span.wrapgegeven. Hierdoor kunnena.vorigeena.volgende, de links waarin de pijltje staan, absoluut worden gepositioneerd ten opzichte vanspan.wrap. Hierdoor verspringen de thumbs niet meer, wat ze bij sommige browsers bij tabben en vooral bij Shift+Tab deden.Doordat de
a.vorigeena.volgendeabsoluut 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.
25 mei 2013:
De tekst is volledig herschreven. Ook de code is volledig herschreven. Omdat in feite alles is gewijzigd, staan hieronder alleen maar de wijzigingen die zichtbaar zijn.
- Alles voor Internet Explorer 7 eruit gesloopt, waaronder
:active. - Thumbnails vergroot tot (maximaal) 320 px breedte. In browservensters tot een breedte van 430 px worden alleen de thumbnails getoond, niet de grotere foto's. In bredere vensters kunnen de thumbnails tot maximaal 25% van de breedte van het venster vullen. Hierdoor worden bredere vensters beter gebruikt.
- Werkt nu ook op touchscreens.
- Bredere thumbs worden niet meer vervormd weergegeven.
- Bij klikken op de thumbnail ga je nu niet meer naar de volgende thumb, dit gebeurt alleen nog via het pijltje naar rechts.
- Grote foto's staan nu horizontaal gecentreerd binnen de voor weergave bedoelde ruimte.
- Scrollbalk rechts van thumbnails is weg. Door de thumbnails lopen kan nu alleen nog via de knoppen.
- In browservensters breder dan 430 px staan de knoppen nu boven de thumbnails, niet meer erop. Dit voorkomt problemen op touchscreens.
- Knop toegevoegd die achteruit bladeren met de grote foto's geopend mogelijk maakt.
- Pijltjes vervangen door <, <<, > en >>.
- Tekst hulpschermpje aangepast.
- Sluitknop aangebracht boven hulpschermpje (om te kunnen sluiten op iOS).
10 maart 2020:
Ook background-images worden nu meestal, net als gewone <img>'s, gelijk bij openen van de pagina gedownload. Tekst op diverse plaatsen aangepast en bovenaan Bandbreedte een langere tekst toegevoegd.