CSS-Pseudo-Element :first-letter kann IE7 und IE6 zum Absturz bringen

Donnerstag, 30 April 2009 18:05 MET

Thema:
Webgestaltung  
Stichworte:
, , , ,  
 
Schild mit Aufschrift: Gefahr Minen; darunter CSS-Code
CSS-Pseudo-Element :first-letter kann IE7 und IE6 zum Absturz bringen [hyperkontext | Weblog]

Ich zeige hier ein Musterbeispiel, wie der Internet Explorer in Version 5.5 bis 7 zum Absturz gebracht wird, der IE8 ist davon nicht betroffen.

Solch ein Browser-Bug ist extrem schlimm. Ein durchschnittlicher Anwender gerät in Panik und dreht den Rechner ab, vermutet Viren und Würmer auf der Seite, wenn plötzlich alles einfriert.

Der Bug samt Vermeidung ist von Ingo Chao bereits ausreichend dokumentiert worden und hat auch noch andere, weniger dramatische Auswirkungen. In der Praxis offenbart sich der Fehler dann oft verzwickt und unerwartet.

Der IE6, IE7 :first-letter Bug

Im Hinterkopf wusste ich davon irgendwie, in der Praxis ist es dann schon kurios, wie du unerwartet mit solchen Fehlern konfrontiert wirst. Ich brauchte rund eine halbe Stunde, um überhaupt auf die richtige Fährte zu kommen und anschließend mit Hilfe der guten Dokumentation von Ingo Chao den Ursprung letztendlich zu lokalisieren.

Ich zeige hier nur das einfachste Musterbeispiel, wie der Internet Explorer in Version 5.5 bis 7 zum Absturz gebracht wird, der IE8 ist davon nicht betroffen:

CSS:

.klasse {float: left;}
p.klasse:first-letter {font-size:2em;}

HTML:

<p class="klasse"><strong>Fetter</strong> Text.</p>

Warnung

  • Damit friert der IE (kleiner Version 8) ein und kann nur mehr mit dem Task-Manager beendet werden.
  • Konstruieren Sie dieses Beispiel nicht, wenn Sie sich nicht ausreichend auskennen.

Drei Bedingungen, die zum Absturz führen:

  1. Das HTML-Element, welchem :first-letter zugewiesen wird, enthält unmittelbar nach dem öffnenden Tag oder innerhalb des ersten Wortes ein weiteres Inline-Element (zum Beispiel a, span oder auch strong).

  2. Das HTML-Element, dem :first-letter zugewiesen wurde, enthält zum Beispiel position:absolute oder float:left, also triggert für den IE das berüchtigte hasLayout.

  3. Und jetzt kommt das Wichtige in diesem Zusammenspiel, das den Absturz des IE bewirkt:
    Im CSS wird nur .klasse geschrieben. Also ohne vorangestellte explizite Zuweisung.

Die Vermeidung:

  1. Dieser Klasse auf jeden Fall eine Zuweisung geben, also zum Beispiel p.klasse oder div.klasse. Soweit ist das auch schon von anderen dokumentiert worden.
  2. Ich habe noch herausgefunden, dass es alleine schon reicht zum Beispiel html .klasse zu schreiben, um den IE die Sache richtig interpretieren zu lassen und vor allem einen Absturz des Programms zu vermeiden.

Der obige Code, der zum Absturz des Internet Explorer (kleiner Version 8) führt, braucht also nur eine klitzekleine Änderung: html .klasse. Damit ist das Problem behoben.

Der Bug samt Vermeidung ist von Ingo ausreichend dokumentiert worden und hat auch noch andere, weniger dramatische Auswirkungen:
Application instability: another element adjacent to the pseudo-element.

Das kann verzwickt sein

Ich zeige hier noch, wie verzwickt so etwas in der Praxis sein kann, um überhaupt auf die richtige Fährte zu kommen.

Ich schreibe gerne generelle Klassen für Dinge, die ich später in Kombination mit anderen IDs oder Klassen verwenden könnte. Einfaches Beispiel wäre .noborder{border:none;} oder .txtr{ text-align:right;}. Damit kann ich beispielsweise mit <p class="txtr noborder"> schnell einem einzelnen Element eine rechtsbündige Ausrichtung zuweisen, das auch, zum Beispiel im Gegensatz zu allen anderen Absätzen mit einem bestimmten Elternelement, keinen Rahmen hat.

In weiterer Folge lassen sich solche Kombinationen später dann per CSS noch extra formen.
Beispielsweise div.klasse p.txtr.noborder{text-transform:uppercase;}.

Soweit so gut. Ich verwende meine generellen Klassen aber auch so: .rightfloat{float:right;}. So lässt sich ein Textkasten im Textfluss mit einer CSS-Klasse definieren und im HTML-Code entscheide ich dann, ob dieser nach links oder rechts fließt, also zum Beispiel
<p class="textkasten rightfloat">.

Genau diese generelle Klasse .rightfloat beziehungsweise .leftfloat wurde mir dann zur Denkfalle. Ich definierte in einem Projekt eine zusätzliche Klasse, die vereinfacht so aussieht:

div#article p.info { 
padding: 1em;
margin: 1em;
… weiteres optisches blabla
}
div#article p.info:first-letter {
font-size: 2em;
… weiteres optisches blabla
}
div#article p.info.leftfloat, 
div#article p.info.rightfloat { 
width: 32%;
}

Mit den Klassenangaben class="info", class="info leftfloat" oder class="info rightfloat" im HTML ist es nun möglich, nach Wunsch ein bestimmtes visuelles Erscheinungsbild zu erzeugen.

So etwas kann mit einem speziell programmierten Texteditor auch Laien zugänglich gemacht werden, die bei Texterstellung über eine Auswahlbox ganz einfach die Möglichkeit bekommen, einen Absatz als Info zu markieren und die Positionen Mitte, Rechts oder Links wählen.

Nun tritt der Fall ein, dass einer der Texter auf die (durchaus legitime) Idee kommt, den ersten paar Wörtern in dieser Infobox ein strong zu verpassen. Also etwa so:
<p class="info leftfloat"><strong>Fetter</strong> Text bin ich.</p>

Damit sind die vorher gezeigten drei Bedingungen, die zum Absturz eines IE ≤ 7 führen, gegeben.

Als der IE7 im Test nun einfrierte und nur mehr mit dem Task-Manager zu beenden war, hat sich der Gerald dann ganz schnell auf die Suche nach dem Hyperkontext gemacht.

Selbst als ich schon die Fährte dieses IE-Bugs aufgenommen hatte und die Dokumentationen hierzu studierte, brauchte ich noch eine ganze Weile um zu kapieren, dass mit dem neu geschriebenen CSS eigentlich alles in Ordnung war. Das Problem waren die generellen Klassen ohne explizite Zuweisung, die ich in Kombination verwende und in meiner CSS-Basisdatei schlummerten.

Die Lösung lag also in den Basisangaben:
aus .leftfloat und .rightfloat wurde jeweils html .klasse. Bei Gelegenheit wird das gleich in anderen Projekten auch so eingearbeitet.

Schlimme Folgen

Solch ein Browser-Bug ist extrem schlimm. Ein durchschnittlicher Anwender gerät in Panik und dreht den Rechner ab, vermutet Viren und Würmer auf der Seite, wenn plötzlich alles einfriert.

Ich will mir auch gar nicht vorstellen, was da so für Leute mit bösen Absichten vielleicht möglich ist, wenn dieser schlimme Fehler in Kombination mit JavaScript absichtlich getriggert wird.

Und das alles nur wegen einer simplen CSS-Fehlinterpretation eines – uns meist unrühmlich – bekannten Browsers.

Abschnitt 1 von 1

Quellenverweise

Datum:
veröffentlicht am 30 April 2009, 18:05 MET.
Artikel:
CSS-Pseudo-Element :first-letter kann IE7 und IE6 zum Absturz bringen [hyperkontext | Weblog]
Kurz-URL:
http://hyperkontext.at/s/203
Thema:
Webgestaltung 
Stichworte:
, , , ,  
Dieser Eintrag kann nicht mehr kommentiert werden.

Mögliche themenverwandte Artikel aus dem Weblog

Blättern (chronologisch)

« neuerer Artikel
April 2009 im Kontext
älterer Artikel »
Karli Manager: Intranet 2.0 und die Kollaborateure