Browser Snekjes

Dit verhaal is voor een belangrijk gedeelte geschiedenis, het WordPress platform is verrassend compatible met moderne browsers. Ik denk dat browsers als Internet Explorer 5.5 nu zo langzamerhand uitgestorven dinosaurussen zijn! Toch is het leuk om nog eens over de oude tijden te vertellen.

Toen ik voor het eerst met Cascaded Style Sheets in aanraking kwam, zag ik CSS als een handige manier om tekst- en tabel lay-out onder controle te krijgen. Er bleek echter veel meer te kunnen met CSS, waaronder een centrale definitie van de lay-out van je website.

Een van de vorige versies van de DOS Amigos Homepage was helemaal gebaseerd op geneste tabellen. Een nadeel was, dat je bij update en onderhoud je tekst tussen alle table-cell markeringen nogal moeilijk terug kon vinden. Dat maakte ook kleine updates een hele klus.

Bovendien was ik niet tevreden met de navigatie. Ik wilde de grotere onderdelen van de site sneller bereikbaar hebben, liefst met een top menu. Verder zaten er een paar heel lange documenten in die vroegen om een navigatie met een menu.

Zodoende was ik toe aan een flinke update van de site.

Ik heb eerst een tijde gespeeld met database gestuurde websites met een content managementsysteem zoals Joomla en Drupal. Dat bleek voor mij toen een brug te ver: ik snap graag wat ik doe en die virtuele toestanden rond een database waren voor mij moeilijk te volgen: ik wist niet waar mijn informatie bleef en je moest zo ontzettend veel metadata toevoegen.

Een van de eisen voor een content managementsysteem is de beschikbaarheid van een webserver zoals Apache en MySQL en PHP-ondersteuning. Wel, dat zat er in mijn eenvoudige webspace van @home niet in. Ik zou naar een hosting provider moeten verhuizen, met alle gevolgen van dien voor iedereen ter wereld die de DOS Amigos Homepage gebookmarkt heeft.

Bovendien is het knap lastig om in Joomla en Drupal je eigen layout te realiseren. Er waren templates genoeg, maar geen van allen voldeed aan mijn eigen idee. Zelf maken vereist diepgaande kennis van de materie, best interessant maar ik wilde de website op korte termijn kunnen verbouwen.

Na een paar door onbekende oorzaak corrupt geraakte MySQL databases (je kunt dan niets anders meer dan uithuilen en opnieuw beginnen) hield ik dat traject maar voor gezien.

CSS leek mij een beter overzicht te bieden: een tabel loze lay-out met DIVjes maakte het in ieder geval eenvoudiger om de eigenlijke content terug te vinden bij upgrade en onderhoud. Een afweging van het werk dat je moest doen om mijn oude website om te zetten in een content managementsysteem of CSS gestuurde lay-out viel weliswaar niet hard in het voordeel van CSS uit, maar het overzicht maakte veel goed.

Zodoende studeerde ik een tijd op de mogelijkheden van CSS en ontwierp mijn eerste lay-out in stappen. Dat alles met behulp van Firefox en ingebouwde web developer extensies. Het resultaat was prima, de gevolgen van de instellingen kon je keurig volgen.

Een goede tip van menig websitegoeroe is “test je website op alle browsers waarvan je verwacht dat de mensen die zullen gebruiken.” Vooral voor CSS-ondersteuning is dat een absolute must. Vooral Internet Explorer versies blijken namelijk snekjes te hebben die je prachtige lay-out compleet verpesten.

Ik heb daarom de Internet Explorer versies vanaf 5.5 gedownload en op het systeem gezet en daarmee de lay-outs getest.

Wat een zooi! Iedere Internet Explorer versie lager dan 7 deed het anders, maar allemaal fout. Ik maakte kennis met tal van bugs die het definiëren van een layout moeilijk maken. Er waren tal van work-arounds, maar de meeste bleken niet onder alle omstandigheden te werken.

Gelukkig kent Internet Explorer een eenvoudige versiedetectie, die je mooi kunt gebruiken om zogenaamde ‘conditional CSS rules’ aan te sturen, een speciaal bestandje voor iedere Internet Explorer versie met aangepaste regels van de ‘standaard’ CSS.

Je maakt die aanpassingen volgens de ‘trial and error’ methode, met het schroeven aan de parameters van de CSS-regels. Net zolang totdat het voor alle browsers een beetje hetzelfde eruitziet en de pagina’s hetzelfde reageren.

Dat is grotendeels gelukt, ook al zijn er nog wel wat snekjes over. Een bloemlezing:

• Voor Internet Explorer 6 moest ik een footer definiëren om te voorkomen dat de laatste karakters uit de content onderaan de pagina terugkwamen. Vandaar dat smalle blauwe balkje onderaan.
• Bij Internet Explorer 5.5 wordt er rechts van de content een kolommetje van paar pixels leegte vertoond. Content-breedte verhogen helpt niet. Jammer maar helaas, dus.
• Bij Internet Explorer 6 en lager blijkt het ‘oplichten’ van tabelcellen bij ‘mouse-over’ niet te werken. Jammer, want die terugmelding van ‘waar ben ik?’ was wel handig. Misschien vind ik er nog een oplossing voor.

Eens te meer blijkt het weer: ‘Al is de (CSS) norm nog zo snel, de realiteit achterhaalt hem wel!’ Maar er is hoop voor de toekomst: de CSS-ondersteuning van Internet Explorer 7 is voor deze site in ieder geval goed. Tot de volgende technologie sprong, vrees ik.

Inmiddels zitten we in 2017 en ben ik overgeschakeld naar een Wordpress opzet. Ik vond een goed functionerend thema met een frisse bijna minimalistische lay-out. Omdat Wordpress zo wijd verspreid is, hoop ik maar dat er geen browser snekjes meer zijn, want de tijd dat ik diep in de code zit te graven is met deze technologie voorbij. Kijk voor de gein maar eens in de source code van een WordPress webpagina in je browser, te ingewikkeld voor een simpele HTML-codeerder zoals ik!

Echter, Wordpress bleek erg gevoelig voor incompatibiliteit van plug-ins. Daarom is de site nu weer klassiek HTML5 met een nieuwe CSS en lay-out. Als je eenmaal weer op gang bent is de relatief simpele code een verademing!

Deze opzet zal op de meeste browsers een goed resultaat geven.