Die Lösung ist bekannt und an sich einfach. Wird mittels Ajax / Flex / Flash dynamisch ein neuer Inhalt angezeigt, muss mittels Java-Script die URL des Browsers entsprechend geändert werden. Der Haken dabei: der Browser lädt die Seite neu! Dies kann aber mit einem Trick verhindert werden.

Hier spielt das Hash-Zeichen (#) in der URL eine wichtige Rolle. Es dient zur Angabe eines Ankerpunktes (siehe W3C-Syntax of anchor names) in der aktuell angezeigten Webseite. Eine Ankerpunkt-Angabe gehört streng genommen nicht mehr zur URL, da sie nicht an den Web- / Applikationsserver gesendet wird. Der Browser versucht den mit dem Hash-Zeichen angegebenen Ankerpunkt innerhalb der aktuellen Seite zu finden und scrollt dann direkt an diesen Punkt. Findet der Browser keinen passenden Anker, bleibt die Position unverändert. Eine Webseite kann somit ein Inhaltsverzeichnis am Anfang präsentieren, deren Links nur reine Ankerwerte enthalten. Ein Klick auf solch einen Link sorgt dafür, dass der Browser an die Ankerstelle des gewünschten Kapitels  springt. Dabei wird die Webseite nicht neu geladen. Und genau diesen Effekt macht man sich hier zu Nutze.

Wird der angezeigte Inhalt mittels Ajax oder in einer Flash-Anwendung aktualisiert, so muss der Ankerwert, welcher für den angezeigten Inhalt steht, mittels Java-Script in der URL angepasst werden. Hierfür gibt es zwei Möglichkeiten. Entweder man setzt den Wert in window.location.hash oder man verwendet die Location-Methode window.location.Replace() mit exakt der aktuellen URL, die nur am Ankerwert geändert wurde (unterscheidet sich die URL vor dem Anker-Hash von der aktuellen URL, startet der Browser eine neue Anfrage und lädt die entsprechende Seite nach!). Der Unterschied zwischen diesen beiden Möglichkeiten liegt in der Browser-History. Wird die URL mittels der Methode Replace() ersetzt, wird die überschriebene URL-Angabe im Browser nicht als “besuchte Seite” vermerkt, was dazu führt, dass eine Navigation “zurück” mittels des Back-Buttons nicht möglich ist. Dies kann ein gewünschter Effekt sein, wenn eine Anwendung ohne die Browser-Navigations-Buttons arbeiten, aber Bookmarking unterstützen will.

Da der Web- / Applikationsserver bei einer Anfrage der Art http://somedomain.com/path/to/site/#document-id nur die Angabe http://somedomain.com/path/to/site/ vom Browser zugesendet bekommt, also keine Anker-Angaben, muss mittels Ajax oder Flash/Flex (für Flex siehe: Accessing Flex from Javascript und Accessing Javascript from Flex) zu Beginn zusätzlich eine neue Anfrage für den Dokumenten-Inhalt gestartet werden. Hierzu wertet ein Java-Script nachdem die Webseite eingeladen wurde (Event-Funktion in window.onload) den Inhalt von window.location.hash aus und ruft die entsprechende Nachlade-Funktion für Ajax oder in einer Flash-Anwendung auf.  Die Adresse könnte dafür beispielsweise http://somedomain.com/path/to/document/document-id/ lauten. Diese Aktion muss ein Javascript auch dann durchführen, wenn sich durch den Back-Button oder durch eine “seiteninterne” Navigation der Anker-Wert änderte. Um diese Änderungen zu überwachen bietet es sich an, einen Timer zu implementieren, der in regelmäßigen Abständen überprüft, ob die URL im Browser noch zu dem aktuell angezeigten Inhalt passt. Wenn nicht, wird hier wieder per Ajax-Request bzw. innerhalb der Flash-/Flex-Anwendung der Inhalt angepasst. Eine detaillierte Beschreibung zu diesem “Ajax-Pattern” kann unter ajaxpatterns.org nachgelesen werden. Hier findet man auch passende Codebeispiele.

(updating url for bookmarking AJAX or Flash applications using the anchor syntax)

Die Abkürzung HTC steht für HTML Component. Durch solche Komponenten kann man das Verhalten bestimmter HTML-Elemente definieren und sauber auslagern. Dazu werden Programmabläufe in JScript bzw. VBScript ausgewählten Ereignissen bestimmter Elemente zugeordnet. Eingebunden werden diese Komponenten mittels dem nicht Standardkonformen CSS-Attribut behavior: url(datei.htc). Da dies nur der Internet Explorer versteht, wird auf diesem Weg Code eingebunden, der ausschließlich für diesen Browser gültig ist. So zum Beispiel auch ein Script, das den Microsoft-PNG-Filter den einzelnen Grafikelementen einer Seite automatisch zuordnet.

Dies macht das “IE PNG Fix“, welches auf TwinHelix vorgestellt wird und für den Internet Explorer ab der Version 5.5 eingesetzt werden kann. Hierbei handelt es sich um die gleiche technische Grundlage, die im Artikel “PNG im Internet Explorer” beschrieben wird. Nur werden diese CSS-Informationen automatisch mittels eines HTCs den einzelnen Elementen zugeordnet. Man muss sich somit in der Gestaltung der Style-Sheet-Dateien diesbezüglich keine gesonderten Überlegungen machen.

Wie oben schon angesprochen handelt es sich bei dem CSS-Attribut behavior um kein Standardkonformes Attribut, was dazu führt, dass eine CSS-Validierung fehlschlägt. Man kann allerdings solche Überprüfungen ggf. austricksen, indem man das HTC mittels eines JavaScripts einbindet. Der Code hierfür wird im mitgelieferten Beispiel in den Sourcen dargestellt und ist hier nochmals aufgelistet:

<script type="text/javascript">
    if (document.all && document.styleSheets && document.styleSheets[0] && document.styleSheets[0].addRule)
    {
        // Feel free to add rules for specific tags only, you just have to call it several times.
        document.styleSheets[0].addRule('*', 'behavior: url(iepngfix.htc)');
    }
</script>

CSS-Default-Werte

Die einzelnen Browser zeigen einen Inhalt mit unterschiedlichen Vorgabewerten an. Abstände zwischen Absätze und Überschriften, sowie Schriftgrößen weichen leicht voneinander ab, zumindest wenn diese nicht explizit in einem Style-Sheet definiert werden. Um zu vermeiden, dass eine CSS-Definition zur Hälfte mit Normierungswerten bestückt ist, empfiehlt es sich, eine extra Definitionsdatei für das Zurücksetzen aller Werte anzulegen und einzubinden. Hier bieten sich die YUI-CSS-Definitionen von Yahoo (BSD License) zum Zurücksetzen der Abstände (Reset) und Normieren der Schriftgrößen (Font) an. Leider werden hier sogenannte CSS-Browserweichen eingesetzt, was dazu führt, dass das CSS nicht valide ist.

Wem kleine Abweichungen in der Font-Normierung nichts ausmachen, kann von mir das Reset-Style-Sheet “style_reset.css” herunterladen und in seine Projekte einsetzten (BSD License). Der Vorteil dieser Definition besteht darin, dass sie die W3C-CSS-Prüfung besteht (siehe Icon im Fußbereich)! Dieses CSS kann dann mittels @import url('style_reset.css'); am Anfang des jeweiligen Haupt-Style-Sheets eingebunden werden. Danach sollte allerdings darauf geachtet werden, dass alle Schriftgrößen nur noch prozentual angegeben werden. Welche Prozentwerte für welche Größenpixel stehen wird in der CSS-Datei als Kommentar aufgelistet.

CSS-Box-Modell

Leider interpretiert der Microsoft Internet-Explorer 5 / 6 das CSS-Box-Modell eines HTML-Elements mit fester Breitenangabe etwas anders, als es ursprünglich gedacht war. Innerhalb seiner Breite liegen der sichtbare Rahmen (Border), sowie der innere Abstand (Padding) eines Elementes. Dies bedeutet (und dies auch nur sicher, wenn die Breite angegeben wurde), je größer diese beide Parameter sind, um so weniger Platz bleibt für den Inhalt eines Elementes. Der CSS-Standard definiert die Interpretation der Breitenangabe hier anders. Die Breitenangabe gilt dem Inhalt. Rahmen, sowie innerer und äußerer Abstand (Margin) liegen außerhalb dieser Breitenangabe. Man muß sie also zu dieser Angabe addieren, um die komplette Breite zu ermitteln. Welches der beiden Vorgehen intuitiver ist, vor allem auch mit dem Wissen, das die Hintergrundfarbe bzw. das Hintergrundbild auch noch im Padding-Bereich sichtbar ist, sei mal dahingestellt. Die unterschiedlichen Interpretationen des CSS-Box-Modells erschweren das Gestalten einer Webseite bzw. das Erstellen von Wordpress-Themes, welche in der Regel aus einer Kombination mehrerer DIV-Elemente besteht.

Es gibt unterschiedliche Herangehensweisen, um dieses Problem in den Griff zu bekommen. Eine besteht in der Definition unterschiedlicher Breitenangaben, eine für den Internet Explorer und eine für die restlichen Browser. Dies kann mit so genannten CSS-Browserweichen (CSS-Hacks) in einer globalen Style-Sheet-Definition erreicht werden. Da solche CSS-Dateien aber nicht Standardkonform sind und auf Interpretations-Schwächen der einzelnen Browser basieren, ist davon abzuraten. Eine weitere Möglichkeit besteht im Einsatz von Kommentar- bzw. PHP-Browserweichen. Beispiele hierfür findet man in dem Artikel “PNG im Internet Explorer“.

Will man allerdings nicht zwei CSS-Dateien pflegen, gibt es noch eine weitere Herangehensweise. Beide Interpretationen des CSS-Box-Modells haben eins gemeinsam: der äußere Abstand (Margin) liegt wirklich außerhalb der Breitendefinition. Verzichtet man nun auf den Rand (Border) und den inneren Abstand (Padding) komplett (Wert = 0px, oder Einsatz von style_reset.css, s.o.) werden die Angaben von allen Browsern gleich interpretiert. Um nun auch einen inneren Abstand in einem DIV-Element zu realisieren, muss ein weiteres DIV-Element, welches den eigentlichen Inhalt trägt, in dieses gelegt werden. Der Margin-Wert des inneren DIVs entspricht dann dem ursprünglichen Padding-Wert. Jetzt muss noch eine Eigenart der vertikalen Margin-Werte behandelt werden. Wie im CSS 2.1 Standard beschrieben schlägt hier das so genannte Collapsing-Margins zu, was dazu führt, dass der “margin-top” Wert des inneren DIVs gerne komplett ignoriert wird. (Der Internet-Explorer 5/6 hält sich hier nicht an den Standard und ordnet die Elemente wie erwartet an. Er addiert vertikale Margin-Werte grundsätzlich auf, was meist zu unerwünscht größeren Abständen zwischen Elementen führt.) Hier hilft ein Trick, welcher auch aus dem Standard herausgelesen werden kann: Die einzelnen DIVs bekommen eine Overflow-Definition mit einem Wert ungleich “visible”. Da in der Regel kein Text über die DIV-Content-Grenzen hinweg angezeigt werden soll, kann hier die Definition overflow: hidden; eingebunden werden. Auf diese Art und Weise können einheitliche WordPress-Themes mit validen CSS-Definitionen erstellt werden.

BluePrintCSS

Eine schöne Sammlung nutzbarer CSS-Definitionen liefert auch Google mit ihrem BluePrintCSS. Der Schwerpunkt dieses CSS-Frameworks liegt in der Typographie. So wird auch ein Stylesheet für den Druck geliefert. Auch zieht die Idee eines Grid-Layouts aus dem Print-Design-Umfeld in die Stylesheets ein. Dadurch stellt ein Mehrspalten-Layout kein Problem mehr dar. Die Eigenarten des Internet-Explorers wurden hier in einem eigenen Stylesheet sauber getrennt abgelegt.

<html>
<head>
 <script>
  function DivSetVisible(state)
  {
   var DivRef = document.getElementById('PopupDiv');
   var IfrRef = document.getElementById('DivShim');
   if(state)
   {
    DivRef.style.display = "block";
    IfrRef.style.width = DivRef.offsetWidth;
    IfrRef.style.height = DivRef.offsetHeight;
    IfrRef.style.top = DivRef.style.top;
    IfrRef.style.left = DivRef.style.left;
    IfrRef.style.zIndex = DivRef.style.zIndex - 1;
    IfrRef.style.display = "block";
   }
   else
   {
    DivRef.style.display = "none";
    IfrRef.style.display = "none";
   }
  }
 </script>
</head>
<body>
 <form>
  <select>
   <option>A Select Box is Born ....</option>
  </select>
 </form>
 <div
  id="PopupDiv"
  style="position:absolute; top:25px; left:50px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100">
  .... and a DIV can cover it up<br>through the help of an IFRAME.
 </div>
 <iframe
  id="DivShim"
  src="javascript:false;"
  scrolling="no"
  frameborder="0"
  style="position:absolute; top:0px; left:0px; display:none;">
 </iframe>
 <br>
 <br>
  <a href="#" onclick="DivSetVisible(true)">Click to show DIV.</a>
 <br>
 <br>
  <a href="#" onclick="DivSetVisible(false)">Click to hide DIV.</a>
</body>
</html>

Für das oben angesprochene Problem mit den Tooltips müssen die Layer nun entsprechend automatisch aktiviert bzw. deaktiviert werden. Dazu wird das Mouse-Move-Event in Kombination eines Timers eingesetzt. Ein gutes Beispiel hierfür findet man unter anderem auch auf der Seite von Dynamic Web Coding.

Um diesen Browser dazu zu bewegen, die normierte Transparenz einer PNG-Datei anzuzeigen, müssen einige Kniffe vollzogen werden. Der Grundschritt besteht im Einsatz des Microsoft-Filters AlphaImageLoader. Bei Grafiken, direkt im Inhalt einer Seite, kann der Internet Explorer mit folgendem Konstrukt zur Transparenz überredet werden (für diesen Anwendungsbereich gibt es im Web auch unterschiedliche JavaScript-Programme, welche nachträglich alle IMG-Tags entsprechend erweitern. Bitte beachten: Wenn mittels der Filteranweisung ein Bild einem IMG-Tag hinzugefügt wird, dann sollte die Source auf ein transparentes GIF zeigen.):

<img src="blank.gif" width="xxx" height="xxx" alt="xxx" style="filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Bild.png');" >

Werden allerdings PNG-Grafiken mittels CSS-Definitionen als Hintergrundbilder in HTML-Elemente wie z.B. dem DIV eingesetzt, muss man schon mehrere Schritte unternehmen:

1. Es muss unterschieden werden, ob ein moderner Browser oder der Internet Explorer 5.5 – 6.x die Webseite besucht.
2. Für den Internet-Explorer muss der Filter im Cascading Style Sheet (CSS) angegeben werden.
3. Hyperlinks in HTML-Elementen mit PNG-Hintergrund müssen ggf. gesondert behandelt werden.

1. Die Browser-Weiche

Das Ziel dieser Weiche besteht in der Ermittlung des Browsers, welcher eine Anfrage an den Webserver stellt. Dies ist von Nöten, da wir für den Internet Explorer eine spezielle Filterdefinition im CSS (siehe unten) benötigen, die wiederum andere Browser nicht verstehen.

Die PHP-Weiche

Es gibt unterschiedliche Möglichkeiten das Problem mit der Filterzuordnung zu lösen. Eine von mir bevorzugte Lösung besteht darin, unterschiedliche Style-Sheet-Dateien zu erstellen, eine für moderne Webbrowser und eine für den Internet Explorer 5.5 – 6.x. Diese Dateien können dann abhängig vom Browser-Request in die Webseite eingebunden werden. Der fragende Browser kann mittels PHP ermittelt werden. Der Aufruf “<?php echo $_SERVER ["HTTP_USER_AGENT"]; ?>” liefert hier beispielsweise “Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)“. Bedient man sich nun der PHP-Funktion strstr(), kann man feststellen, ob ein bestimmter Teilstring in dieser Angabe vorkommt. Uns interessiert hier das Vorkommen von “MSIE 5” und “MSIE 6” (Der Internet Explorer 7 kommt mit PNG-Grafiken zurecht, versteht allerdings auch die Filter. Theoretisch reicht auch eine Prüfung auf ausschließlich “MSIE“). Eine PHP-Weiche könnte nun folgendermaßen aussehen:

<?php
    if ((strstr($_SERVER["HTTP_USER_AGENT"], "MSIE 5"))
        ||
        (strstr($_SERVER["HTTP_USER_AGENT"], "MSIE 6"))) {
?>
    <style type="text/css" media="screen">
        /* IE 5-6 : modifiziere Hauptstylesheet
                    oder binde neues ein  */
    </style>
<?php
    } else {
?>
    <style type="text/css" media="screen">
        /* moderne Browser: modifiziere Hauptstylesheet
                            oder binde neues ein  */
    </style><?php
    }
?>

Die Kommentar-Weiche in der HTML

Ein weiterer Weg besteht im Einsatz einer Kommentar-Weiche direkt im HTML-Code, welche der Internet-Explorer versteht. Hier kann sogar ein Versionsvergleich des Browsers eingebaut werden. Das folgende Beispiel definiert eine CSS-Anpassung speziell für den IE zwischen der Version 5.5 und 6.x.

<!--[if lt IE 7]>
<!--[if gte IE 5.500]>
    <style type="text/css">
        /* definiere hier speziell für den Internet Explorer */
    </style>
<![endif]-->
<![endif]-->

Der CSS-Hack

Es ist nicht wirklich schön, aber eine weitere Möglichkeit der Unterscheidung besteht im Ausnutzen der differenzierten Interpretation der CSS-Definitionen. Der Internet Explorer in der Version 5.x-6.x versteht die CSS-Schreibweise “html > body #TagID {}” nicht. Dafür kommt er als einziger mit der Schreibweise “* html #TagID {}” zurecht (für ihn ist also das HTML-Element nicht das Root-Element). So ist es uns möglich, zwei unterschiedliche CSS-Definitionen für ein und dasselbe Element in eine CSS-Datei einzubinden. Dies geht allerdings nur solange gut, wie die Browser entsprechend nicht dazu lernen! (siehe auch: Webseite von Kristof Lipfert).

2. Microsoft-Filterdefinition im CSS

Für den Internet-Explorer muss der Microsoft-Filter AlphaImageLoader im Style-Sheet angegeben werden. Dieser Filter lädt das PNG Bild ein und präsentiert dieses mitsamt der Transparenz. Der Parameter sizingMethod='scale' sorgt dafür, dass das Bild ggf. gestreckt oder in einer Wiederholung dargestellt werden kann.

ACHTUNG: Die Bild-URL in der Filterdefinition darf keine Sonderzeichen, wie z.B. ein Leerzeichen enthalten, ansonsten kann es passieren, das sich das PNG-Hintergrundbild des entsprechenden HTML-Elements (meist DIV) ungewollt an die obere Kante des Vorgänger-Elements ausrichtet! Auch sollte hier die URL immer komplett angegeben werden.

Das folgende Beispiel definiert für ein HTML-Element ein PNG-Hintergrundbild, welches in den unterschiedlichen Browsern mit richtiger Transparenz dargestellt wird (es wird der CSS-Hack eingesetzt).

#elementID {  		     /* für alle Browser gültig */
        /* PNG im Hintergrund wiederholen */
        background-repeat: repeat;
        background-position: center top;
}

html > body #elementID {     /* moderner Browser */
        background: url("./background.png")
}

* html #elementID {          /* Internet Explorer */
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src="http://.../background.png", sizingMethod="scale");
}

3. Herstellen der Link-Funktionalität

HTML-Elemente (z.B. DIV-Tags), welche Links umschließen und eine PNG-Datei als Hintergrundbild enthalten, verhindern im Internet Explorer 5/6 ggf. die korrekte Funktionalität der Hyperlinks. Diese lassen sich meist nicht mehr anklicken. Hier gibt es einen an sich unerklärlichen Trick der angewendet werden muss: die Link-Tags <a> werden mittels CSS explizit relativ positioniert:

*a {position: relative;}

Damit dies auch wirklich zum erwünschten Ergebnis führt, dürfen die Elemente mit PNG-Hintergrund, in denen solche Links enthalten sind, NICHT relativ positioniert werden!