CSS-Quiz · Runde 2
CSS-Quiz: Visuelle Formatierung – Teil 2
10 Fragen zu Visuelle Formatierung in CSS 2.1. Jede Antwort wird sofort bewertet und erklärt; das Ergebnis erscheint am Ende der Seite.
Über-bestimmte Boxen
Für eine Box im normalen Fluss muss die waagerechte Rechnung aufgehen: linker Außenabstand, Rahmen, Innenabstand, Breite und dieselben Werte rechts müssen zusammen die Breite des umschließenden Blocks ergeben. Sind alle Werte gesetzt und passt die Summe nicht, ist die Box über-bestimmt – und dann verwirft der Browser eine Angabe: bei linksläufiger Schrift den rechten Außenabstand.
Bei einer absolut positionierten Box gilt dieselbe Logik für die drei Angaben linke Kante, Breite und rechte Kante. Sind alle drei gesetzt und stehen die Außenabstände auf auto, verteilt der Browser den Rest auf sie; sind auch diese gesetzt, wird die rechte Kantenangabe verworfen. Sind dagegen nur zwei der drei gesetzt, ergibt sich die dritte – und genau das ist der übliche Weg, eine Box zwischen zwei Kanten aufzuspannen.
Zu wissen, welche Angabe verworfen wird, erspart eine Klasse von Fehlersuchen: Eine Deklaration steht im Stylesheet, im Prüfwerkzeug ist sie zu sehen, und trotzdem wirkt sie nicht. Sie wurde nicht überschrieben, sondern von der Rechnung verworfen.
Überlauf, Abschneiden und die alte clip-Eigenschaft
Der Überlauf regelt, was mit Inhalt geschieht, der nicht in seine Box passt: sichtbar herausragen, abschneiden, immer rollen oder nur bei Bedarf rollen. Jeder Wert außer dem ersten hat eine Nebenwirkung, die mit dem Überlauf nichts zu tun hat – das Element erzeugt einen eigenen Block-Formatierungskontext und umschließt damit seine umflossenen Kinder. Genau deswegen steht die Deklaration in altem Code oft an Stellen, an denen nichts überläuft.
Die Eigenschaft für den Zuschnitt aus CSS 2.1 nimmt eine Form mit vier Werten entgegen, deren Reihenfolge oben, rechts, unten, links lautet – und alle vier werden von der oberen linken Ecke des Elements aus gemessen, nicht von der jeweiligen Kante. Das ist unintuitiv und einer der Gründe, warum sie kaum benutzt wurde. Sie gilt zudem nur für absolut positionierte Elemente und ist heute durch eine allgemeinere Eigenschaft ersetzt, die beliebige Formen zuschneidet.
Die Schreibrichtung gehört ebenfalls in dieses Kapitel: Eine Eigenschaft setzt die Grundrichtung eines Blocks, eine zweite regelt, wie eingebettete Abschnitte anderer Richtung behandelt werden. Beide gehören zusammen – die Richtung allein genügt nicht, wenn in einem Absatz zwei Schreibrichtungen vorkommen.
Stapelreihenfolge
Ohne eigene Angaben werden Elemente in einer festgelegten Reihenfolge gezeichnet: erst Hintergründe und Rahmen des Wurzelelements, dann Blöcke im normalen Fluss, dann umflossene Elemente, dann Inline-Inhalt, zuletzt positionierte Elemente. Deshalb liegt ein positioniertes Element von sich aus über einem nicht positionierten, ganz ohne Stapelindex.
Der Index greift nur bei positionierten Elementen, und er ist keine globale Rangliste: Ein Element mit einem numerischen Index eröffnet einen eigenen Stapelkontext, und alle seine Nachfahren werden darin einsortiert. Ein Kind mit einem sehr hohen Wert kann deshalb nicht aus dem Kontext seines Elternteils ausbrechen – der berühmte Fall, in dem ein hoher Wert nichts nützt.
Einen Kontext eröffnen inzwischen auch Elemente mit einer Transformation, einer Deckkraft unter eins, einem Filter oder einer Eindämmung – ohne dass sie positioniert wären. Das erklärt Fälle, in denen eine Überlagerung plötzlich hinter etwas verschwindet, nachdem irgendwo weiter oben eine Animation hinzugekommen ist.
Wenn die Zeilenhöhe kleiner ist als die Schriftgröße
Die Zeilenhöhe darf kleiner sein als die Schriftgröße, und CSS verbietet nichts davon. Die Differenz zwischen beiden wird gleichmäßig auf beide Seiten des Textes verteilt – ist sie negativ, wird also von oben und unten je die Hälfte abgezogen, und die Zeilen rücken enger zusammen, als die Buchstaben hoch sind. Bei mehrzeiligem Text überlappen sie sich.
Sinnvoll ist das an genau einer Stelle: bei sehr großen Überschriften, deren Zeilen bei einer Zeilenhöhe von eins bereits zu weit auseinanderstehen. Ein Wert knapp unter eins wirkt dort ruhiger, solange die Schrift keine ausgeprägten Ober- und Unterlängen hat. Bei Fließtext ist es immer ein Fehler.
Zu beachten ist, dass die Zeilenbox nicht die einzige Größe ist, die zählt: Ein Inline-Element mit eigener, größerer Schrift oder eigener Zeilenhöhe zieht die Zeile wieder auseinander, weil die Zeilenbox alle Inline-Boxen darin umfassen muss. Deshalb springt der Zeilenabstand in einem Absatz, sobald darin ein hochgestelltes Zeichen oder ein Stück Festbreitenschrift vorkommt – und deshalb bekommen solche Elemente oft ausdrücklich eine Zeilenhöhe von null.