Webstandaarden: scheiding van structuur en opmaak

DOCTYPE Switching en Standards Mode

Hoe weten moderne browsers wanneer ze een website correct moeten tonen als een voorwaarts-compatibele site, die gebaseerd is op webstandaarden, terwijl ze tevens toch ondersteuning moeten bieden aan sites gebouwd met de verouderde praktijken.

Het antwoord hierop is dat de hedendaagse browsers gebruik maken van het DOCTYPE om te schakelen tussen Standards Mode (waar een site werkt zoals gespecificeerd door het W3C) en de achterwaarts compatibele Quirks Mode.

Om alles spannend te houden werkt de Standards Mode in Gecko browsers zoals Mozilla en Netscape licht verschillend van diegene in Internet Explorer. Toch kunnen deze kleine verschillen een grote invloed hebben op het uitzicht van de site.

Latere Gecko browsers zoals Mozilla 1.01+ en Netscape 7 hebben nog een derde mode toegevoegd, die meer werkt zoals IE's Standards mode. Deze wordt door Gecko browsers ?Almost Standards' genoemd.

Het ontstaan van DOCTYPE Switching

In de late jaren '90 erkenden de leidinggevende browser ontwikkelaars dat er nood was aan een complete en accurate ondersteuning voor webstandaarden. Om hieraan gehoor te geven moesten ze op zoek gaan naar een methode om de standaarden correct te ondersteunen, zonder de oudere websites de das om te doen.

Het kamp was namelijk al verdeeld in de Netscape en Explorer aanhangers, die elk de grillen van hun favoriete browser aanleerden en er oplossing voor zochten. Microsoft en Netscape waren bereid om er beter werk van te maken de standaarden te ondersteunen, maar niet als het ten koste zou gaan van de reeds bestaande websites, die samen miljarden dollars hebben gekost.

Aan- en uitschakelen

Zelfs voor Netscape en Microsoft overeenkwamen om browsers te ontwikkelen die de standaarden ondersteunden kwam er iemand op de voorgrond met een oplossing voor het pre-standaarden probleem. Het was de gebruikersinterface technoloog Todd Fahrner, een bijdrager tot de CSS en HTML werkgroepen van het W3C, en medeoprichter van ?The Web Standards Project'. Fahrner stelde voor om een systeem in moderne browsers in te bouwen die het mogelijk maakten om het aan webstandaarden onderworpen renderen aan en uit te schakelen. Het leek hem aangeraden om de aanwezigheid of net het ontbreken van het DOCTYPE hiervoor te gebruiken.

Als een pagina opende met een DOCTYPE, dan waren de kansen groot dat de auteur op de hoogte was van webstandaarden en trachtte hieraan te voldoen. Op dat moment zou een browser de site moeten interpreteren volgens de W3C specificaties.

Een site waar het DOCTYPE ontbreekt moet dan behandeld worden op een manier waarop een oudere browsers zulke pagina's afhandelt.

In maart 2000 werd door Microsoft IE5 Macintosh Edition uitgebracht. De Tasman rendering engine, ontwikkeld door Microsoft ingenieur en W3C standaarden aanhanger Tantek ?lik, bood in hoofdzaak nauwkeurige en vooral complete ondersteuning voor standaarden, inclusief CSS1, XHTML en het DOM. IE5/Macintosh bevatte ook Text Zoom om de toegankelijkheid te bevorderen. Het was tevens de eerste browser die DOCTYPE switching gebruikte om te schakelen tussen Quirks en Standard mode.

De ingenieurs die werkten aan de op Gecko gebaseerde browsers zagen onmiddellijk het nut in van het DOCTYPE switching en Text Zoom. Ze brachten dan ook vrij snel na de Microsoft release hun browsers uit, waaronder Netscape 6, Mozilla en Chimera.

Controleren van browser werking

De precieze werking van het DOCTYPE switching verschilt van browser tot browser. Toch is er een zekere essentie die voor alle browsers dezelfde blijft. Hier is de vereenvoudigde werking:

• Een XHTML DOCTYPE dat een volledig URI (compleet webadres) bevat verteld IE en Gecko browsers om de pagina te renderen in Standards mode, zodat de CSS en XHTML worden afgehandeld volgens de W3C specificaties. In Standards mode veronderstelt de browser dat je weet wat je doet.
• Wanneer een onvolledig of verouderd DOCTYPE ? of helemaal geen DOCTYPE ? aanwezig is worden deze browsers in Quirks mode geschakeld, waar verondersteld wordt dat er verouderde, ongeldige opmaak en browser specifieke niet-standaard code is gebruikt. Bij deze mode zullen browsers de pagina's; op een achterwaarts compatibele manier interpreteren en zal de CSS weergegeven worden zoals het eruit zou gezien hebben in IE4/5. Ook zal er teruggevallen worden op het eigen browser specifieke DOM.

Browser diversiteit

De Standards mode in Gecko browsers verschilt van deze van IE in enkele kleine details. Het verschil wordt vooral duidelijk wanneer er sprake is van een hybride (CSS en tabel) lay-out en het bekeken wordt in de eerste generatie Gecko browsers.

Na de conversie van HTML 4.01 Transitional naar XHTML 1.0 Transitional, waarbij geen wijzigingen in de opmaak wordt gemaakt, buiten de regels voor conversie naar XHTML, zou verwacht worden dat de lay-out er identiek uitziet. Uiteindelijk verander je toch maar enkele tags. Toch kan de layout er aanzienlijk anders uitzien in de eerste Gecko browsers, zoals Netscape 6.0 en Mozilla 1.0. Indien de ontwerper geconverteerd heeft naar XHTML Strict, dan zal de lay-out er verschillend uitzien in alle Gecko browsers, dus zowel de oude als de nieuwere. Er is een verklaring voor, alsook een makkelijke remedie.

Afbeelding kloof in Gecko

De site zal er hetzelfde blijven uitzien in Internet Explorer voor Windows en Macintosh, maar in Gecko browsers zullen mysterieuze kloofjes tussen de afbeeldingen verschijnen in een tabel die bijvoorbeeld de navigatie-elementen bevat.

Dit treedt op omwille van het verschil in de behandeling van afbeeldingen in relatie tot het vooropgestelde rooster van een website. In echte Standards mode worden afbeeldingen door Gecko beschouwd als inline tenzij men anders heeft gespecificeerd in de style sheet, dus block level. Alle inline elementen, zoals tekst, vertoeven op een basislijn om ruimte te maken voor de descenders van onderkast letters (zoals de y, g en j). De grootte van de basislijn en de positionering ervan hangt af van de grootte en de keuze van het lettertype.

In Gecko's Standards mode zal er altijd witruimte aanwezig zijn onder inline afbeeldingen om ruimte te maken voor de eventuele descenders. Hierbij maakt het niet uit of er nu al dan niet tekst aanwezig is.

Een oplossing hiervoor is om twee regels CSS toe te voegen aan je style sheet:

img { display: block; }
.inline { display: inline; }

De tweede regel zorgt ervoor dat we kunnen specificeren wanneer een afbeelding inline moet zijn door toevoeging van de naam van de klasse:

<img class="inline" ... etc. />

De Almost Standards mode is door de Gecko/Netscape ontwikkelaars aangemaakt om zich te gedragen als IE's Standards mode. Hierdoor zullen in Almost Standards mode geen witruimtes optreden tussen de afbeeldingen. Omdat dit onverwacht gedrag optreedt bij Transitional opmaak hebben de ingenieurs beslist dat het XHTML Transitional DOCTYPE Gecko's Almost Standards mode inschakelt. Het Strict DOCTYPE zal echter Gecko's nauwgezette Standards mode activeren.