Niet iedereen heeft nog door dat het echt gemakkelijk is om je aan webstandaarden te houden, mij scheelt het voornamelijk heel veel werk. Maar daar tegenover staan wel dat ik me aan een aantal regels moet houden, hoe ik mijn website opmaak. Als je al bezig bent met een website, of je net begint is het belangrijk om de regels van ‘webstandaarden’ te kennen.
Mocht je aan het schrijven zijn en je kent nog niet de webstandaarden, dan moet je ze toch eens doornemen. Voor diegene die er nog nooit mee heeft gewerkt heb ik de vier belangrijkste op een rij gezet:
- Je website werkt in elke browser
- Je pagina maakt gebruik van een makkelijke lay-out structuur met div’s ipv. tabellen
- Je volgt grotendeels bij (x)HTML en CSS de regels van het W3C (= valid)
- Je website is gestructureerd met behulp van de semantiek
Je hebt met het gebruik van de webstandaarden vele voordelen maar echter één nadeel. Dat nadeel is het goed leren van scripten, door je websites ‘valid’ te laten zijn. Het kijken hoever je daarin staat, of wat je fouten zijn kun je bijvoorbeeld doen met xHTML – CSS, voor HTML & CSS en/of W3C HTML & W3C CSS.
De belangrijkste voordelen die je hebt bij het gebruik van de webstandaarden zijn:
- Browsers die in de toekomst uit komen zijn “compatible”; als je momenteel een code schrijft en deze is niet HTML/CSS valid, is de kans groot dat deze straks niet meer wordt geaccepteerd en zullen de verschillende browsers (zoals Internet Explorer, FireFox, Opera en Safari) je code niet begrijpen.
- Webpagina’s worden sneller gedownload en uitgelezen; Hoe minder een combinatie van HTML tags, CSS, Javascript, hoe minder groot bestand er gedownload moet worden en hoe sneller deze uitgelezen wordt.
- Gemakkelijk te onderhouden; de websites die HTML/CSS valid zijn zullen makkelijker te onderhouden en aan te passen zijn. Ook als anderen in je code kijken, deze sneller begrijpen dan dat je een rare manier gebruikt om te coderen. (Het is belangrijk dat andere ook van jou kunnen leren.)
- Aanpassingen; als het HTML document netjes is opgebouwd, is deze makkelijk om te bouwen. Bijvoorbeeld je wilt ook je website laten zien op een mobiele telefoon of gewoon een ander design, dan hoef je enkel maar de CSS om te bouwen en je kan een andere website maken, zonder aan de HTML te komen.
- Bekend in zoekmachines; als een zoekmachine – zoals Google jou geschreven code snapt zal je veel beter ‘gerankt’ staan in de zoekmachine. Veel meer bezoekers zullen naar jouw site komen!!

Klik op de afbeelding voor een vergroting
Het werken van een website in verschillende browsers is wel iets anders dan hetzelfde eruit te laten zien in verschillende browsers. Het zorgen dat een website er in elke browser hetzelfde uitziet is bijna onmogelijk, omdat niet iedere browser dezelfde webstandaarden heeft (waaronder IE7 heel erg afwijkt van FireFox of Opera, maar dit zal met de komst van IE8 deels worden verholpen).
Er zijn wel hacks die dit kunnen verhelpen. Dit zijn ‘conditional comments’ die laden een andere CSS in een verschillende browser (werkt overigens alleen voor Internet Explorer). Deze comments zet je in de HTML.
Alle versies van Internet Explorer
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="……" />
<![endif]-->
Aangeven voor aparte versies van Internet Explorer (Je kan de 5.0 veranderen voor elke versie van Internet Explorer, 5.0 5.5 6.0 7.0) Echter hoef je hier vaak 1 versie niet tussen te zetten, je maakt namelijk een CSS bestand voor 1 van de versies en maakt hier een hack in voor de andere versies.
<!--[if IE 5.0]>
<link rel="stylesheet" type="text/css" href="……" />
<![endif]-->
Je kan ook aangeven dat het alleen om eerdere versies gaat die die hack moeten dragen. Dan gebruik je in de comment de letters LT
<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="……" />
<![endif]-->
Deze webstandaarden zullen dus de toekomst worden, meest steeds meer komende media-configuraties die websites kunnen uitlezen, zoals bijvoorbeeld een mobieltje of een spelcomputer. Meer weten over webstandaarden? Kijk dan zeker op: http://www.webstandaarden.org/
Tags: browsers, compatible, CSS, html, internet explorer, javascript, performance, usability, Webstandaarden, zoekmachines
in de css kan je ook dit gebruiken:
_width:400px;
Dat geld namelijk alleen voor IE
Conditional comments, browser-specifieke CSS en andere hacks zijn onverstandig en overbodig. In een héél enkel geval kun je er niet omheen (hoewel je kleine verschillen vaak best voor lief kan nemen) maar over het algemeen worden ze alleen gebruikt door luie of onbekwame webdesigners.
“Vuile” hacks zoals Frank die hierboven noemt zijn nog onverstandiger, misschien pikt een nieuwe browser die code straks ook op en loopt alles in de soep. De kans op onverwachte resultaten wordt alleen maar groter en waarschijnlijk valideert je CSS niet meer.
Ik heb mijn sites altijd semantisch, valid en in alle browsers gelijkend gekregen met één enkel stijlblad en zonder condities.
Ik gebruik heel soms de hack in mijn vorrige post om 1px margin te doen bij IE. Zodat hij goed weergeven word. Voor de rest sluit ik mebij je aan.