Skip links en inhoudsopgave

Laatst aangepast: .

Ondoorzichtige tekst op doorzichtige achtergrond, gebruikt rgba

Korte omschrijving

Binnen halfdoorzichtige divs staat tekst die zelf niet doorzichtig is. Hierbij wordt gebruik gemaakt van de css3-eigenschap rgba().

BELANGRIJK

Alles op deze site kan vrij worden gebruikt, met twee beperkingen:

* Je gebruikt het materiaal op deze site volledig op eigen risico. Het kan prima zijn dat er fouten in de hier verstrekte info zitten. Voor eventuele schade die door gebruik van materiaal van deze site ontstaat, in welke vorm dan ook, zijn www.css-voorbeelden.nl en medewerkers daarvan op geen enkele manier verantwoordelijk.

* Deze uitleg wordt regelmatig bijgewerkt. Het is daarom niet toegestaan deze uitleg op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat de uitleg afkomstig is van www.css-voorbeelden.nl en dat daar altijd de nieuwste versie is te vinden. Dit is om te voorkomen dat er verouderde versies worden verspreid.

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

Opmerkingen

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

Alles op deze site is gemaakt op een systeem met Linux. Daarbij is vooral gebruik gemaakt van Quanta Plus, GIMP en Firefox met extensies. De pdf-bestanden zijn gemaakt met LibreOffice.

Vragen of opmerkingen? Fout gevonden? Ga naar het forum.

Iets gevonden waar je wat aan hebt? Mooi. Als je je waardering wilt uiten, maak dan een donatie over aan War Child Nederland, een organisatie die kinderen uit oorlogsgebieden helpt hun trauma's te verwerken. Of - nog beter - wordt donateur:
War Child Nederland

Achterliggend idee

Iets doorzichtig maken met css is al vrij lang mogelijk. Tot voor kort had elke browser daar 'n eigen eigenschap voor. Althans: er werd standaard-css gebruikt, waarvoor dan 'n eigen voorvoegsel werd gezet, zoals -moz- voor Firefox (van Mozilla, de maker van Firefox).

Dit is gebruikelijk als nieuwe css in een browser wordt geïmplementeerd. Tijdens de testperiode krijgt de nieuwe eigenschap een voorvoegsel dat afhankelijk is van de browser.

Voor doorzichtigheid was dit de eigenschap opacity. Inmiddels hebben alle browsers het voorvoegsel weggehaald en kan dus gewoon opacity worden gebruikt. Behalve Internet Explorer, want zelfs in versie 8 heeft deze nog een niet-standaard implementatie. In Internet Explorer 9 heeft Microsoft opacity eindelijk ook geïmplementeerd.

opacity kan gebruikt worden voor egale kleuren, maar ook voor afbeeldingen. Als je bijvoorbeeld 'n div met 'n blauwe achtergrond halfdoorzichtig maakt, wordt de achtergrond doorschijnend. Nadeel kan zijn dat de kinderen van de div, zoals alle tekst erin, ook halfdoorzichtig worden. Dat is niet te veranderen. Je kunt het wel omzeilen door allerlei kunstgrepen toe te passen.

Op deze site staat ook een voorbeeld dat gebruik maakt van opacity.

In css3 zit een nieuwe eigenschap: rgba(). rgb staat voor red, green en blue: de kleuren waaruit de kleuren op een monitor zijn opgebouwd. Als Nederlanders boffen we: de beginletters van deze kleuren zijn bij ons toevallig hetzelfde.

rgb() (zonder a) bestaat al vrij lang. Bij deze manier van het beschrijven van een kleur wordt gebruik gemaakt van decimale getallen, in tegenstelling tot de meer gebruikte hexadecimale manier van noteren: #123abc.

Als ik voor blauw de waarde 0 invul, is er helemaal geen blauw in de kleur aanwezig. Als ik 255 invul is 100 % blauw aanwezig. Met alle mogelijkheden tussen 0 en 255 in. Dat zijn er in totaal 256, en dat is geen toeval, want 'n computer is dol op machten van 2.

rgb(255, 255, 255) geeft wit: 100% rood, 100% groen en 100% blauw maken samen (op 'n monitor) wit. En rgb(0, 0, 0) geeft zwart: geen rood, geen groen en geen blauw.

Met deze manier van noteren zijn evenveel kleuren mogelijk als met de hexadecimale methode: FF is gelijk aan 255. Ik ga hier verder niet in op wat hexadecimaal is, dat is zo op te zoeken op internet en is hier ook niet echt van belang. Op de pagina met links vind je onder Gereedschap → Kleuren een site, waar je hexadecimale waarden kunt converteren naar decimale.

Het nieuwe zit hem in de 'a', die staat voor 'alfa' of 'alfa-kanaal'. Met deze waarde geef je de doorzichtigheid van de kleur aan. Dit gebeurt met een getal tussen 0 en 1.

0 is volledig doorzichtig (onzichtbaar dus), 0.5 is halfdoorzichtig en 1 is volledig ondoorzichtig.

Omdat de doorzichtigheid gelijk met de kleuren wordt opgegeven, werkt rgba() alleen bij egale kleuren. En anders dan bij opacity erven de kinderen van een element de doorzichtigheid niet. Een zwarte tekst in een div met een halfdoorzichtige achtergrond blijft dus gewoon massief zwart.

Het voorbeeld bestaat uit een aantal divs met doorzichtige achtergrond, die over elkaar heen zijn geplaatst. Op de afbeelding hiernaast zijn de divs even van 'n outline voorzien, zodat duidelijk is welke waar staat.

De halfdoorzichtige rode achtergrond hoort bij de buitenste div, die helemaal onderaan staat.

Het zwarte blokje linksboven slaan we even over, dit heeft een speciale bedoeling.

Binnen de buitenste div staan vier divs, die elkaar gedeeltelijk overlappen. De div linksboven wordt omgeven door 'n witte outline, die rechtsboven door 'n oranje, linksonder door 'n gele en rechtsonder door 'n zwarte. Deze overlappen elkaar dus gedeeltelijk.

Omdat de achtergrond van alle vier deze divs halfdoorzichtig is, geeft dit in totaal veel meer dan vier kleuren. Waar twee (of meer) divs over elkaar staan, krijg je 'n mengkleur.

Omdat rgba() niet wordt geërfd door de kinderen, zijn deze divs niet extra doorzichtig. De rgba() van de buitenste rode div heeft geen invloed op de daarin liggende divs en dergelijke: rgba() werkt voor elk element apart.

In het midden staat nog 'n div, deze heeft 'n blauwe outline. Ook deze div heeft 'n halfdoorzichtige achtergrond. Binnen deze div staat zwarte tekst. Bij gebruik van opacity zouden de doorzichtigheid van de buitenste div en van deze div beide worden geërfd door de tekst, waardoor deze vrijwel onzichtbaar zou zijn. Bij rgba() blijft de tekst gewoon volledig zichtbaar (niet op de illustratie, want daar is de tekst even weggehaald...)

Waar divs over elkaar heen liggen, wordt de onderliggende tekst minder zichtbaar, omdat twee of meer halfdoorzichtige achtergronden over elkaar heen nou eenmaal minder doorzichtig zijn dan één.

De blauwe tekst en de horizontale zwarte tekst zijn meer of minder zichtbaar, afhankelijk van hoeveel divs met halfdoorzichtige achtergrond eroverheen staan.

Internet Explorer 6, 7 en 8 kunnen niet overweg met rgba(), maar Microsoft heeft 'n eigen code ontwikkeld die in deze browsers hetzelfde resultaat geeft. Alleen is die code tamelijk onleesbaar. Bij rgba() geef ik voor de buitenste div background-color: rgba(255, 0, 0, 0.5) op, volgens de standaard.

Voor Internet Explorer 6, 7 en 8 moet ik voor hetzelfde effect opgeven:

filter: progid:DXImageTransform.Microsoft.gradient (startColorstr=#7FFF0000, endColorstr=#7FFF0000)

In Internet Explorer 6 en 7 werkt dit dan ook nog 'ns alleen als ze hasLayout hebben. Bij de css Speciaal voor Internet Explorer 6, 7 en 8 ga ik hier dieper op in, zie Bij Internet Explorer 6 en 7...

Internet Explorer 9 kan eindelijk ook overweg met rgba().

Oudere browsers kennen inmiddels meestal wel css, maar geen rgba(). Daardoor kan, als je niet heel erg oplet, tekst volledig onzichtbaar worden.

Zoals een oudere browser het toont
Zoals een oudere browser het toont.

De achtergrond van het zwarte blokje is ook met rgba() opgegeven. Daardoor heeft de achtergrond 'n kleur die de tekst leesbaar maakt, zoals links is te zien.

Maar als een oudere browser wel css kent, maar nog geen rgba, krijgt de achtergrond geen kleur en is het resultaat zoals rechts is te zien. De tekst krijgt de met css opgegeven kleur, maar de css voor de achtergrondkleur wordt genegeerd. Deze krijgt dus geen kleur. En omdat alle tussenliggende achtergrondkleuren ook met rgba() zijn opgegeven, worden deze ook genegeerd. Het resultaat is een tekstkleur die (vrijwel) hetzelfde is als de achtergrond van de pagina: volstrekt onleesbaar.

Browsers die rgba() niet herkennen zijn nog volop in gebruik, dus dit is echt iets om rekening mee te houden. Bij div#l-b-demo zie je hoe je onleesbaarheid in oudere browsers kunt voorkomen.

Beschrijving van code en css

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

Deze uitleg hoort bij het voorbeeld dat in de download zit. Het voorbeeld uit de download verschilt iets van het voorbeeld hier op de site. In de download ontbreken bijvoorbeeld de witte vlakken met de links. Ook in de kopregels zit vaak wat verschil. Daarnaast kunnen er nog andere (meestal kleine) verschillen zijn.

Als je deze uitleg leest naast de broncode van het voorbeeld op de site, kan het dus bijvoorbeeld zijn dat 'n h1 uit de css bij 'n <h2> uit de html hoort. Maar het gaat niet om hele grote, fundamentele afwijkingen.

Als je dit lastig vindt, downloadt dan de hele handel (ga terug naar het voorbeeld en kies daar voor downloaden). In de download zit 'n voorbeeld dat wel naadloos aansluit op de uitleg in de download.

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

Een document moet met een doctype beginnen om weergaveverschillen tussen browsers te voorkomen. Zonder doctype is de kans op verschillende (en soms volkomen verkeerde) weergave tussen verschillende browsers heel erg groot.

Geldige doctypes vind je op www.w3.org/QA/2002/04/valid-dtd-list.

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

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

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

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

utf-8 is de beste charset (tekenset), omdat deze alle talen van de wereld (en nog heel veel andere extra tekens) bestrijkt, maar toch niet meer ruimte inneemt voor de code dan nodig is. Als je utf-8 gebruikt, hoef je veel minder entiteiten (&auml; en dergelijke) te gebruiken, maar kun je bijvoorbeeld gewoon ä gebruiken.

Deze regel moet zo hoog mogelijk komen te staan, als eerste regel binnen de head, omdat hij anders door sommige browsers niet wordt gelezen.

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

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

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

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

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

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

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

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

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

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

<style type="text/css">

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

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

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


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

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

Het element waarbinnen de hele pagina staat. Veel instellingen die hier worden opgegeven, gelden voor de hele pagina. Dit geldt bijvoorbeeld voor de lettersoort, de lettergrootte en de voorgrondkleur.

margin: 0; padding: 0;

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

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

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

font-size: 110%;

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

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

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

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

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

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

color: black;

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

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

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

background: #ff9 url(078-pics/bg.jpg);

Achtergrond-afbeelding. Deze gebruik ik eigenlijk alleen om de doorzichtigheid van de achtergrondkleuren te laten zien. In 't echt zou ik nooit zo'n kakelbonte pagina maken, omdat dat 'n prima manier is om je bezoekers weg te jagen.

p#tekst-buiten

De paragraaf met id="tekst-buiten". Dit is de paragraaf waarbinnen de zwarte tekst 'Deze tekst staat buiten alle divs, gewoon in de body' staat. Ik heb hem toegevoegd om het effect van één of meer doorzichtige achtergronden te laten zien.

Buiten de doorzichtige rode div is de tekst gewoon zichtbaar. Binnen de doorzichtige rode div wordt hij iets minder zichtbaar. Links- en rechtsonder wordt hij dan nog iets minder zichtbaar als er twee binnenste divs bijkomen, want hier staan twee halfdoorzichtige achtergronden over elkaar heen.

Midden onder is de tekst heel vaag geworden, omdat hier drie halfdoorzichtige achtergronden over elkaar heen staan. Op deze plek overlappen de twee binnenste divs elkaar, en de buitenste rode div is er ook nog.

(Als redelijke leek op het gebied van kleuren dacht ik trouwens dat twee keer halfdoorzichtig gewoon zou leiden tot ondoorzichtig: 50% + 50% = 100%. Maar dat blijkt dus niet zo te staan. Hier staan zelfs drie halfdoorzichtige lagen over elkaar heen, dus 150%, en de tekst is nog steeds enigszins zichtbaar.)

position: absolute;

Om op 'n bepaalde plaats neer te kunnen zetten. Op deze manier kan ik de tekst op 'n nog lege plaats parkeren. Dat is hier wel nodig, want de tekst in dit voorbeeld is nogal chaotisch neergepoot.

Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf 'n positie heeft. Als die er niet is, zoals hier, wordt gepositioneerd ten opzichte van het venster van de browser.

width: 100%;

Een <p> is een blok-element en krijgt daarom automatisch dezelfde breedte als zijn ouder. Dat is hier het venster van de browser.

Maar als een <p> absoluut is gepositioneerd, zoals hier, krijgt de <p> niet de volledige breedte van zijn ouder. Hij wordt dan slechts even breed als nodig is om de inhoud weer te geven.

Om later de tekst met text-align horizontaal in het midden van het venster van de browser te kunnen zetten, moet ik daarom de <p> zelf de volle breedte van dat venster geven: 100%.

left: 50%;

Zet de linkerkant van de paragraaf, en dus van de daarin staande tekst, halverwege het venster van de browser. Waarom ik dit doe staat hieronder bij margin.

margin: 350px 0 0 -50%;

Boven 'n marge van 350 px, zodat de tekst op 'n nog lege plaats tussen de andere teksten komt te staan.

Rechts en onder geen marge.

Links 50 % naar links terugzetten, want het is 'n negatieve marge. Als ik bij 'n marge procenten gebruik, wordt de breedte van de ouder als basis genomen. Dat is hier de breedte van het venster van de browser.

Hierboven heb ik met left: 50%; de <p> halverwege het venster van de browser gezet. En hier zet ik hem dus weer precies evenveel terug. 'n Tamelijk zinloze actie. Ik moet dit doen voor Internet Explorer 6 en 7, omdat die anders om wat voor idiote reden dan ook de <p> halverwege het browservenster neerzetten. Een van de vele bugs of afwijkingen van de standaard in deze browsers.

Omdat dit, gecombineerd met de left: 50%; hierboven, 'n zinloze actie is en er eigenlijk niets gebeurd, hebben andere browsers er geen last van. Daarom zet ik het gewoon hier in de algemene css en niet in css speciale voor Internet Explorer 6 en 7.

text-align: center;

De tekst in de <p> horizontaal centreren.

font-size: 1.9em;

Lekker grote letter. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen wijzigen, hoewel dat hier eigenlijk vrij weinig nut heeft.

div#buiten

De div met id="buiten". Dit is de buitenste grote div met rode achtergrond waarbinnen de andere divs met doorzichtige achtergrond staan.

position: relative;

Om de kinderen van deze div te kunnen positioneren ten opzichte van deze div. Daarvoor moet de div zelf 'n positie hebben, ook al vul ik daar verder niets in.

width: 700px;

Om de div, en dus de inhoud daarvan, horizontaal te kunnen centreren zoals ik hieronder bij margin doe, moet deze 'n breedte hebben.

height: 500px;

Een div krijgt normaal genomen automatisch de hoogte die nodig is om de inhoud weer te kunnen geven. Maar inhoud die absoluut is gepositioneerd telt niet mee voor de hoogte.

Omdat binnen deze div veel dingen absoluut zijn gepositioneerd, is het in dit geval beter om de hoogte zelf te regelen.

margin: 0 auto;

Omdat voor onder en links geen waarde is ingevuld, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 auto 0 auto in de volgorde boven - rechts - onder - links.

Boven en onder geen marge. Links en rechts auto, wat hier betekent: evenveel. Oftewel: de div en dus de inhoud daarvan staat horizontaal gecentreerd.

Deze manier van horizontaal centreren van een blok-element werkt alleen maar als het te centreren blok-element een breedte heeft.

background-color: rgba(255, 0, 0, 0.5);

Achtergrondkleur.

Meestal wordt voor 'n kleur de hexadecimale notatie gebruikt. 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 dit voorbeeld heb ik bij deze achtergrond 100% rood en geen groen en blauw.

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

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

Het getal voor het alfa-kanaal wordt in breuken 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 halfdoorzichtig: 0.5.

p#tekst-midden

De paragraaf met id="tekst-midden". In deze paragraaf staat de blauwe tekst 'Deze tekst staat in de buitenste div'.

width: 400px;

Om de paragraaf, en dus de inhoud daarvan, horizontaal te kunnen centreren, zoals ik hieronder bij margin doe, moet deze 'n breedte hebben.

margin: 0 auto;

Omdat voor onder en links geen waarde is ingevuld, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 auto 0 auto in de volgorde boven - rechts - onder - links.

Boven en onder geen marge. Links en rechts auto, wat hier betekent: evenveel. Oftewel: de paragraaf en dus de inhoud daarvan staat horizontaal gecentreerd.

Deze manier van horizontaal centreren van een blok-element werkt alleen maar als het te centreren blok-element een breedte heeft.

line-height: 166px;

Ik wil de tekst enigszins verdeeld hebben, en de simpelste manier is om gewoon regelhoogte te gebruiken.

font-size: 4em;

Lekker grote letter. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen wijzigen, hoewel dat hier eigenlijk vrij weinig nut heeft.

text-align: center;

Tekst horizontaal centreren.

color: blue;

Tekst in blauw weergeven.

div#l-b

De div met id="l-b". Dit is de groene div linksboven.

position: absolute;

Om op de juiste plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf 'n positie heeft, dat is hier div#buiten.

top: 50px;

50 px vanaf de bovenkant neerzetten.

left: 50px;

En 50 px vanaf de linkerkant.

width: 350px; height: 250px;

350 px breed, 250 px hoog.

background-color: rgba(0, 255, 0, 0.5);}

Uitleg zie bij background-color: rgba(255, 0, 0, 0.5). Alleen zijn hier rood en blauw afwezig en is groen 100% aanwezig.

div#l-b-demo

De div met id="l-b-demo". Dit is de kleine zwarte div linksboven waarbinnen de tekst 'Let op de kleuren!' staat.

Bij oudere browsers die wel css kennen maar geen rgba(), is er een serieuze kans dat de tekst volkomen onleesbaar wordt. Dit is te voorkomen met 'n simpele voorzorgsmaatregel. Deze div is alleen aangebracht om te laten zien hoe je dat doet.

width: 70px; height: 70px;

70 px breed en hoog.

background: #333;

Donkergrijze achtergrond. Elke browser die css kent, kan dit lezen en uitvoeren. Dus ook als een browser rgba() niet herkent, is er in ieder geval een achtergrondkleur. Weliswaar niet doorschijnend, maar het is belangrijker dat de tekst leesbaar is.

background-color: rgba(0, 0, 0, 0.7);

Omdat deze background als tweede staat, zal deze altijd 'winnen' van de vorige regel. Een browser die rgba() kent, zal nu dus deze achtergrondkleur toepassen. Daarom moet deze regel ook als tweede staan, anders zal de hierboven staande background altijd 'winnen' en de achtergrondkleur dus nooit doorzichtig zijn.

Een browser die geen rgba() kent, zal deze regel gewoon helemaal negeren. Maar omdat hierboven al 'n achtergrondkleur is opgegeven, wordt dan gewoon die kleur genomen. Zodat je altijd kunt zorgen voor voldoende contrast tussen tekst en achtergrondkleur.

De uitleg van de kleuren staat bij background-color: rgba(255, 0, 0, 0.5), alleen zijn hier alle drie de kleuren afwezig. Dat levert zwart op. De doorzichtigheid is 0.7, dus dit is minder dan halfdoorzichtig.

color: #d8ccbd;

Kleur van de tekst. Deze is in dit voorbeeld expres vrijwel hetzelfde gemaakt als de achtergrond van de pagina. Oudere browsers die geen rgba() kennen, laten alle achtergrondkleuren van de divs tussen deze tekst en de achtergrond van de pagina weg.

Het resultaat is hiernaast te zien. Als je heel goed kijkt, zie je 'Let op de kleuren!' staan. Maar ik zou niet durven beweren dat dit nou echt lekker leesbaar is.

Door de bij background: #333; opgegeven kleur, die ook oudere browsers herkennen, voorkom je dit.

div#r-b

De div met id="r-b". Dit is de paarsige div rechtsboven.

position: absolute;

Om op de juiste plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf 'n positie heeft, dat is hier div#buiten.

top: 50px;

50 px vanaf de bovenkant neerzetten.

right: 50px;

En 50 px vanaf de rechterkant.

width: 350px; height: 250px;

350 px breed, 250 px hoog.

background-color: rgba(0, 255, 0, 0.5);}

Uitleg zie bij background-color: rgba(255, 0, 0, 0.5). Alleen zijn hier rood en groen afwezig en is blauw 100% aanwezig.

div#l-o

De div met id="l-o". Dit is de oranje div linksonder.

position: absolute;

Om op de juiste plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf 'n positie heeft, dat is hier div#buiten.

bottom: 50px;

50 px vanaf de onderkant neerzetten.

left: 50px;

En 50 px vanaf de linkerkant.

width: 350px; height: 250px;

350 px breed, 250 px hoog.

background-color: rgba(255, 255, 0, 0.5);

Uitleg zie bij background-color: rgba(255, 0, 0, 0.5). Alleen is hier blauw afwezig en zijn rood en groen 100% aanwezig.

div#r-o

De div met id="r-o". Dit is de blauwe div rechtsonder.

position: absolute;

Om op de juiste plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf 'n positie heeft, dat is hier div#buiten.

bottom: 50px;

50 px vanaf de onderkant neerzetten.

right: 50px;

En 50 px vanaf de rechterkant.

width: 350px; height: 250px;

350 px breed, 250 px hoog.

background-color: rgba(0, 255, 255, 0.5);

Uitleg zie bij background-color: rgba(255, 0, 0, 0.5). Alleen is hier rood afwezig en zijn groen en blauw 100% aanwezig.

div#binnen

De div met id="binnen". Dit is de paarse div in het midden.

Binnen deze div is de invloed, die de diverse divs met doorzichtige achtergrond op de blauwe tekst hebben, goed te zien. In het centrum staan vijf van deze divs over elkaar heen en is de blauwe tekst nog maar nauwelijks te zien.

position: absolute;

Om op de juiste plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf 'n positie heeft, dat is hier div#buiten.

top: 150px; left: 200px;

150 px vanaf de bovenkant neerzetten en 200 px vanaf de linkerkant. Nu staat deze div horizontaal en verticaal in het midden van de grote buitenste div.

width: 300px;

300 px breed

height: 200px;

200 px hoog. Een div is een blok-element en krijgt automatisch de hoogte die nodig is om de inhoud weer te geven. Die inhoud is hier de tekst binnen p#tekst-binnen.

Maar de onderste regel van die tekst ga ik omhoog zetten met behulp van 'n relatieve positie. Met zo'n relatieve positie wordt de regel wel omhoog gezet, maar de oorspronkelijke ruimte waar hij stond blijft wel bezet. En telt dus mee voor de hoogte van div#binnen, terwijl dat niet nodig is.

Daardoor zou in dit geval de achtergrond van div#binnen te ver naar onderen doorlopen. Daarom geef ik hier gewoon zelf 'n hoogte op.

background-color: rgba(255, 0, 255, 0.5);

Uitleg zie bij background-color: rgba(255, 0, 0, 0.5). Alleen is hier groen afwezig en zijn rood en blauw 100% aanwezig.

p#tekst-binnen

De paragraaf met id="tekst-binnen". Dit is de paragraaf waarbinnen de tekst 'Deze tekst staat in de binnenste div (maar is niet doorzichtig)' staat.

width: 300px;

Ik maak hem even breed als z'n ouder, div#binnen. Als ik dan de tekst met text-align horizontaal centreer staat hij gelijk ook in het midden van div#binnen.

margin: 0;

Een <p> heeft van zichzelf 'n marge aan boven- en onderkant. Die wil ik hier niet.

font-size: 2em;

Lekker grote letter. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen wijzigen, hoewel dat hier eigenlijk vrij weinig nut heeft.

text-align: center;

Tekst horizontaal in het midden zetten.

line-height: 100px;

Er staan in totaal drie regels tekst in deze paragraaf. Dat maakt dus 'n regelhoogte van 300 px. En omdat 'n <p> een blok-element is, is dit gelijk de hoogte van de <p>, want die wordt automatisch precies hoog genoeg om de inhoud weer te kunnen geven.

Maar de ouder van deze <p>, div#binnen, is maar 200 px hoog. Dus dat gaat mis, de onderste regel komt buiten div#binnen en dus buiten de achtergrondkleur daarvan te staan.

De derde regel van de tekst staat echter in 'n span, en die wordt omhoog gezet. Daardoor staat alle tekst toch binnen de achtergrond van div#binnen.

p#tekst-binnen span

De spans binnen de paragraaf met id="tekst-binnen". Dat is hier maar één span, waarbinnen de tekst '(maar is niet doorzichtig)' staat.

position: relative;

Om de tekst te kunnen verplaatsen.

bottom: 78px;

78 px naar boven verplaatsen. Nu staat hij nog net boven de achtergrond van div#binnen.

font-size: 0.4em;

Kleine letter. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen wijzigen, hoewel dat hier eigenlijk vrij weinig nut heeft.

Speciaal voor Internet Explorer 6, 7 en 8

<!--[if (IE 6) | (IE 7) | (IE 8)]> <style type="text/css"> div#buiten {filter: progid: DXImageTransform.Microsoft.gradient (startColorstr=#7FFF0000, endColorstr=#7FFF0000);} div#l-b {filter: progid: DXImageTransform.Microsoft.gradient (startColorstr=#7F00FF00, endColorstr=#7F00FF00);} div#r-b {filter: progid: DXImageTransform.Microsoft.gradient (startColorstr=#7F0000FF, endColorstr=#7F0000FF);} div#l-o {filter: progid: DXImageTransform.Microsoft.gradient (startColorstr=#7FFFFF00, endColorstr=#7FFFFF00);} div#r-o {filter: progid: DXImageTransform.Microsoft.gradient (startColorstr=#7F00FFFF, endColorstr=#7F00FFFF);} div#binnen {filter: progid: DXImageTransform.Microsoft.gradient (startColorstr=#7FFF00FF, endColorstr=#7FFF00FF);} </style> <![endif]-->

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

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

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

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

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

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

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

Ik noem specifiek de versies van Internet Explorer en niet gewoon alleen if IE. Het is namelijk 'n belangrijke hobby van Microsoft om bij 'n nieuwe versie van Internet Explorer 'n aantal dingen fors te veranderen, zodat je behoorlijk in de problemen komt als je geen versie hebt genoemd. Dat heeft geen enkele andere browsermaker ooit voor elkaar gekregen. Complimenten!

In plaats van één stylesheet voor Internet Explorer 6, 7 en 8 kun je er ook drie maken. Het begin wordt dan voor bijvoorbeeld Internet Explorer 6: <!--[if IE 6]>, het laatste deel blijft hetzelfde. Haakjes zijn niet nodig, want de browser kan nu niet 'in de war' raken over wat bij wat hoort.

Aparte stylesheets zijn sowieso verstandig, omdat de css voor de verschillende versies van Internet Explorer nogal kan verschillen. En dat kan mekaar behoorlijk dwarszitten.

div#buiten

De div met id="buiten". Dit is de buitenste grote div met rode achtergrond waarbinnen de rest staat.

filter: progid: DXImageTransform.Microsoft.gradient (startColorstr=#7FFF0000, endColorstr=#7FFF0000);

Dit heeft voor Internet Explorer 6, 7 en 8 hetzelfde effect als in alle andere browsers de onderstaande css:

background-color: rgba(255, 0, 0, 0.5);

De lezer mag kiezen wat makkelijker en duidelijker is.

Op de pagina met links vind je onder css een handige online mogelijkheid om volautomatisch rgba() om te zetten in een filter voor Internet Explorer.

'n Gradient is een verlopende kleur: van licht naar donker, bijvoorbeeld. Dit filter kan dus worden gebruikt voor 'n gradient. Als ik nu de begin- en eindkleur hetzelfde neem, krijg ik 'n egale kleur. Daarnaast kan ik de doorzichtigheid instellen.

De eerste twee hexadecimale cijfers 7F geven de doorzichtigheid aan. 7F is decimaal 127, de helft van de hoogst mogelijke waarde 255 (0 doet ook mee).

Dit is hetzelfde als de 0.5 bij rgba(), want die waarde loopt van 0 naar 1. Oftewel: halfdoorzichtig. Bij dit filter staat de waarde voor doorzichtigheid vooraan, bij rgba() achteraan.

De hexadecimale cijfers op de derde en vierde plaats FF zijn de hoogst mogelijke waarde en gelijk aan de 255 op de eerste plaats bij rgba(). 100% rood dus.

De laatste vier nullen zijn gelijk aan de twee nullen op de tweede en derde plaats bij rgba(): geen groen en geen blauw.

Bij Internet Explorer 6 en 7 bestaat een eigenschap met de naam hasLayout. Deze is niet rechtstreeks aan- of uit te zetten, alleen via 'n omweg. In Internet Explorer 6 werkt hij anders dan in Internet 7 en in Internet Explorer 8 bestaat hij (gelukkig) helemaal niet meer.

Als 'n element hasLayout heeft wordt het volledig anders weergegeven dan wanneer het geen hasLayout heeft. Filters werken in Internet Explorer 6 en 7 alleen als 'n element hasLayout heeft.

Waarom dit ooit is bedacht, is werkelijk iedereen 'n volslagen raadsel. Maar goed, 't bestaat, dus we moeten er iets mee.

Onder andere bij gebruik van hoogte en/of breedte krijgt een element hasLayout. Dat is in dit voorbeeld overal waar 'n filter wordt gebruikt het geval, dus hebben alle divs waar 'n filter wordt gebruikt hasLayout.

Als dat niet zo is, kun je aan de css voor het element waar je 'n filter gebruikt zoom: 1; gebruiken. Alleen Internet Explorer herkent dit, dus het stoort andere browsers niet. Je css is dan niet meer valid, maar je kunt het ook in 'n aparte stylesheet voor Internet Explorer zetten.

Normaal genomen gebruik ik height: 1%;, dat heeft dezelfde uitwerking. Maar deze filters worden ook gebruikt voor Internet Explorer 8, en die zou last van 'n hoogte van 1% kunnen hebben. zoom: 1; betekent gewoon dat er niet gezoomd moet worden, oftewel: doe niets.

div#l-b {filter: progid: DXImageTransform.Microsoft.gradient (startColorstr=#7F00FF00, endColorstr=#7F00FF00);} div#l-b-demo {filter: progid: DXImageTransform.Microsoft.gradient (startColorstr=#B2000000, endColorstr=#B2000000);} div#r-b {filter: progid: DXImageTransform.Microsoft.gradient (startColorstr=#7F0000FF, endColorstr=#7F0000FF);} div#l-o {filter: progid: DXImageTransform.Microsoft.gradient (startColorstr=#7FFFFF00, endColorstr=#7FFFFF00);} div#r-o {filter: progid: DXImageTransform.Microsoft.gradient (startColorstr=#7F00FFFF, endColorstr=#7F00FFFF);} div#binnen {filter: progid: DXImageTransform.Microsoft.gradient (startColorstr=#7FFF00FF, endColorstr=#7FFF00FF);}

De andere filters die voor Internet Explorer 6, 7 en 8 nodig zijn. Ze werken precies hetzelfde als hierboven bij div#buiten beschreven, alleen met andere waarden voor de kleuren.

Speciaal voor Internet Explorer 6

<!--[if IE 6]> <style type="text/css"> p#tekst-binnen span {bottom: 20px; line-height: 1.2em;} </style> <![endif]-->

Deze code geldt alleen voor Internet Explorer 6. Uitleg zie bij Speciaal voor Internet Explorer 6, 7 en 8.

p#tekst-binnen span

De spans binnen de paragraaf met id="tekst-binnen". Dat is hier maar één span, die waar de tekst '(maar is niet doorzichtig)' in staat.

bottom: 20px;

20 px vanaf de onderkant neerzetten. In de algemene css wordt vanaf de bovenkant neergezet, maar bij Internet Explorer 6 komt hij dan te laag te staan.

line-height: 1.2em;

Zonder deze correctie komt de span te laag te staan.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

Het eerste deel van deze tekst is voor alle voorbeelden hetzelfde. Eventueel specifiek voor dit voorbeeld geldende dingen staan verderop onder het kopje Specifiek voor dit voorbeeld.

Het eerste deel van deze tekst is voor alle voorbeelden hetzelfde. Eventueel specifiek voor dit voorbeeld geldende dingen staan verderop onder het kopje Specifiek voor dit voorbeeld.

Toegankelijkheid (accessibility in het Engels) is belangrijk voor bijvoorbeeld blinden die een spraakbrowser gebruiken, of voor motorisch gehandicapte mensen die moeite hebben met het bedienen van een muis. Een spider van een zoekmachine (dat is het programmaatje wat de site indexeert voor de zoekmachine) is te vergelijken met een blinde. Als je je site goed toegankelijk maakt voor gehandicapten, is dat dus gelijk goed voor een hogere plaats in een zoekmachine. Dus als je 't niet uit sociale motieven wilt doen, kun je 't uit egoïstische motieven doen.

(Op die plaats in de zoekmachine heb je maar beperkt invloed. De toegankelijkheid van je site is maar één van de factoren, maar zeker niet onbelangrijk.)

Als je bij het maken van je site al rekening houdt met toegankelijkheid, is dat nauwelijks extra werk. 't Is ongeveer te vergelijken met inbraakbescherming: doe dat bij 'n nieuw huis en 't is nauwelijks extra werk, doe 't bij 'n bestaand huis en 't is al snel 'n enorme klus.

Enkele tips die helpen bij toegankelijkheid:

Specifiek voor dit voorbeeld

Zonder css zie je gewoon drie regels tekst, meer niet. Er zijn dus geen extra problemen voor spraakbrowsers en dergelijke bij deze constructie. Dat wil zeggen: in dit voorbeeld zijn de teksten op een volslagen dolzinnige manier door elkaar heen geplaatst, dus ook zonder spraakbrowser heb je al problemen om ze te lezen. Maar bij normaal gebruik wordt de toegankelijkheid niet benadeeld door het gebruik van rgba().

Getest in

Laatst gecontroleerd op 6 maart 2012.

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

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

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

Er is getest met behulp van muis en toetsenbord.

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

Als het voorbeeld in deze vier programma's toegankelijk is, zou het in principe toegankelijk moeten zijn in alle aangepaste browsers en dergelijke. En dus ook voor zoekmachines, want een zoekmachine is redelijk vergelijkbaar met een blinde. Eventuele opmerkingen over de toegankelijkheid van dit voorbeeld staan onderaan Toegankelijkheid en zoekmachines onder het kopje Specifiek voor dit voorbeeld.

Alleen op de hierboven genoemde systemen en browsers is getest. Er is dus niet getest op bijvoorbeeld mobiele systemen als iOS of Android, en ook niet op apparaten als smartphones, iPad, enz. De kans is heel erg groot dat dit voorbeeld niet (volledig) werkt op dat soort systemen en apparaten. Om het wel (volledig) werkend te krijgen, zul je vaak wijzigingen en/of aanvullingen moeten aanbrengen.

De html is gevalideerd met de validator van w3c, de css ook. Als om een of andere reden niet volledig gevalideerd kon worden, wordt dat bij Bekende problemen vermeld.

Nieuwe browsers test ik pas als ze uit het bèta-stadium zijn, omdat er anders 'n redelijke kans is dat ik 'n bug zit te omzeilen, die voor de uiteindelijke versie nog gerepareerd wordt. Dit voorbeeld is alleen getest in de hierboven met name genoemde browsers. Vragen over niet-geteste browsers kan ik niet beantwoorden, en het melden van fouten in niet-geteste browsers heeft ook geen enkel nut. (Melden van fouten, problemen, enz. in wel geteste browsers: graag!)

Wijzigingen

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

:

Nieuw opgenomen.

27 april 2010:

background: rgba(...); veranderd in background-color: rgba(...);

Ik vermoed dat de validator gewijzigd is, want het gebruik van alleen background levert nu 'n fout op. Gezien de uitgebreidheid waarmee ik test kan ik me nauwelijks voorstellen dat in totaal 14 fouten gemist zou hebben. 't Kan natuurlijk wel, maar ik denk eerder dat het 'n wijziging in de specificatie en/of de validator is. Die is nog niet officieel, dus er kunnen nog dingen in veranderen.

5 april 2011:

Tekst aangepast voor Internet Explorer 9. De code is niet gewijzigd.

Bekende problemen

Andere lettergroottes en zoomen

Dit fantastisch vormgegeven, artistiek afgewogen, kortom: schitterende stilleven met z'n fraaie kleuren wordt volledig verpest bij andere lettergroottes. Aangezien het hier alleen om de doorzichtigheid gaat, zal me dat verder worst wezen. Behalve dat deze verminking mij wel vreselijk veel geestelijk leed berokkent.

Zoomen gaat wel goed, behalve in Internet Explorer 7: bij in- of uitzoomen wordt de doorzichtige rode achtergrond van de buitenste div plotsklaps ondoorzichtig. De kleur van de tekst die binnen 'n div met 'n doorzichtige achtergrond staat wordt wit, ongeacht de oorspronkelijke kleur.

Ik neem aan dat dit te maken heeft met de ongelooflijk slecht werkende zoomfunctie van Internet Explorer 7. In Internet Explorer 8 speelt dit probleem niet. Ik heb niet naar 'n oplossing gezocht omdat de zoomfunctie van Internet Explorer 7 zo slecht werkt, dat hij feitelijk toch volkomen onbruikbaar is.

Oudere browsers

Bij oudere browsers die wel css, maar geen rgba() kennen, kunnen serieuze problemen optreden die tekst op een doorzichtige ondergrond volledig onzichtbaar maken. Zie bij div#l-b-demo voor een oplossing.

Internet Explorer 6 en 7

Als de filters niet werken (de kleur is niet doorzichtig), kan het zijn dat deze browsers geen hasLayout hebben. Dit is een duivelse uitvinding van Microsoft, die je niet aan of uit kunt zetten, behalve via 'n omweg. Het werkt in Internet Explorer 7 ook nog 'ns heel anders dan in Internet Explorer 6. In Internet Explorer 8 bestaat het kreng gelukkig niet meer. Voor 'n oplossing zie Bij Internet Explorer 6 en 7...