Kijk, een stukje logfile van de recente wijzigingen aan een website waar ik mee bezig ben:

‘t Is ver gekomen, als unobtrusivering een woord is dat de meeste Mensen In De Branche wel zouden begrijpen. Waar het op neerkomt, is nochtans een simpel concept.

Er wordt al van het begin van het WWW naar gestreefd om de inhoud van de presentatie gescheiden te houden. Dus als je onder een hoofding een tekst wil die de gebruiker toeroept, dat je liever niet iets zet als

<p><font face="Arial" size="6">Inleiding</font></p>
<p>Dit mag <b style="color: red">zeker niet</b> vergeten worden.</p>

Hier heb je dan beslist dat “Inleiding” in Arial en groot zal staan, en “zeker niet” in het rood zal komen.

Nee, je zet beter iets als

<h1>Inleiding</h1>
<p>Dit mag <strong>zeker niet vergeten worden</strong>.</p>

…dan kan je nog, afhankelijk van hoe de gebruiker de webpagina zal zien, beslissen hoe die <h1> en die <strong> er precies moeten uitzien. Voor blinden zou je kunnen zeggen dat de <strong> met luide stem moet voorgelezen worden, als het uitgeprint wordt op een zwartwitprinter zou je kunnen zeggen dat de tekst in hoofdletters moet staan, en op een scherm zou je de tekst bijvoorbeeld knipperend en in het rood kunnen zetten.

Bon, goed. Klaar, helder, duidelijk, simpel. Dat doen we tegenwoordig allemaal door propere HTML te schrijven en alle layout in CSS te gooien.

Een stapje verder dan inhoud en presentatie te scheiden, is inhoud en gedrag van elkaar te scheiden. Alle javascript uit de pagina te halen, en de pagina bruikbaar houden zowel mét als zonder javascript.

Voorbeeld.

Ik had een pagina waar ergens inhoud in een doosje staat met twee tabs:

Die twee tabs moeten omgewisseld kunnen worden zonder dat de pagina herlaad herladen wordt. Eenvoudig te doen met wat css en javascript, bijvoorbeeld zoals hier: twee verschillende <div>s, en bij een klik op “Een” of “Twee” wordt de zichtbaarheid van de twee omgewisseld.

Maar dat is dus niet ideaal. Om te beginnen, als stijlen af staan, ziet het er zó uit:

Daarnaast, als javascript af staat maar stijlen staan aan, kun je nooit aan de inhoud van de tweede tab geraken.

Enfin, tinternet zou tinternet niet zijn als daar allemaal niet al lang oplossingen voor gevonden waren. En dàt, beste kijkbuiskinderen, is wat bedoeld wordt met die unobtrusive dinges: zelfs al heb je vreemde combinaties van javascript aan/uit, css aan/uit, aardige browser, print je de pagina uit, laat je ze voorlezen, zelfs dàn doet het nog zinnige dingen.

Waarschuwing: niets wereldschokkend of zo volgt hoor, maar als ik het toch moet doen, dan kan ik het net zo goed ook opschrijven terwijl ik het doe. 🙂

Stap één: de pagina zó zetten dat ze werkt en zin heeft zonder css en javascript.

<h2>Een</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam dapibus, neque in fermentum ultricies, massa enim laoreet urna, aliquet auctor purus enim quis nisi. Nunc commodo sapien vel sapien.</p>

<h2>Twee</h2>
<p>Praesent tellus pede, mattis sed, iaculis id, sagittis sed, libero. Phasellus ultrices vestibulum risus. Aliquam erat volutpat. Vestibulum venenatis nisi et velit. </p>

Stap twee. Een aantal haken toevoegen aan de HTML waar de CSS en het javascript aan vastgehangen kan worden:

<div class="pane" id="een">
 <div id="tabseen"><h2>Een</h2></div>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam dapibus, neque in fermentum ultricies, massa enim laoreet urna, aliquet auctor purus enim quis nisi. Nunc commodo sapien vel sapien.</p>
</div>

<div class="pane" id="twee">
 <div id="tabstwee"><h2>Twee</h2></div>
 <p>Praesent tellus pede, mattis sed, iaculis id, sagittis sed, libero. Phasellus ultrices vestibulum risus. Aliquam erat volutpat. Vestibulum venenatis nisi et velit. </p>
</div>

Elk ding staat in een <div> met class “pane”, zodat ze met één moeite een achtergrond en border en font en dergelijke kunnen krijgen.

De twee dingen krijgen elk een uniek ID, zodat ze gemakkelijk aangesproken kunnen worden, bijvoorbeeld om ze zichtbaar/onzichtbaar te maken.

De titels staan in <div>s met een unieke IDs, zodat er gemakkelijk een <h2> bij kan geplaatst worden.

Stap drie. Op de pagina zelf het javascript in orde te krijgen. In volgorde, voor de twee <div>s:

1. een <h2> aanmaken
2. een <a> aanmaken
3. een tekstnode aanmaken
4. de tekstnode in de <a> steken
5. een lege href in de <a> steken
6. een onClick-handler toevoegen aan de <a> waarbij de ene <div> getoond wordt en de andere verborgen, en omgekeerd
7. de <a> in de <h2> steken
8. de <h2> bij de ene nà en bij de andere vóór de er al staande <h2> zetten

En als dat gedaan is, de tweede <div> alvast onzichtbaar maken, natuurlijk. In javascript geeft dat iets dergelijks (ja, ik weet dat het properder kan):

// een
var een=document.getElementById('tabseen');
var hoofdeen=document.createElement('h2');
var linkeen=document.createElement('a');
var teksteen=document.createTextNode('Twee');
linkeen.appendChild(teksteen);
linkeen.setAttribute("href", "#");
linkeen.setAttribute("onclick", "document.getElementById('twee').style.display='block';document.getElementById('een').style.display='none'; return false;");
hoofdeen.appendChild(linkeen);
een.appendChild(hoofdeen);

// twee
var twee=document.getElementById('tabstwee');
var hoofdtwee=document.createElement('h2');
var linktwee=document.createElement('a');
var teksttwee=document.createTextNode('Een');
linktwee.appendChild(teksttwee);
linktwee.setAttribute("href", "#");
linktwee.setAttribute("onclick", "document.getElementById('een').style.display='block';document.getElementById('twee').style.display='none'; return false;");
hoofdtwee.appendChild(linktwee);
twee.insertBefore(hoofdtwee,twee.firstChild);

document.getElementById('twee').style.display='none';

Een voorbeeldje van wat het in het echt doet: alhier.

Stap vier. Bon, dat werkt dus. Tijd om het automatisch te laten gebeuren. De javascript-code zomaar in de html laten staan is vies, dus zetten we alles in een externe file.

Het javascript moet automatisch uitgevoerd worden, en de manier om dat te doen is om het te verbinden met het onLoad-event op de <body> van de html-pagina.

Naiefgewijs zou je dat kunnen doen met

<body onload="prepTabs()">

of zoiets, maar wat als er al andere onLoad-events zijn? Aha! Hierzie, addLoadEvent() to the rescue.

Stap vijf. CSS toevoegen, ook in een afzonderlijk bestandje.

En dan nog wat opkuis, omdat de CSS op een <a> in een <h2> zit, ook voor de tab die eigenlijk niet klikbaar is, maar dat zijn details. 

Resultaat: hierzo. Een HTML-file zonder javascript, die werkt zonder dat javascript.

*
*   *

update voor wie het nog volgde… 🙂

In Internet Explorer 6 is het niet mogelijk om sia de “propere” DOM-methode setAttribute de onClick-handler van een node te verzetten.

Dan doe je het maar op deze manier, die in het absoluut en filosofisch gezien een eind minder mooi is, maar wel het voordeel heeft (a) overal of toch bijna te werken en (b) gemakkelijker te begrijpen is voor niet-programmeurs en (c) ook nog regels code uit te sparen:

function preptabs() {
document.getElementById('tabseen').innerHTML='<h2><a class="active" href="#">Een</a></h2><h2><a class="inactive" onclick="document.getElementById(\'twee\').style.display=\'block\'; document.getElementById(\'een\').style.display=\'none\'; return false;" href="#">Twee</a></h2>';
document.getElementById('tabstwee').innerHTML='<h2><a class="inactive" onclick="document.getElementById(\'een\').style.display=\'block\'; document.getElementById(\'twee\').style.display=\'none\'; return false;" href="#">Een</a></h2><h2><a class="active" href="#">Twee</a></h2>';
}


Ach ja.

Voorbeeldje alhier. Ik kan het alleen maar testen in IE6, Firefox en Opera, bij gebrek aan Macintosh in de buurt. Maar het zou normaal gezien moeten werken, enfin, hoop ik toch.