DHTML ist tot

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 HTMLElementenbaum 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:

//Browsercheck (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.

8 Kommentare » Schreibe einen Kommentar

  1. Hallo,
    das ist schwachsin, denn dann könnte man genau so sagen HTML ist tot.
    DHTML und HTML kommen schneller wieder zurück als man denkt und das „web 2.0″ verschwindet wieder.

    HTML ist genauso barrierefrei wie die DIV anwendung.
    Nur können die wenigstens HTML gut Programmieren und deshalb ist Sie nicht barrierefrei.

    DHTML ist auch barrierefrei und man kann „fast“ genauso viel erreichen wie mit JS nur können es die Programmierer nicht und deshalb ist DHTML auch nicht barrierefrei.

    Vll. kommen die Programmierer irgendwann mal darauf dass das WEB 2.0 eine ausgemachte IDEE ist die nichts bringt, egal wer Sie nun erfunden hat oder Sie bereits einsetzt.

    Grüße Michael

  2. Dein Artikel ist zwar schon ein wenig her, aber hier trotzdem mal kurz ein Statement:

    Firehorse hat irgendwie schon recht, wenn er sagt, dass sich Dein Artikel widerspricht. Ob jetzt DHTML oder DOM Scripting sagt, ist überhaupt kein Unterschied … letzten Endes ist und bleibt alles JS. Und sicherlich ist es toll, dass es den DOM Model Standard gibt, aber welchem Programmierer nützt das was, wenn nach wie vor jeder Browserhersteller sein eigenes Süppchen kocht; und dieser wieder gezwungen wird, diverse Hacks und Workarounds einzubauen: Also doch irgendwie alles beim alten?! Ein false ist eben doch was anderes wie null!

    Doch warum sind JS.Effekte zwangsläufig nervig oder „überbordet“? Das hängt doch immer mit dem jeweiligen Zweck/Ziel ab. Pauschalisierung ist doch sehr unangebracht! Und mal eine Sache zum Vergleichen: Essen schmeckt viel besser, wenn es besser aussieht und besser präsentiert wird! Denn wie sagt der Volksmund: „Das Auge isst mit!“. Oder isst Du nur Astronauten-Nahrung; da bekommst Du nämlich viele Nährstoffe möglichst kompakt und ohne Schnick Schnack; am Besten noch ohne Geschmack!? In diesem Sinne!

  3. Wirklich gut getroffen.
    Nur leider widerspricht sich Dein Artikel auf der ganzen Linie.
    DHTML nein danke, es lebe Ajax und co?!

    Ich denke es war seit jeher eine Sache der persönlichen Einstellung und des Zeitgeistes. Letzter ist leider auch von jenen Blendern überschattet, welche mit ihren Frontpage-Seiten das Internet überfluteten.

    Eigentlich hat sich da auch nicht viel geändert. Nur die Anwendungen sind teuer geworden. Wenn die Leute wüssten, dass es auch mit dem Kopf geht, dann brauchten diese keinen Monopolisten wie Adobe hinterherrennen. (GoLive/Dreamweaver)

    Übrigens: Letztens war ich im DL-Bereich von znet.com unterwegs. Dort können Leute auch Progis bewerten. Zu meiner Verwunderung (oder auch nicht) erhielt GoLive 100% und Dreamweaver nur 50%. Woran mag dieses nur gelegen haben?(lol)

  4. War denn DHTML schon jemals lebendig?
    Inwieweit sich alle Nachfolger langfristig wirklich durchsetzen werden, wird man wohl erst in ein paar Jahren sagen können.

  5. Wow, meine Ohren brennen hier ob all dieser Huldigungen. Danke, es ist schoen wenn man auch mal positive Kommentare bekommt :-)

    Ich bin gerade dabei mein erstes Buch zum Thema fertig zu schreiben und merke immer wieder das SelfHTML als Nachschlagewerk fuer JavaScript Syntax einfach ungeschlagen ist. Wird nur Zeit das die englische Version mal groesser wird. Nein, ich hab nicht die Zeit zum uebersetzen :-)

  6. Hallo,

    DHTML“ war schon immer tot. „DHTML“ war lediglich ein Marketingbegriff wie AJAX oder Web 2.0 heute. Im Grunde handelt es sich bei DHTML oder AJAX einfach um JS. Wer sich DHTML oder AJAX als „neu“ oder „revolutionär“ aufschwätzen lässt, der hat einfach nur das Potential, das in JS steckt, nicht verstanden.