Over Standards mode en Quirks mode

Internet is voortdurend in ontwikkeling. Dat is op zich een goede zaak, anders zou het al gauw saai en oninteressant worden. Steeds opnieuw worden nieuwe toepassingen bedacht en gerealiseerd. Om al die nieuwe ideeën realiseerbaar te maken en realiseerbaar te houden moeten ook de internet programmeertalen worden uitgebreid en verbeterd. Denk hierbij aan HTML, XHTML, CSS, maar ook aan scripttalen zoals JavaScript, PHP, ASP(.NET), en databases zoals MYSQL.

Van de scripttalen en databases komen regelmatig nieuwe versies op de markt. Webhosting bedrijven stellen die gewoonlijk al vrij snel beschikbaar voor de gebruikers. Daar gaat gelukkig weinig mee fout.
Helaas is het met de opmaaktalen HTML, XHTML en CSS een ander verhaal.

De standaarden voor HTML, XHTML en CSS worden gemaakt door W3C, de World Wide Web Consortium. Dat is een internationale organisatie waarin een heleboel universiteiten, soft- en hardwarebouwers en grote internetbedrijven samenwerken aan de ontwikkeling van de webstandaarden.
Een probleem is dat deze organisatie eigenlijk te groot is om slagvaardig te werk te kunnen gaan. Het gevolg is dat een standaard eigenlijk niet 'af' is als deze wordt gepubliceerd. Er komen dus (te) vaak aanvullingen op standaarden uit. Voorbeeld: HTML 4.0 (april 1998) werd binnen 20 maanden verbeterd door HTML 4.01 (december 1999).

Het grote probleem van de browserfabrikanten is dat bestaande websites ook goed moeten blijven draaien nadat er een nieuwe webstandaard in hun browser is ingebouwd. Dat heet "achterwaartse compatibiliteit". Het komt er in de praktijk op neer dat elke browser ook oudere standaarden ondersteunt. Als de browser-software maar één webstandaard zou ondersteunen, zou het grootste gedeelte van internet moeilijk leesbaar worden na de implementatie van een nieuwe standaard.

Een website, waarvan de code volledig aan een standaard voldoet, draait in de standards-compliant mode, kortweg standards mode. Het wordt ook wel aangeduid met strict mode.
Om ook met oudere HTML-standaarden te kunnen werken is de quirks mode bedacht. In quirks mode kun je tags (blijven) gebruiken die in de 'huidige' standaard niet meer voorkomen. Je kunt in quirks mode gewoon deprecated (afgeraden) HTML-tags gebruiken zoals <b> voor vetgedrukte tekst en <i> voor cursief.
• Het Engelse woord quirk betekent zoveel als: vreemd, eigenaardig, gril, nuk, kuur, of kronkel.
• Tags die in HTML 4 deprecated zijn, kunnen in HTML5 gewoon nog bestaan en niet (meer) deprecated zijn. Zie bijvoorbeeld het item Verschillen tussen HTML 4 en HTML5 III: Gewijzigde tags.

Als de browser in quirks mode werkt is deze ook veel toleranter ten aanzien van de HTML-, JavaScript- en CSS-code. Je bent dus vrijer in wat kan en mag.

Een vroeger veel gehoorde claim is dat quirks mode 'binnenkort' niet meer beschikbaar is in de browsers. Dat lijkt me niet haalbaar. Het overgrote deel van de miljarden pagina's op internet is niet standards compliant.
Het is dan ook nog niet altijd nodig om een bestaande website om te bouwen van quirks mode naar standards mode. De achterwaartse compatibiliteit zal nog jaren in stand worden gehouden.
Verkijk jezelf daar echter niet op. Met de komst van Internet Explorer 11 bleek bij deze website dat sommige standaard JavaScript- functies (waaronder history.go()) een onvoorspelbaar resultaat opleveren in een site met frames en/of het gewoon niet meer deden. In de eerste helft van 2014 is deze hele site overgezet van quirks mode naar standards-compliant mode. Helaas moesten veel van de voor quirks mode geschreven JavaScripts óók worden geconverteerd. Dat soort karweitjes is vaak lastiger dan het lijkt.

Het is overigens niet moeilijk om een website standards compliant te maken. Het is wel heel veel werk, zeker bij een grote website. In voorkomende gevallen kun je je afvragen of dat wel de moeite waard is. De site helemaal opnieuw bouwen geeft dan vaak een meer bevredigend resultaat.

Belangrijk is dat je zelf (als webmaster dus) bepaalt of de browser in standards mode of in quirks mode werkt. Dat doe je een DTD (Document Type Definition) te gebruiken, kortweg Doctype.
Je zet een DTD helemaal boven in je HTML-bestand, vóór de <HTML>-tag. Een overzicht van de bestaande DTD's voor HTML staat in onderstaande tabel. Daarbij staat ook de weergave-modus van de browser aangegeven.

De drie grote browsers (Edge, FireFox en Chrome) werken alle drie prima in standards mode. Afwijkingen zijn er alleen in het gedrag van sommige, weinig gebruikte attributen. De achterwaartse compatibiliteit (HTML 4 ↔ HTML5) in standards mode is prima in orde. Als er nog iets van Quirks-mode nodig is in een site wordt dat gewoon gedaan; er verschijnt alleen een melding in het console.
Meer informatie is te vinden in dit Engelstalige artikel:

• 'Mozilla Quirks Mode Behavior',
  https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode

Wees consequent in je keuze tussen standards mode en quirks mode. Als je een oudere website hebt (waarin ook oudere HTML voorkomt), zorg dan dat de browsers de quirks mode gebruiken. Als je een nieuwe site aan het ontwikkelen bent, voldoe dan tenminste aan de HTML5-standaard. Regel zo veel mogelijk via CSS; gebruik alleen attributen bij tags als er geen CSS-equivalent beschikbaar is.

Opmerking: Het ontwikkelen van een nieuwe site in HTML 4.01 raad ik niet aan. Waarom zou je oudere techniek gebruiken als je moderne technologie tot je beschikking hebt?

Je hebt behoorlijk wat mogelijkheden om een HTML-standaard te kiezen met behulp van een DTD, maar vreemd genoeg kun je niet opgeven welke versie van CSS door de browser moet worden gebruikt. Daar bestaan geen tags voor.
Er zijn bronnen die beweren dat de browser in Standards mode alleen CSS 2 en hoger gebruikt. In Quirks mode zou ook CSS 1 kunnen worden gebruikt. Als je bedenkt dat de CSS-standaarden achterwaarts compatibel zijn lijkt dat niet echt een probleem.

Tenslotte: Om te bereiken dat je website er in alle browsers hetzelfde uitziet, moet je vermijden dat de browser zelf keuzes kan maken. Dat geldt dus niet alleen voor de weergave modus, maar eigenlijk voor alles. Het meest bekende voorbeeld is het lettertype. Als je wilt dat dat in elke browser hetzelfde is, moet je dat in elk HTML-bestand apart opgeven. In deze site is dat geregeld via een eenvoudig style sheet, waar in staat dat het lettertype voor deze site 10pt Verdana moet zijn. Als je het weg laat wordt de standaard-instelling van de browser gebruikt. Meestal is dat Times New Roman.
Een ander voorbeeld is de vrije ruimte rond elementen. Vroeger namen de meeste browsers daar 5 px voor. Tegenwoordig is dat 0px.

De moraal van dit verhaal: