Peter Kröner, Webtechnologie-Erklärbär

Wer kennt es nicht: Man klickt einen Link an und plötzlich geht ungefragt ein neues Browserfenster auf! Wenn man, wie ich, mit einem etwas langsameren Computer unterwegs ist, hat man besonders viel Spaß daran. Dann nämlich kann man sich, vor einem plötzlich losrattenden Rechenknecht sitzend, über das neue Fenster schon ärgern bevor es überhaupt da ist! Verantwortlich ist meist ein Link, der mit target="blank" versehen wurde. Dieser Artikel fordert die Ausrottung dieser nervigen, archaischen und vor allem benutzerfeindlichen Krankheit. Gute Gründe dafür gibt es reichlich.

Mein Computer gehört mir!

Schon 1999 (!) wurde target="blank" von klugen Menschen unter die The Top Ten Web Design Mistakes gewählt:

Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer's carpet. Don't pollute my screen with any more windows, thanks [...] If I want a new window, I will open it myself!

Die einzige Person, die über die Existenz von neuen Browserfenstern zu entscheiden hat, ist und bleibt der Surfer selbst. Mit neuen Fenster läuft man Gefahr, seine Nutzerschaft zu verwirren oder zu verärgern - sei es durch das Fenster oder durch die dann plötzlich nicht mehr funktionierende „Zurück“-Funktion.

Kein Webmaster, Admin oder Blogger kann ernsthaft glauben, dass seine Website so toll ist, dass ein Nutzer im Gegenzug die feindliche Übernahme seines Desktops gutheißt.

target ist ein HTML-Relikt

Das Target-Attribut ist ein Überbleibsel aus der Ära der Framesets. Es diente dazu, festzulegen welcher Teil eines Framesets durch einen Link angesprochen werden sollte. Nun sind Framesets aus gutem Grund mittlerweile ausgestorben und entsprechend ist target auch nur noch in bei den Doctypes „Frameset“ (wie gesagt faktisch ausgestorben) und „Transitional“ (HTML für Warmduscher) erlaubt.

Von solch finsteren Schatten der HTML-Vergangenheit sollte man sich befreien. Wer kein <blink> mehr braucht, der sollte auch ohne target="blank" klarkommen. Nebenbei bemerkt: Für neue Fenster könnte man beim target-Attribut durchaus etwas anderes als _blank einsetzen. Auch target="_gnnnfigte" funktioniert prächtig.

Nicht unerwähnt bleiben sollte auch, dass man neue Fenster mit Javascript erzwingen kann. So missbraucht man kein HTML-Fossil mehr, was aber nichts an den anderen Punkten ändert.

Mehrere Browserfenster sind Schnee von gestern

Wozu braucht man noch mehrere Browserfenster? Selbst der Internet Explorer kennt mittlerweile Tabs. Sich den Desktop mit mehreren Browsern zu verstopfen, ist längst überholt. Sollte trotzdem jemand mehrere Fenster wünschen, so ist das sicher auch ohne HTML-seitige Nachhilfe zu erreichen.

Ja, es gibt die Möglichkeit mit browserspezifischem Code neue Tabs zu erzwingen. Nein, das ist keine gute Idee (siehe feindliche Übernahme des Computers argloser Nutzer).

Gründe für neue Fenster?

Gründe für neue Fenster oder neue Tabs gibt es. Andere Mediatypen wie z.B. PDFs oder die Einträge einer Blogroll können, je nach Lust und Laune des Nutzers, in neuen Fenstern oder Tabs besser aufgehoben sein. Aber darüber hat allein der Surfer zu entscheiden, nicht die Website. Man kann dem Nutzer bei der Entscheidung helfen, indem man externe Links oder besondere Mediatypen kennzeichnet. Aber man kann doch nicht einfach seinen Computer dazu veranlassen, ungefragt irgendwelche Fenster zu öffnen! Deine Website ist so wichtig und toll, dass sie mir diktieren kann wie sich mein Desktop verhält? Wohl kaum.

Zum Abschluss noch ein unverzichtbares Userscript für Opera und Firefox: This script will search for all links on a page, and remove all instances of target="_blank" in the page, so that web sites never, ever opens new windows.

In Listen Grafiken als Aufzählungszeichen zu verwenden ist eigentlich kein Problem. Mit der CSS-Eigenschaft list-style-image lassen sich beliebige Grafiken als Bullets einsetzen, was auch von allen wichtigen Browsern unterstützt wird. Wenn man seine Liste mit dieser Anweisung eine eigene Aufzählungsgrafik verpassen möchte, wird das funktionieren, ohne wenn und aber. Allerdings ist dies unter Umständen nicht gut genug. Dieser Artikel soll zeigen, warum man seine Aufzählungszeichen nicht immer mit list-style-image umsetzen sollte.

Eine Alternative

Wenn wir einmal so tun, als gäbe es list-style-image nicht, wäre es nicht schwer, eine andere auf CSS basierende Lösung zu finden. Man müsste der fraglichen Liste einfach die Standard-Aufzälungszeichen stehlen, das gewünschte Bild als nicht-wiederholende Hintergrundgrafik der <li>-Elemente einsetzen und den Content der <li> einfach per Padding etwas einrücken.

Eine solche Konstruktion könnte in etwa wie folgt aussehen:

ul {
    list-style:none;
}
ul li {
    background:url('bullet.gif') no-repeat left center;
    padding-left:16px;
}

So weit, so logisch. Dass sich das Endergebnis dieses Stylesheets weitgehend mit dem deckt, was auch list-style-image ausgeben würde, ist klar. Viel komplizierter ist diese Methode auch nicht. Aber warum sollte man sie dem altbewährten list-style-image vorziehen?

Das Problem mit list-style-image

Alle Browser unterstützen list-style-image. Aber so etwas bedeutet, wie jeder leidgeprüfte CSSler weiß, noch lange keine einheitliche Darstellung. Bei Aufzählungszeichen fällt das besonders deutlich auf, denn hier kocht wirklich jeder Browser sein eigenes Süppchen und verschiebt die Bullets je nach Lust und Version.

Dieses Problem kennt die Methode mit der Hintergrundgrafik nicht! Dort sitzt die Grafik bei jedem Browser an der gleichen Stelle, was je nach Programm schon einen recht drastischen Unterschied ausmachen kann.

Oben: list-style-image
Unten: Hintergrundbild

Obrige Grafik ist aus dieser Demoseite entstanden, wo beide Methoden in den verschiedenen Browsern verglichen werden können.

Ein weiterer Vorteil: PNG für alte Internet Explorer

Der Internet Explorer 6 unterstützt transparente PNGs nur, wenn man etwas nachhilft. Allerdings funktioniert dieses Nachhelfen nicht bei Aufzählungszeichen, sondern nur bei <img>-Elementen und eben Hintergrundbildern. Ein weiteres Argument für die alternativen Aufzählungszeichen, allerdings sollte nicht vergessen werden, allerdings sollte nicht vergessen werden, dass IE-taugliche PNG-Hintergründe diversen Einschränkungen unterliegen.

Fazit

Die CSS-Eigenschaft list-style-image wird von allen Browsern unterstützt, aber nicht einheitlich dargestellt. Das muss keinesfalls ein Problem sein, nur wenn man seine Aufzählungszeichen exakt platzieren möchte, ist die Hintergrund-Methode die Lösung. Auch wenn transparente PNGs als Bullets zum Einstz kommen sollen (und auch noch im IE6 gut aussehen sollen), kommt man an dieser Methode nicht vorbei.

Das Navigationsmenü von Kram-hochladen.de funktioniert zuverlässig in allen Browsern - sogar im Internet Explorer. Augenscheinlich sogar ohne Javascript und nur mit CSS, was aber, wenn man die IE betrachtet, nur bedingt stimmt. Aufgrund mehrfacher Anfragen habe ich dieses kompaktes Tutorial für die bei KH eingesetzte Art der Navigation geschrieben.

HTML-Struktur

Die Struktur der Navigation setzen wir sinnvollerweise als Liste in HTML um.

<ul id="navi">
  <li><a href="#">Willkommen</a></li>
  <li><a href="#">Über uns</a>
    <ul>
      <li><a href="#">Angebot</a></li>
      <li><a href="#">Geschichte</a></li>
      <li><a href="#">Jobs</a></li>
    </ul>
  </li>
  <li><a href="#">Projekte</a>
    <ul>
      <li><a href="#">Alpha</a></li>
      <li><a href="#">Beta</a></li>
      <li><a href="#">Gamma</a></li>
    </ul>
  </li>
  <li><a href="#">Impressum</a></li>
</ul>

In Sachen HTML ist damit auch schon die Arbeit getan, der Rest ist (fast) komplett mit CSS zu erledigen.

Gestaltung mit CSS

Bevor wir uns an die Funktionalität machen, wird die Liste zunächst optisch etwas zweckdienlicher gestaltet. Vor allem müssen die Listen von ihren üblichen Formatierungsmerkmalen (Aufzählungszeichen, Margins usw.) befreit werden. Wer schlau ist und einen Reset-Stylesheet benutzt, kann sich diesen Schritt natürlich sparen.

#navi, #navi ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

Als nächstes werden die Oberpunkte der Navigation (im Beispiel: Willkommen, Über uns, Projekte und Impressum) horizontal angeordnet und in Form gebracht.

#navi li {
    width:128px;
    float:left;
}

Aufklapp-Funktion mit CSS

Um das Auf- und Einklappen des Menüs zu realisieren, bedienen wir uns der Pseudoklasse :hover. Die Listen mit den Unterpunkten werden ganz einfach ausgeblendet und nur dann angezeigt, wenn ihr Elternelement (das <li> des Oberpunktes) einen Mouseover meldet.

#navi li ul {
    display:none;
}
#navi li:hover ul {
    display:block;
}

Das wäre es eigentlich auch schon... gäbe es da nicht den immer noch verbreiteten Internet Explorer 6.

IE-Tauglichkeit mit HTC

Der IE6 unterstützt :hover ausschließlich für Links. Wie so oft hilft in solchen Fällen ein HTC-Script, mit dem man dem Browser nicht nur PNG-Unterstützung, sondern auch andere moderne Features beibringen kann - so auch :hover-Support für alle Elemente. Das unter LGPL stehende Script whatever:hover ist genau das, was wir brauchen.

Der Einbau erfolgt im Idealfall mittels einem mit Conditional Comments eingebundenen IE-Stylesheet.

body {
    behavior:url("csshover.htc");
}

Schon unterstützt der Internet Explorer :hover als hätte er es immer schon gekonnt. Die Navigation ist damit einsatzbereit.

Schlussbetrachtungen

Wie es die Überschrift des Artikels schon verrät, ganz ohne Javascript geht es eben nicht - eine HTC-Datei enthält nichts anderes als spezialisiertes JS. Das bedeutet auch, dass das Menü in einem Internet Explorer mit abgeschaltetem Javascript streikt.

Damit die Navigation auch schön aussieht, ist natürlich weiteres Styling nötig. Insbesondere müsste das Menü so positioniert werden, dass bei Aus- und Einklappen nicht darunter liegende Elemente verschoben werden. Eine andere Anordnung oder noch tiefere Verschachtelung ist natürlich auch immer möglich.

Wie so eine Navigation aussehen kann, lässt sich auf dieser Beispielseite (mit reichlich kommentierten CSS) betrachten.

Links, die von der eigenen Seite fortführen, kann und sollte man gesondert markieren. Das kommt der Usability zugute und ist auch aus rechtlicher Sicht zumindest nicht schädlich. Auf meiner Seite hier sind externe Links mit einem kleinen Pfeil am Ende gekennzeichnet. Realisiert ist das Ganze mit CSS2-Selektoren, die natürlich im Internet Explorer nicht funktionieren, aber ansonsten sehr bequem sind. So weit, so unspektakulär.

Interessant wird es, wenn man sich einmal ansieht, wie derartige Grafikanhängsel meist eingefügt werden. Oft wird an dieser Stelle weiter fortschrittliches CSS verwendet und man greift zu automatischen Inhalten. Das sieht dann in der Regel so oder ähnlich aus:

/* Erst mal allen Links, die mit http:// beginnen eine Grafik verpassen... */
a[href^="http://"]:link::after, a[href^="http://"]:visited::after {
    content:url("link_normal.png");
}
a[href^="http://"]:hover::after, a[href^="http://"]:active::after {
    content:url("link_hover.png");
}

/* ...und die dann wieder da entfernen, wo es nach dem http:// mit der Adresse MEINER Website weitergeht */
a[href^="http://www.seite.de"]:link::after,
a[href^="http://www.seite.de"]:visited::after,
a[href^="http://www.seite.de"]:hover::after,
a[href^="http://www.seite.de"]:active::after {
    content(" ");
}

Diese Methode funktioniert an sich auch ganz prächtig, aber einiges stört bei diesen mit content:url("") eingefügten Bildern ganz gewaltig: Link und Bild können durch einen Zeilenumbruch voneinander getrennt werden. So steht dann in der einen Zeile ein externer Link ohne Markierung und in der nächsten eine Markierung ohne Link. Hinzu kommt, dass das Entfernen von eingefügten Inhalten problematisch ist, denn je nach Browser ist entweder content:" ";, content:""; oder content:none; die einzige Lösung, die nicht ungewollte Leerstellen oder seltsames Verhalten der Links mit sich bringt.

Die Lösung: Vergessen wir die automatischen Inhalten und nehmen doch wieder Hintergrundbilder zur Hand.

/* Erst mal allen Links, die mit http:// beginnen eine Grafik verpassen... */
a[href^="http://"]:link, a[href^="http://"]:visited {
    padding-right:16px;
    background-image:url("link_normal.png");
    background-repeat:no-repeat;
    background-position:bottom right;
}
a[href^="http://"]:hover, a[href^="http://"]:active {
    padding-right:16px;
    background-image:url("link_hover.png");
    background-repeat:no-repeat;
    background-position:bottom right;
}

/* ...und die dann wieder da entfernen, wo es nach dem http:// mit der Adresse MEINER Website weitergeht */
a[href^="http://www.seite.de"]:link,
a[href^="http://www.seite.de"]:visited,
a[href^="http://www.seite.de"]:hover,
a[href^="http://www.seite.de"]:active {
    background-image:none;
    padding:0;
}

Das führt bei weniger Notwendigkeit für noch nicht ganz ausgereifte CSS2-Implementierungen zum optisch fast identischen Ergebnis, allerdings ohne das Problem bei Zeilenumbrüchen. Nachteilig ist, dass man diese Technik (logischerweise) nicht mit Hintergrundgrafik-Unterstreichungen kombinieren kann. Wer Zeichen statt Grafiken verwenden möchte (z.B. →) kommt ebenfalls an automatischen Inhalten und den damit verbundenen Problemen nicht vorbei.