Zum Textbeginn springen Zur Navigation springen

Cascading Style Sheets ::Tutorials

CSS-Hacks am Box- Modell

Das Box- Modell beschreibt die Darstellung der Vierecke, mit deren Hilfe jedes Element innerhalb eines Webdokuments abgebildet wird. Es ist essentiell, dass die Vorgaben dieses Modells durch alle Browser korrekt umgesetzt werden. Leider ist das bei einigen Browsern, namentlich IE/Win 5.x noch nicht der Fall, deshalb wurden für solche Browser eine Reihe von Hacks entwickelt, mit denen die korrekte Darstellung erreicht werden kann. Auf dieser Seite werden der originale BMH, der vereinfachte BMH, eine Modifikation davon und der Caio-Hack erklärt.

Wie funktionieren Hacks und Filter?

Hier ist ein kurzer Exkurs über die Arbeitsweise von Hacks im Allgemeinen angebracht. Die meisten CSS-Hacks bestehen aus zwei Teilen: einer Regel oder Deklaration, die den eigentlichen Hack darstellt und die nur von bestimmten Browsern erkannt werden soll. Der zweite Teil ist eine andere Deklaration, die den Filter darstellt. Diese Deklaration funktioniert nur in einem Teil der Browser fehlerfrei und ist deshalb geeignet, den Hack von einem Teil der Browser abzuschirmen. Im folgenden Beispiel werden die 'CSS-Hacks' durch die Zeichenfolge * html abgeschirmt. Nur Browser, die diese Zeichenfolge erkennen, interpretieren auch die 'CSS-Hacks'.

* html { ... (CSS-Hacks) ... }

Das Problem am Box-Modell

Der Browser IE/Win 5.0 und sein Nachfolger IE/Win 5.5 waren unter den ersten Browsern, die mit dem Box- Modell etwas anfangen konnten. Leider ist das Box- Modell in diesen Browsern noch nicht hundertprozentig korrekt implementiert. Sie interpretieren das Box- Modell so, dass sie padding und border eines Elements als Teil der deklarierten Dimensionen 'verstehen'. Padding und border werden also zuerst von den deklarierten Dimensionen abgezogen. Was dann noch als 'Content'-Fläche übrig bleibt, wird für die Darstellung des Inhalts verwendet. Deshalb stellen sie Elemente immer dann falsch dar, wenn padding und border angegeben sind.

Block- Box, dargestellt entsprechend dem Standard und im IE/Win 5.x (Erläuterung siehe Text).
Größe der Box: width: 240px; height: 164px;. Weitere Deklarationen: padding: 50px; border: 20px; margin: 45px;.

Wie sich das in der Praxis auswirkt, erkennt man im Bild rechts. Es zeigt die standardsgemäße Darstellung einer Box mit den in der Bildunterschrift aufgeführten Eigenschaften. Wenn Sie mit dem Mauszeiger über das Bild fahren, sehen Sie, wie dieselbe Box durch IE/Win 5.x abgebildet wird. Das rote Rechteck ist immer gleich groß und markiert die deklarierte Größe der Box. Man erkennt deutlich, wie der IE/Win 5.x das padding und border in die deklarierte Box hineinzieht und die Contentfläche dadurch stark verkleinert.

(Kommt dazu noch das Verhalten des IE/Win bezüglich der Eigenschaft overflow mit ins Spiel, wird das Verhalten dieses Browsers fast unvorhersagbar.)

Mit den in der Bildlegende angegebenen Deklarationen haben Inhalt und umschließende Box des Beispiels die folgenden Dimensionen:

Breite des Inhalts:: 240px (deklarierter Wert)
Höhe des Inhalts:: 180px (deklarierter Wert)
Breite der umschließenden Box:: 45px + 20px + 50px + 240px + 50px + 20px + 45px = 470px
Höhe der umschließenden Box:: 45px + 20px + 50px + 164px + 50px + 20px + 45px = 394px

Hier zum Vergleich die Abmessungen bei Darstellung durch den IE/Win 5.x:

Breite des Inhalts:: 240px -20px - 50px - 50px - 20px = 100px
Höhe des Inhalts:: 164px -20px - 50px - 50px - 20px = 24px
Breite der umschließenden Box:: 45px + 240px + 45px = 330px
Höhe der umschließenden Box:: 45px + 180px + 45px = 270px

Tantek Celik, Chefentwickler für Microsoft's Browser, hat das Problem zuerst beschrieben und als Lösung gleich den inzwischen bekannten 'box model hack' mitgeliefert (der deshalb auch Tantek-Hack genannt wird). Damit lassen sich CSS-Regeln so kodieren, dass sie durch IE/Win 5.x genauso wie in allen anderen Browsern dargestellt werden.

Der Original-Box- Modell-Hack

Der erste entwickelte BMH diente nur dem Zweck, die fehlerhafte Darstellung des Box- Modells in IE/Win 5.0 und IE/Win 5.5 zu korrigieren.

Um den Trick zu erkennen, betrachten wir zuerst die Regel für unsere Beispielbox aus dem Bild oben rechts:

div.content { padding: 50px; border: 20px solid; margin: 45px; width: 240px; height: 180px; }

Im folgenden Beispiel ist unsere Regel um die Deklarationen des Tantek-Hacks erweitert. Die Regel ist hier mit den Angaben zur Höhe und Breite gezeigt. Wer nur width deklarieren möchte, kann die Angaben zur Höhe selbstverständlich weglassen.

div.content { padding: 50px; border: 20px solid; margin: 45px; width: 380px; height: 320px; voice-family: "\"}\""; voice-family:inherit; width: 240px; height: 180px; } html>body .content { width: 240px; height: 180px; }

Das sieht einigermaßen wild aus, ist aber durchaus valide. Die Funktionsweise dieses Hacks läßt sich am besten erkennen, wenn wir die Deklarationen einzeln betrachten. Zunächst sehen wir uns die ersten beiden zusätzlich eingefügten Angaben für Länge und Höhe an:

width: 380px; height: 320px;

Diese Werte ergeben sich, wenn wir zu den ursprünglichen Werten für width und height jeweils die Werte von padding und border addieren. Damit werden die Abmessungen des Contents soweit vergrößert, dass Browser wie IE/Win 5.x die Box trotz des Box- Modell-Bugs in der richtigen Größe darstellen.

voice-family: "\"}\"";

Um diese Deklaration zu verstehen, erinnern wir uns, dass CSS auch über eigene Escape- Sequenzen verfügt. In diesem Fall wirken sie so, dass dem zweiten und dritten Anführungszeichen ihre delimitierenden Eigenschaften genommen werden. Stattdessen sind sie nur noch Teil der Zeichenkette "}", die durch das erste und vierte Anführungszeichen eingefaßt ist.

Zugegeben, dies ist ein etwas merkwürdiger Wert, er hat aber seinen Sinn, denn hier wird ein anderer Fehler des IE/Win 5.x ausgenutzt. Da er keine Escape-Zeichen erkennt, interpretiert er das erste Zeichen \ als den deklarierten Wert und die geschweifte Klammer } als Ende der Regel. Alle weiteren darauf folgenden Zeichen beachtet er einfach nicht mehr.

Korrekt arbeitende Browser lesen diese Deklaration daher so:

voice-family: "'}'";

IE/Win 5.x interpretiert sie so:

voice-family: "\"}

Die darauf folgende Deklaration dient nur der Rücksetzung dieses Wertes auf den ererbten Wert:

voice-family: inherit;

Da IE/Win 5 ja jetzt nicht mehr dabei ist, sieht er diese Zeile nicht mehr. Für standardstreue Browser wird der Wert für voice-family wieder auf seinen ursprünglichen Wert zurückgesetzt.

Im Grunde genommen funktioniert dieser Hack mit jeder anderen Eigenschaft ebenso gut wie mit voice-family. Durch die Wahl von voice-family ist man aber relativ sicher vor unerwarteten Nebenwirkungen, da bisher noch kein Browser diese Eigenschaft unterstützt.

width: 240px; height: 180px;

Nachdem IE/Win 5 oben bei der letzten geschweiften Klammer ausgestiegen ist, folgen hier nun für standardstreue Browser die gewünschten Abmessungen der Box. Aufgrud der Kaskadierung haben sie Vorrang vor den weiter oben notierten Deklarationen.

Nun bleibt uns nur noch, die zusätzlich eingefügte Regel zu erklären:

html>body .content { width: 240px; height: 180px; }

Sie ist da für alle Browser, die zwar CSS 2 und das Box- Modell bereits richtig unterstützen, aber dennoch bezüglich der Escape- Sequenz denselben Bug wie IE/Win 5 aufweisen. Dies ist insbesondere bei Opera bis Version 5 der Fall.

Da diese Browser nach dem Wert "\"}\"" oben ebenfalls aussteigen, benötigen wir eine weitere Regel, um ihnen die korrekten Dimensionen mitzuteilen. Wichtig ist hierbei, dass das Zeichen '>' nicht von Leerzeichen eingefaßt wird. IE/Win kann diese Regel nicht lesen, da er den Kindselektor '>' nicht versteht.

Der vereinfachte Box- Modell-Hack

Ein Problem des originalen BMH ist, dass er auf dem Element voice-family aufbaut. Wie oben bereits angedeutet wurde, sind wir nicht hundertprozentig sicher vor eventuellen Nebenwirkungen. Deshalb lag die Idee nicht fern, auf voice-family zu verzichten und die Escape- Sequenz an den Eigenschaften anzuwenden, die sowieso bereits vorhanden sind: width bzw. height.

Damit diese vereinfachte Form richtig funktioniert, müssen wir jede der notwendigen Re-Deklarationen in einer eigenen Regel unterbringen, wir werden später noch sehen, warum. Diese Regeln bekommen damit folgendes Aussehen (und nebenbei validieren sie ohne Probleme):

div.content { padding: 50px; border: 20px solid; margin: 45px; width: 240px; height: 180px; } div.content { \width: 380px; } div.content { \height: 320px; } div.content { widt\h: 240px; } div.content { heigh\t: 180px; }

Es ist wichtig, dass die Aufteilung in einzelne Regeln wie gezeigt eingehalten wird.

Wie wir sehen, stehen die Deklarationen hier in einer etwas anderen Reihenfolge wie im Original-BMH: zuerst erscheinen die korrekten Deklarationen ohne jede Escape- Sequenz. Sie können damit von allen CSS-fähigen Browsern verarbeitet werden.

Bei den nächsten beiden Regeln beginnt sich bereits die Spreu vom Weizen zu trennen:

div.content { \width: 380px; } div.content { \height: 320px; }

Browser, die keine Escape- Sequenzen verstehen, einschließlich IE/Win 5, werden diese Regeln im Normalfall überspringen. Das ist auch der Grund, warum jede Deklaration in eine eigene Regel eingefaßt wurde. So ist sichergestellt, dass keine weiteren Deklarationen übersprungen werden, wenn ein Browser die Verarbeitung einer Regel abbricht.

Browser, die zwar das Box- Modell korrekt darstellen, aber dennoch bezüglich der Escape- Sequenz denselben Bug aufweisen, werden hier automatisch mit aussortiert. Wir benötigen also hier keine zusätzliche Regel für Opera 5 wie im ersten BMH.

IE/Win 5 zeigt aber nun noch eine Besonderheit: wenn er auch eine Eigenschaft oder einen Wert nicht erkennt, sobald sie ein Escape-Zeichen enthalten, spielt dasselbe Zeichen für ihn keine Rolle, wenn es vor dem Wert oder der Eigenschaft steht. Deshalb dienen diese beiden Deklarationen praktisch als Filter für alle Non-Standard-Browser mit Ausnahme des IE/Win 5. Hier re-deklarieren wir die Werte der beiden Eigenschaften passend für IE/Win 5.

Die letzten beiden Zeilen sind dann nur noch für standardstreue Browser lesbar:

div.content { widt\h: 240px; } div.content { heigh\t: 180px; }

Mit diesen Anweisungen werden beide Eigenschaften wieder auf die richtigen Werte zurückdeklariert. Es spielt (fast) keine Rolle, an welcher Stelle der Schrägstrich \ eingefügt wird, da moderne Browser, ebenso wie der CSS-Validator, widt\h als genau dasselbe ansehen wie width oder w\idth.

Es gibt nur eine Einschränkung: Escape-Zeichen haben eigentlich den Sinn, mit Hilfe der Hexadezimalcodierung Sonderzeichen einzufügen. Deshalb dürfen sie im Rahmen dieses Hacks nicht vor den Zeichen 'a' bis 'f' und '0' bis '9' stehen. Auch für Eigenschaften, die mit einem dieser Zeichen beginnen, wie background oder font, ist dieser Hack nicht anwendbar. (Er wurde zwar für das Box- Modell entwickelt, läßt sich aber technisch auch für andere Eigenschaften nutzen.)

Der vereinfachte Box-Model-Hack wurde von seinem Entwickler, Andrew Clover, der 'Vereinfachte Box- Modell-Hack' genannt. Im Grunde genommen hat er aber mit dem Tantek-Hack nur die Verwendung des Escape-Zeichens gemeinsam. Gerade dieses Zeichen bereitet uns jedoch ein besonderes Problem bei der Darstellung durch NN 4.

Netscape Navigator 4.x

Es ist nichts ungewöhnliches bei der Verwendung von solchen Hacks, dass man sich die Korrektur im Fehlverhalten eines Browsers mit neuen Problemen im Verhalten eines anderen Browsers erkauft. So auch hier: soll ein Stylesheet auch durch den NN 4 verarbeitet werden, ist die Verwendung des Backslash \ absolut verboten! NN 4 steigt nicht nur aus der Verarbeitung einer Regel aus, wenn er das Escapezeichen findet, sondern er verwirft das Stylesheet insgesamt und stellt das Webdokument als reines Textdokument dar.

Nun ist es bereits nichts neues mehr und weithin bekannt, wie man Stylesheets vor NN 4 verstecken kann. Wir können aber nicht jede Regel, die wir vor dem NN 4 verbergen wollen, mit einem @import hereinholen.

Deshalb verwenden wir den von Caio Chassot entwickelten Comment-Hack. Um ihn zu erklären, wollen wir uns zuerst wieder ein Codebeispiel ansehen:

/* eigenschaft { deklarationen } */

Die Regeln innerhalb eines Kommentars werden von allen Browsern übergegangen. Ein Kommentar in CSS kann durchaus auch mehrere Zeilen umfassen oder, wie im Beispiel, vollständige Regeln enthalten. Jetzt wollen wir uns einen anderen Kommentar ansehen:

/*/*/

Dies ist ein gültiger Kommentar, der nur aus einem Schrägstrich besteht. Fast alle Browser interpretieren ihn auch so, Ausnahme ist hier nur NN 4. Er läßt sich durch den mittleren Schrägstrich verwirren und liest das Konstrukt als doppelten Kommentar-Starttag. Das heißt, alles was hierauf folgt, ist aus Sicht des NN 4 Teil eines Kommentars. Diesen NN-4-Spezialkommentar beenden wir mit einem einfachen, leeren Kommentar. NN 4 ignoriert zwar den Starttag davon, erkennt aber ganz richtig den Endtag und damit das Ende des Kommentars.

/*/*/ eigenschaft { deklarationen } /* */

Die im Beispiel genannten CSS-Regeln werden mit Ausnahme des NN 4 von allen Browsern erkannt. Wenn wir jetzt den Caio-Hack auf unseren bereits entwickelten Code anwenden, stehen die NN-4-kritischen Regeln innerhalb des NN-4-Spezialkommentars und werden so vor NN 4 abgeschirmt. Das sieht so aus und ist auch valides CSS:

div.content { padding: 50px; border: 20px solid; margin: 45px; width: 240px; height: 180px; } /*/*/ div.content { \width: 380px; } div.content { \width: 380px; } div.content { \height: 320px; } div.content { widt\h: 240px; } div.content { heigh\t: 180px; } /* */

Dass die erste Regel nach dem /*/*/ verdoppelt ist, hat ganz einfach den Grund, dass Opera 5 die erste Regel innerhalb des 'Kommentars' übergeht. Man muß sie deshalb entweder doppelt notieren oder eine inhaltslose Dummyregel einfügen. Das ist alles.

Modifizierte Version des vereinfachten Box- Modell-Hacks.

Auch der vereinfachte BMH ist noch nicht das Ende der Entwicklung, denn ein weiterer Bug des IE/Win hat eine geänderte Version möglich gemacht, die ohne Einschränkungen nutzbar ist.

Grundlage dieser Version ist ein Fehler des Internet Explorer, der mit dem Universal-Selektor zu tun hat. Deshalb soll hier eine kurze Erklärung dieses Bugs eingeschoben werden.

Der `*`-`html`-Selektor-Bug

Wie wir wissen, ist html das Stammelement jedes Webdokuments, d.h. es kann im Dokumentstammbaum kein Vorfahrenelement haben. Dennoch könnten wir nun theoretisch hergehen und eine Regel konstruieren, in deren Selektor das Stammelement als Kind eines beliebigen anderen Elements auftritt. So ein Selektor kann mit keinem Element eines Webdokuments zusammenpassen, weil das Element html keine Vorfahren- Elemente hat. Hier sind zwei Beispiele, die so eine Regel in die Praxis umsetzen:

* html { Deklarationen }

* html div#main-text p.shstest { color: green; background-color: #ddd; font-weight: bold; }

Aus der Sicht der CSS-Grammatik sind solche Regeln absolut gültig und validieren problemlos, dennoch wird kein moderner Browser (selbst NN 4 nicht) ein für solche Selektoren passendes Subjekt finden — mit Ausnahme des IE/Win, denn er interpretiert die Regeln folgendermaßen:

html { Deklarationen }

html div#main-text p.shstest { color: green; background-color: #ddd; font-weight: bold; }

Durch Abschneiden des ersten Universal-Selektors erzeugt IE/Win hier ganz neue Regeln. Diese Verhaltensweise findet sich seit Version 4.0 in jeder Neuauflage des IE/Win, aber auch im IE/Mac 5.x. (Auch wenn es nicht so aussieht, dies ist ein Fehler, kein von den Entwicklern gewolltes Verhalten.) Nicht erkennbar ist dieses Gebaren in allen Browsern, die mit der Gecko-Engine arbeiten, ebenfalls nicht in NN 4.x, in allen Versionen des Opera oder Safari, es ist also ausschließlich auf den IE beschränkt.

Achtung:
Der *-html-Selektor-Bug ist im IE/Win 7 im Strict-Modus behoben und tritt nur noch im Quirks-Modus auf. Das kann unter Umständen für Layouts, die mit diesem Bug arbeiten und auf dem Strict-Modus basieren, weit reichende Folgen haben.

Der nachfolgende, eingerahmte, Absatz wurde mit der obenstehenden Regel formatiert und kann als kleines Beispiel für das angesprochene Verhalten gelten:

Für alle anderen Browser ist dies ein Absatz, der nicht weiter auffällt, mit schwarzer, normaler Schrift auf hellem Grund. Der IE bis Version 6 dagegen bringt ihn in fetter, grüner Schrift auf grauem Hintergrund.

Der Tan-Hack

Wenn wir uns den eingerahmten Satz in verschieden Browsern ansehen, erkennen wir, dass einzig der Internet Explorer die so deklarierten Regeln in eine Darstellung umsetzt. Das gibt uns die Möglichkeit, Regeln zu definieren, die ausschließlich für den IE gelten. Diese Regeln werden nach ihrem Entwickler Edwardson Tan auch oft als Tan-Hack bezeichnet. Als praktisches Beispiel verwenden wir jetzt wieder unsere Box aus dem ersten Absatz und ergänzen die notwendigen IE-spezifischen Instruktionen:

div.content { padding: 50px; border: 20px solid; margin: 45px; width: 240px; height: 180px; } * html div.content { width: 380px; widt\h: 240px; } * html div.content { height: 320px; heigh\t: 180px; }

An erster Stelle stehen auch hier die Deklarationen der Originalregel für Breite und Höhe. Die danach folgende Regel enthält zwei verschiedene Werte für die Breite: zuerst leicht erkennbar ein 'Spezial'-wert für das unvollkommene Box- Modell des IE/Win 5, darunter der korrekte Wert. Aber wozu dient der Schrägstrich? Richtig: IE/Win 6 stellt zwar das Box- Modell standardstreu dar, ist unabhängig davon aber auch mit dem '*-html'-Fehler behaftet. Deshalb wurde hier diese Deklaration eingefügt, die IE/Win 5 nicht versteht, die aber den Wert für IE/Win 6 auf das richtige Maß zurückdeklariert.

Derselbe Vorgang wird in der dritten Regel für die Festlegung der Höhe wiederholt. Wir sollten für jede Eigenschaft eine eigene Regel notieren. Dadurch stellen wir sicher, dass IE/Win 5 keine Deklaration überspringt, wenn er aufgrund des '/' aus einer Regel vorzeitig aussteigt.

Wer möchte, kann auch diesen Hack mit dem Caio-Hack NN-4-sicher machen:

div.content { padding: 50px; border: 20px solid; margin: 45px; width: 240px; height: 180px; } * html div.content { width: 380px; /*/*/widt\h: 240px; /* */ } * html div.content { height: 320px; /*/*/heigh\t: 180px; /* */ }

Wenn man die Kommentare innerhalb einer Regel einfügt, sodass sie nur eine Deklaration umfassen, dann kann auch die Dummyregel für Opera 5 entfallen. Man sollte den Caio-Hack aber nicht mehr als einmal innerhalb einer Regel notieren, anderenfalls sind die Ergebnisse nicht mehr vorhersagbar. Aus demselben Grund sollte der Caio-Hack möglichst die erste Deklaration einer Regel mit umfassen. Das ist in unserem Beispiel nicht so, denn die Deklaration mit dem Backslash \ muß in diesem Hack an zweiter Stelle stehen, damit er richtig funktioniert.

Der Kommentar-Backslash-Hack

IE/Win 6 im Quirks-Modus wird das Box- Modell so wie IE/Win 5 interpretieren, auch wenn wir den Tan-Hack verwenden. Er lässt sich nicht durch die Escape- Sequenz täuschen und wird deshalb jeden Block deutlich kleiner als gewollt darstellen. Wenn wir diesen Hack anwenden, sollten wir sicherstellen, dass wir den richtigen Doctype verwenden, damit IE/Win 6 im Standardsmodus arbeitet.

Immer ist das aber nicht möglich. Manchmal sind wir aus verschiedenen Gründen gezwungen, im Quirksmodus zu arbeiten, doch auch dafür gibt es eine Lösung. Zuerst entfernen wir die zweite Deklaration des Tan-Hacks (die den Backslash enthält). Dadurch werden alle IE-Browser wieder gezwungen, die Box in ihrer korrekten Größe auszugeben. IE/Win 6 erhält denselben Wert wie IE/Win 5.x.

Damit hat sich das Problem auf den IE/Mac 5.x verlagert, denn der kennt keinen Quirksmodus. Wir müssen also die für IE/Win gedachten Deklarationen vor IE/Mac verstecken. Dazu verwenden wir den Kommentar-Backslash-Hack.

Wenn wir einen Backslash direkt vor das Ende eines CSS-Kommentars platzieren, erkennt jeder Browser mit Ausnahme des IE/Mac dennoch das Kommentarende. Nur IE/Mac interpretiert ihn als Escape- Sequenz und erkennt das Ende des Kommentars nicht. Alle folgenden Zeilen bis zum nächsten */ interpretiert er weiterhin als Kommentar. Der zweite Kommentar ist deshalb nur für den IE/Mac da und die Zeilen zwischen den Kommentaren werden von allen Browsern mit Ausnahme des IE/Mac erkannt.

div.content { padding: 50px; border: 20px solid; margin: 45px; width: 240px; height: 180px; } /* CSS-Kommentar vor dem Hack \*/ * html div.content { width: 380px; } * html div.content { height: 320px; /* CSS-Kommentar nach dem Hack */ }

Schlußbemerkung

Jeder der vorgestellten Hacks hat seine eigenen Vor- und Nachteile. Beim Tantek-Hack fällt sicherlich zuerst seine fehlende Eleganz und sein relativ unverständliches Erscheinungsbild auf. Das wird ein wenig besser, wenn wir auf Opera 5 keine Rücksicht zu nehmen brauchen und die zweite Regel weglassen können. Darüber hinaus können wir davon ausgehen, dass IE/Win 5 längst vom Markt verschwunden sein wird, wenn die ersten Browser voice-family realisieren.

Die anderen beiden Hacks bauen besonders stark auf das Escape-Zeichen, das alle modernen Browser korrekt interpretieren. Kompliziert werden sie erst durch die Spezialität für NN 4, die man aber höchstwahrscheinlich in den meisten heute hergestellten Websites nicht mehr braucht.
TOP

Nachtrag 12-Feb-2005:
Die am 23. Dezember 2004 vorgestellte Betaversion des Browsers Opera 8 unterstützt bereits in Teilen die Eigenschaften des CSS-3-Moduls Speech. Erste Testseiten belegen auch die Unterstützung der Eigenschaft voice-family. Hier müsste in Kürze evaluiert werden, wie man unerwünschte Nebenwirkungen des Tantek-Hack für Opera 8+ vermeidet. Eine Möglichkeit wäre sicherlich die, angesichts immer kleiner werdender Benutzerzahlen des IE/Win 5 auf den Tantek-Hack mittels voice-family ganz zu verzichten.