Hoe CSS werkt

De browser (een programma waarmee een webpagina bekeken wordt, bijvoorbeeld Internet Explorer of Google Chrome) interpreteert CSS en bepaalt aan de hand daarvan hoe een webpagina er uit moet zien en zich moet gedragen. Hoewel de taalregels van CSS zeer nauwkeurig zijn vastgelegd is er toch ruimte voor de vele bestaande browsers om binnen de grote hoeveelheid apparaten (allerlei merken desktops, laptops, tablets, smartphones, enz.) een wat eigen interpretatie te geven van jouw CSS code. Dat betekent dat, hoewel over het geheel genomen je werk er uit zal zien en zich zal gedragen zoals je verwacht, er toch subtiele verschillen zullen zijn tussen de vele browsers die op internet te vinden zijn.

Omdat CSS geen wet is, maar alleen maar een specificatie, staat het browsermakers vrij om eigen CSS properties te verzinnen. Hierbij is het doel van de browsermaker om het de webprogrammeur mogelijk te maken nog mooiere en slimmere dingen in webpagina's op te nemen, maar natuurlijk alleen voor gebruikers die hun specifieke browser gebruiken. Browsermakers passen deze strategie toe om gebruikers aan hun product te binden en als hefboom om W3 (de organisatie die belast is met internet specificaties waaronder HTML en CSS) te overtuigen dat hun slimme vindingen in de volgende CSS standaard opgenomen moeten worden.

In het verleden was het probleem van de verschillen tussen de browsers groter dan heden ten dage. Speciaal Microsoft had er een handje van om af te wijken van de standaard; Microsoft's Internet Explorer versie 6 (IE6) was er berucht om. De concurrentie volgde in het algemeen de specificaties veel beter, maar omdat IE6 zo veel gebruikt werd moesten webprogrammeurs zich in allerlei bochten wringen om toch ook IE6 met zijn afwijkingen aan te kunnen. Gelukkig voor de ontwikkelaars van websites heeft Microsoft intussen zijn leven verbeterd en geven latere versies van IE veel minder problemen.

Echter, je zal nog steeds te maken krijgen met verschillen in weergave, speciaal wanneer je browsers uittest op verschillende apparaten en operating systemen. Dezelfde webpagina zal er niet altijd exact hetzelfde er uitzien bekeken met Chrome of Internet Explorer. Er kunnen zelfs verschillen zijn tussen Chrome op een PC, een Apple Mac, of een Linux box. Daarom moet je eigenlijk altijd een nieuwe pagina testen op zoveel mogelijk browsers en apparaten. Je kan ook je CSS code laten valideren (later komen we daar op terug).

Samenvatting

De client (gewoonlijk een webbrowser) interpreteert CSS op het moment dat erom gevraagd wordt. Omdat de diverse browsers verschillende parser engines (ontleed programma's) gebruiken, zien de dingen er vaak verschillend uit op verschillende apparaten en operating systemen. Zelfs verschillende browserversies geven soms verschillende output. Daarom is het noodzakelijk dat je je webpagina's test op zo veel mogelijk browsers en apparaten. Je kan het aantal problemen terugbrengen door je CSS code eerst door de W3 validator te halen die de meeste overtredingen van de CSS regels signaleert.

In deze cursus zullen we alleen CSS properties en technieken behandelen die ondersteund worden door recente versies van de populairste browsers, te weten: Microsoft Internet Explorer, Google Chrome, Mozilla Firefox en Apple Safari. Hoewel deze browsers de behandelde technieken en properties begrijpen, betekent het nog niet dat de webpagina's er exact hetzelfde uit zullen zien en zich precies hetzelfde zullen gedragen onder deze verschillende browsers. Dus onthoud de gouden CSS regel: test je werk zo veel als mogelijk!