SELFHTML Weblog - Ergänzung zur Dokumentation Übersicht

Reise in die Vergangenheit

DHTML bezeichnet – kurz gesagt – die dynamische Änderung eines HTML-Dokuments, während es im Browser dargestellt wird. Das Mittel dazu ist JavaScript, mit dem man auf Benutzereingaben und andere Ereignisse reagieren kann, um gewisse CSS-Eigenschaften von HTML-Elementen zu ändern sowie Änderungen am HTML-Elementenbaum selbst vorzunehmen.

Obwohl ich mich einiger Zeit mit JavaScript beschäftigte, fand ich den Begriff DHTML nie wirklich passend. Wenn ich zurückdenke, was vor einigen Jahren unter dem Begriff DHTML lief, so kommen mir ausnahmslos nervige Spielereien und sinnlose Effekte in den Sinn: Animationen, Bewegung, Laufschrift, Aufklappmenüs, Ticker, fliegende Objekte, Mauszeiger-Spuren, wackelnde Popup-Fenster usw. In Erinnerung sind mir unglaublich überbordenden Scripte von Thomas Brattli, insbesondere komplexe effektvolle »Menüs«, die damals der Renner waren.

Nun, um einen kleinen Eindruck zu geben, wie eine ordentliche DHTML-Bibliothek noch im Jahr 2001 aussah:

//Browserch

heck (needed) ***************
function lib_bwcheck(){
  this.ver=navigator.appVersion
  this.agent=navigator.userAgent
  this.dom=document.getElementById?1:0
  this.opera5=this.agent.indexOf("Opera 5")>-1
  this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
  this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
  this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
  this.ie=this.ie4||this.ie5||this.ie6
  this.mac=this.agent.indexOf("Mac")>-1
  this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
  this.ns4=(document.layers && !this.dom)?1:0;
  this.bw=(this.ie6||this.ie5||this.ie4||this.ns4||this.ns6||this.opera5)
  return this
}
bw=new lib_bwcheck() //Browsercheck object

Was charakterisiert DHTML besser als dieses Gefrickel? Nichts gegen Thomas Brattli – er war ein Virtuose um 1999/2000. DHTML-Bibliotheken, die »Layer«-Animationen erlaubten, waren gefragt wie nie. Man übte seine Kräfte darin, gleich mehrere Browsergenerationen zufriedenzustellen. Es sei auch der – nach wie vor durchaus lesenswerte – Crossbrowser DHTML-Workshop von Spaceman Spiff genannt. Auch Dynamic Drive hat noch einige ältere Scripte im Angebot, die den klassischen, altbackenen Flair von 1999er-DHTML verbreiten – wenngleich man dort mit der Zeit gegangen ist.

Die obige Browsererkennung zeigt uns schon, mit welchen Techniken man damals zu kämpfen hatte. Es gab zwar schon das W3C Document Object Model (DOM). Begriffsgeschichtlich meint »DHTML« aber die proprietären DHTML-Modelle einerseits von Microsoft ab Internet Explorer 4 und andererseits von Netscape ab Navigator 4. Der Begriff DHTML diente um 1997/1998 vor allem dazu, diese tollen neuen Browserfähigkeiten zu bewerben.

Aus Sicht des W3C DOM waren diese alten Dokument-Objektmodelle schlecht durchdacht und hoffnungslos beschränkt. Trotzdem benutzten Anfang 2001 noch bis zu 30% der Besucher die Browser der sogenannten vierten Generation. Das Aufkommen von Browsern wie Mozilla und Netscape 6, die nur noch das W3C DOM verstanden, führte zu Drei-Wege-Technik: if (document.getElementById) { ... } else if (document.all) { ... } else if (document.layers) { ... }.

Die düsteren Zeiten der Browserkriege endeten damit, dass beide konkurrierenden proprietären DHTML-Modelle untergingen. Das DOM war gleichsam der Friedensvertrag.

Back to the future: if (!document.getElementById) return false;

Im Jahr 2006 kümmert sich längst kein JavaScript-Programmierer mehr um IE 4 und Netscape 4. Heutzutage wird bei allem konsequent das W3C DOM verwendet. Konsequent? Ein kleines gallisches Dorf leistet Widerstand… Letztlich ist man auch bei der standardkonformen Programmierung auf unzählige proprietäre Techniken angewiesen. Was Spaceman Spiff im Jahr 2001 über Event-Handling schrieb, hat sich nicht grundlegend geändert. Es gibt freilich DOM 2 Events und DOM 2 Style seit November 2000, aber was heute unter JavaScript/DOM läuft, liegt weit hinter diesem Niveau (W3C DOM Compatibility Tables). Nicht zuletzt ist es Großteil des Erbes von Netscape JavaScript, das neben ECMAScript die Grundlage jeder Programmierung bildet, nirgendwo standardisiert (z.B. das alleroberste Objekt window). Von einer Ära der Webstandards in der JavaScript-Programmierung kann daher nur eingeschränkt die Rede sein.

Ein neues griffiges Schlagwort

Aber nicht nur die technische Grundlage und damit die Möglichkeiten haben sich verändert, auch was die sinnvolle Verwendung dieser neuen Möglichkeiten angeht, fand ein Paradigmenwechsel statt. Diesen habe ich bereits im Artikel Der sinnvolle Einsatz von JavaScript angesprochen, siehe auch die zugehörige Forumsdiskussion. Dieses Umdenken veranlassten einige dazu, den Begriff DHTML zu hinterfragen. Der Begriff passte für sie so gar nicht in eine Welt, in der man nicht mehr mit ruckelnden und zuckelnden »Layern« den Bildschirm vollballerte, sondern sich um benutzerfreundliche, standardkonforme und zugängliche Webentwicklung bemühte. Während DHTML CSS vor allem als Mittel zur Positionierung ansah, erwuchs plötzlich eine Bewegung, die »semantischen« HTML-Code mit CSS-Layout schrieb.

Anfang 2005 notierte etwa Roger Johansson in seinen Predictions and hopes for 2005:

JavaScript … sees increased usage on sites built by professional developers that are aware of web standards and accessibility. However, this time around it will be used to increase usability without decreasing accessibility, not to decrease both usability and accessibility, as was very popular during the dotcom era.

Jeremy Keith nahm diese Gedanken auf und proklamierte am 14. Januar 2005:

DHTML is dead. Long live DOM Scripting.

We’ll start to see plenty of more resources for standards-based JavaScript which will definitely be a good thing. Right now, most of the resources out there are fairly outdated. A lot of people looking for scripting resources might try googling for DHTML. If they do, they’ll discover a lot of browser-based scripts dating back to the nineties.

Rather than trying to rehabilitate and redefine DHTML, I think it’s time we ditched the term entirely. … I have a modest proposal. The Document Object Model is the glue that binds together (X)HTML, CSS and JavaScript so let’s give it the recognition it deserves. I propose that the technology formally known as DHTML henceforth be called… DOM Scripting.

Nun, trotz prominentem Einspruch machte der Begriff von da an eine steile Karriere in der Webstandards-Szene. Heute reden dort alle demonstrativ von DOM Scripting. Das renommierte Web Standards Project bildete im Juli 2005 keine JavaScript-Task-Force, sondern eine DOM Scripting Task Force und der Begriff stand Programm für deren JavaScript Manifesto – wie auch im anderen Artikel im Zusammenhang mit »Unobtrusive JavaScript« erwähnt.

DHTML verkörperte von da an nur noch die schlechte, rückschrittliche und überwundene JavaScript-Praxis.

DHTML

An outdated scripting technique that is mainly characterized by the changes it makes to the style properties of certain elements, and by the use of the browser-specific DOMs document.layers and document.all.

Die Begriffsschöpfung etablierte sich spätestens zu dem Zeitpunkt, als Jeremy Keith im September 2005 sein gleichnamiges Buch veröffentlichte. Ein genialer Marketing-Coup, mag man denken. In der Tat wurde damit ein einflussreiches neues JavaScript-Paradigma in die Welt gesetzt.

Alte Zöpfe abschneiden

Erst kürzlich hat Christian Heilmann, seinerseits prominenter Erfinder des Claims Unobtrusive JavaScript, einen längeren Artikel zum Thema From DHTML to DOM scripting – an example of how to replace outdated JavaScript techniques veröffentlicht. An verschiedenen Praxisbeispielen wird gezeigt, welche Nachteile eine JavaScript-Lösung hat, die dem DHTML-Paradigma folgt. Im zugehörigen Weblog-Eintrag fasst Chris diese Probleme von DHTML und Pluspunkte von DOM Scripting zusammen.

Ein gutes Beispiel ist das Öffnen eines größeren Bildes beim Klick auf eine Grafik. Früher war unzugängliches JavaScript und Popup-Fenster mittels window.open() dafür Gang und Gäbe. Natürlich wird »DHTML« hier negativ zugespitzt – tatsächlich gibt es zwischen DHTML und DOM Scripting bzw. Unobtrusive JavaScript viele Schattierungen, denn auch JavaScript-Popups lassen sich relativ zugänglich gestalten. Nichtsdestoweniger ist festzuhalten, dass Popup-Fenster schlicht anachronistisch sind. Vor allem solche, deren Größe mithilfe des screen-Objektes angepasst wird und die mit moveTo() auf dem Bildschirm herumgeschoben werden. Als Alternative zu Popup-Fenstern finden Scripte wie Lightbox.js und DOMinclude Verbreitung, die die gewünschten Inhalte ins Fenster integriert anzeigen.

Ein weiteres Beispiel für überkommene, verbesserungswürdige DHTML-Anwendungen sind Slideshows – auch das DHTML-Kapitel von SELFHTML enthält in dieser Hinsicht ein Negativbeispiel: Bilderbuch zum Umblättern.

DOM Scripting – Noch so ein Modebegriff?

Hmja, genauso wie Behaviour Layer, Progressive Enhancement, Ajax, Web 2.0, Prototype und was sonst noch gerade heiß, hip, cool und angesagt ist.

Ich persönlich werde mit dem neuen Buzzword DOM Scripting genausowenig warm wie mit DHTML. Allerdings zeigt Christian Heilmanns 35-Seiten-Tutorial in unnachahmlicher Weise, dass hinter dem Begriff ein leistungsfähiges, verständliches und praxisbezogenes Konzept steht, dass die bisher gängige JavaScript-Praxis in den Schatten stellt und völlig zurecht als überholt bezeichnet. Auch wenn man das Hantieren mit neu erfundenen Trendbegriffen skeptisch sieht – die Gegenüberstellung der Begriffe DHTML versus DOM Scripting ist eine wirkungsvolle, didaktisch geschickte Entscheidung. Hinzuweisen ist auch auf die umfangreiche Scriptsammlung Christian Heilmanns, die die Ideale des DOM Scriptings soweit möglich praktisch umzusetzen versucht.

Das Erbe von DHTML

Typische DHTML-Funktionen werden beim Umstieg auf DOM Scripting nicht bloß verworfen. Denn letzten Endes besteht eine funktionale Ähnlichkeit zwischen manchen heutigen Bibliotheken wie script.aculo.us sowie moo.fx und den eingangs erwähnten DHTML-Bibliotheken, die z.B. die Bewegung, die Größenänderung, das Beschreiben sowie das Ziehen und Ablegen von »Layern« ermöglichten. Allerdings scheinen sich auch hier die Vorzeichen geändert zu haben. Während etwa Dynamic HTML Central noch alle Inhalte ohne Mehrwert in dynamische Layer mit dem Aussehen von Fenstern unterbrachte, dienen die Effekte heute tendenziell sinnvolleren Zwecken, inbesondere in Webanwendungen. Prinzipiell gab es aber schon bei DHTML den sinnvollen, sparsamen und den effekthascherischen, nutzlosen und eher störenden Gebrauch. Deshalb ist bei den neu sprießenden Effektbibliotheken – unter welchem Schlagwort man sie auch immer zusammenfassen mag – genauso Skepsis angebracht, denn die Lust an den überbordenden Effekten und witzlosen visuellen Gimmicks ist geblieben.