CSS-Oktagon

Woraus die Form entsteht

Die Technik nutzt eine Eigenheit, die in der Spezifikation nur beiläufig festgehalten ist: Wo zwei Rahmenseiten aufeinandertreffen, verläuft die Trennung als Diagonale. Bei einem gewöhnlichen Kasten fällt das kaum auf, weil die Rahmen dünn sind und dieselbe Farbe tragen. Gibt man jeder Seite eine andere Farbe und macht die Rahmen sehr breit, wird die Diagonale sichtbar – aus vier Rahmenseiten werden vier Dreiecke.

Schrumpft man Inhalt und Innenabstand auf null, treffen sich alle vier in der Mitte, und der Kasten besteht nur noch aus vier Dreiecken. Setzt man drei davon auf durchsichtig, bleibt ein einzelnes Dreieck übrig – die bekannteste Anwendung, mit der jahrelang Sprechblasen und Ausklapppfeile gebaut wurden. Ein Achteck entsteht, indem man diese Bausteine so kombiniert, dass die schrägen Kanten die Ecken eines Quadrats abschneiden.

Warum man das damals tat

Der Grund war nicht Spielerei, sondern Ladezeit. Jede Grafik bedeutete eine eigene Anfrage an den Server, und über eine Modemverbindung war das teuer – eine Seite mit zwölf kleinen Zierbildern lud spürbar langsamer als eine ohne. Eine Form, die vollständig aus Rahmen bestand, kostete keine einzige zusätzliche Anfrage und skalierte außerdem mit der Schriftgröße.

Dazu kam, dass Grafikformate mit weichen Kanten damals unzuverlässig waren: Das eine Format beherrschte keine teilweise Durchsichtigkeit, das andere wurde von einem verbreiteten Browser falsch dargestellt. Eine mit Rahmen gezeichnete Form hatte dieses Problem nicht, weil sie überhaupt kein Bild war. Beide Gründe sind heute weggefallen, und mit ihnen der Anlass für die Technik – nicht aber ihre Erklärkraft: Wer einmal nachvollzogen hat, warum vier Rahmen vier Dreiecke ergeben, hat das Box-Modell verstanden.

Wie man eine solche Form heute zeichnet

Für dieselbe Aufgabe gibt es inzwischen mehrere direkte Wege. Eine Eigenschaft beschneidet ein Element entlang eines beliebigen Vielecks, dessen Eckpunkte in Prozent angegeben werden – ein Achteck ist damit eine einzige Zeile. Runde Formen entstehen über den Eckenradius, komplexere über eine eingebettete Vektorgrafik, die zugleich beliebig genau und beliebig skalierbar ist.

Für Sprechblasen und Pfeile hat sich außerdem der gedrehte Kasten durchgesetzt: ein kleines Quadrat, um fünfundvierzig Grad gedreht und halb hinter das Element geschoben. Das ist weniger Code als die Dreieckstechnik und lässt sich mit Rahmen und Schatten versehen, was ein Rahmen-Dreieck nicht kann. Gemeinsam ist allen Verfahren, dass eine rein dekorative Form für die Sprachausgabe unsichtbar bleiben sollte – sie trägt keine Bedeutung, und ein Pseudoelement ohne Inhalt ist dafür der sauberste Weg.

Die Farbangaben aus dem Beispiel

Die Farben im Beispiel stehen als benannte Werte neben ihrer Schreibweise in Hexadezimalziffern. CSS 2.1 kennt siebzehn solcher Namen, darunter die im Beispiel verwendeten – sie stammen aus der Palette einer frühen Bedienoberfläche und decken die Grundfarben in einer gedämpften und einer kräftigen Variante ab. Später sind rund hundertvierzig weitere hinzugekommen, die aus einer Farbliste des Fenstersystems eines Betriebssystems stammen und deshalb Namen wie Papayapeitsche tragen.

Für die Praxis sind die Namen bequem und ungenau: Sie lassen sich nicht abstufen, nicht berechnen und nicht in ein Farbschema einpassen. Eine hexadezimale Angabe oder eine der späteren Farbfunktionen ist überall dort vorzuziehen, wo eine Farbe zu anderen passen muss. Als Merkposten im Quelltext eines Beispiels sind sie dagegen unschlagbar – man sieht auf einen Blick, welche Fläche gemeint ist.