Übung 5: Links sollen die Textfarbe erben

Hinweise

Lösung

footer a { color: inherit; }

Warum ein Link die Textfarbe nicht von selbst übernimmt

Die Vordergrundfarbe gehört zu den vererbenden Eigenschaften: Ein Element ohne eigene Angabe übernimmt den berechneten Wert seines Elternelements. Bei einem Verweis greift diese Vererbung trotzdem nicht, und der Grund liegt nicht in der Vererbung, sondern in der Kaskade.

Das Vorgabe-Stylesheet des Browsers enthält eine Regel, die Verweisen eine eigene Farbe gibt. Sobald irgendeine Regel die Eigenschaft am Element selbst setzt, ist die Vererbung außen vor – ein geerbter Wert ist gar keine Deklaration und tritt nie gegen eine an. Die Browser-Regel ist zwar die schwächste Herkunft, aber sie ist die einzige, die überhaupt am Verweis ansetzt.

Daraus folgt die Faustregel, die viele Fehlersuchen abkürzt: Wenn ein geerbter Wert nicht ankommt, ist die Frage nicht, welche Regel stärker ist, sondern welche Regel überhaupt am Element selbst ansetzt. Ein einziger Typselektor schlägt jede noch so spezifische Angabe am Elternelement.

Was inherit tut

Das Schlüsselwort inherit ist die ausdrückliche Anweisung, den berechneten Wert des Elternelements zu übernehmen. Es ist damit eine Autor-Deklaration und schlägt die Regel des Browsers – die Vererbung wird also nicht wiederhergestellt, sondern nachgebaut, und zwar auf einer Ebene, die gewinnt.

Der Vorteil gegenüber dem Wiederholen des Farbwerts ist, dass die Angabe an einer Stelle bleibt. Ändert sich die Fußzeilenfarbe, wandern die Verweise mit; ein zweiter hartkodierter Wert würde stehenbleiben und still auseinanderlaufen. Dasselbe leistet eine Custom Property, aber nur, wenn es sie ohnehin schon gibt.

Zu beachten ist, dass inherit für jede Eigenschaft gilt, auch für nicht vererbende. Bei einem Rahmen oder einem Innenabstand ist es sogar die einzige Möglichkeit, den Wert des Elternelements zu übernehmen. Die drei verwandten Schlüsselwörter behandelt der Vergleich inherit vs initial vs unset.

Der Preis: Verweise müssen erkennbar bleiben

Ein Verweis, der farblich nicht mehr vom Fließtext abweicht, ist für sehende Leser nur noch an einem Merkmal zu erkennen – und wenn zusätzlich die Unterstreichung entfernt wurde, an keinem. Die Richtlinien zur Zugänglichkeit verlangen deshalb, dass ein Verweis im Text entweder farblich deutlich abgesetzt ist oder ein zweites, nicht farbliches Merkmal trägt.

In einer Fußzeile mit einer Verweisliste ist das unkritisch, weil dort ohnehin fast alles ein Verweis ist und die Position die Bedeutung trägt. Im Fließtext ist es ein Fehler. Wer die Farbe angleicht, sollte die Unterstreichung also gerade nicht abschalten – die beiden Entscheidungen hängen zusammen.

Nicht vergessen werden dürfen außerdem die Zustände: besucht, unter dem Zeiger, mit dem Tastaturfokus. Der Fokusring kommt vom Browser und sollte bleiben; wer ihn ersetzt, braucht einen sichtbaren Ersatz mit ausreichendem Kontrast.

Die Zustände eines Verweises

Ein Verweis hat mehr als einen Zustand, und die Reihenfolge der Regeln entscheidet, welcher gewinnt. Weil alle Pseudoklassen dieselbe Spezifität haben, gilt die zuletzt notierte – daraus folgt die überlieferte Reihenfolge aus unbesucht, besucht, unter dem Zeiger, gedrückt. Steht der besuchte Zustand hinter dem unter dem Zeiger, ist der Zeigerzustand bei besuchten Verweisen wirkungslos.

Der besuchte Zustand ist dabei eingeschränkt: Aus Datenschutzgründen lassen die Browser dort nur wenige Eigenschaften zu, im Wesentlichen Farben, und sie geben die berechneten Werte nicht an Skripte weiter. Eine besuchte Markierung über eine Hintergrundgrafik oder eine Schriftstärke funktioniert deshalb nicht, und das ist Absicht.

Der wichtigste Zustand ist der Tastaturfokus. Er kommt vom Browser, und er darf nicht ersatzlos entfernt werden – wer die Kontur abschaltet, nimmt allen, die ohne Maus arbeiten, die Orientierung. Die Pseudoklasse, die nur bei Tastaturbedienung greift, löst den alten Zielkonflikt: Der Ring erscheint beim Tabben und bleibt beim Klicken aus. Wer ihn gestaltet, achtet auf ausreichenden Kontrast zum Untergrund und darauf, dass er in der Darstellung mit erzwungenen Farben bestehen bleibt.

Für diese Aufgabe genügt eine Zeile, und der Prüfer misst die berechnete Farbe der Verweise gegen die des umgebenden Textes. Ob dabei das Schlüsselwort für die Vererbung, eine Variable oder ein wiederholter Farbwert zum Einsatz kommt, spielt für die Messung keine Rolle – für die Pflege des Stylesheets schon, und das ist der eigentliche Gegenstand der Übung.

Und wer die Fußzeile später auf eine dunkle Fläche setzt, muss dann genau eine Zeile ändern statt zweier – das ist der ganze Gewinn, und er wird erst beim zweiten Umbau sichtbar.

Fragen zur Übung