Mehr als nur für unterstrichene Links gut – das kann das text-decoration-Property
Kommentare

Wer sich ein bisschen mit CSS beschäftigt, weiß, dass das text-decoration-Property in den meisten Browsern automatisch einen unterstrichenen Link erzeugt und dieser mit text-decoration: none; auch wieder entfernt werden kann. Was viele jedoch nicht wissen: man kann mit diesem Property noch einiges mehr anstellen, als Links in Websites zu unterstreichen.

Chris Coyier zeigt, was das ist und welche weiteren Optionen die Zukunft für den Umgang mit dem text-decoration-Property bereithalten könnte.

Style, Farbe und Menge der Text-Dekoration ändern

Nicht nur das text-decoration-Property an sich bietet viele Möglichkeiten zur Text-Gestaltung, die über das simple Unterstreichen von Links hinausgeht, auch seine verschiedenen Sub-Properties ermöglichen eine präzisere Kontrolle über das Aussehen eines Textes.

Dazu gehört zum Beispiel, dass Text mit mehreren Dekorationen gleichzeitig versehen werden kann, zum Beispiel einem Unter- und einem Oberstrich. Genauso kann die Farbe der Dekoration verändert werden. Normalerweise ist die Default-Farbe der Dekorations-Linie die gleiche, wie die Farbe des Textes; mit text-decoration-color lässt sie sich allerdings in jede beliebige Farbe umwandeln.

Auch die Art der Dekoration lässt sich mit text-decoration-style definieren und die Linie statt gerade so zum Beispiel auch gewellt darstellen. Im Gegensatz zur bisher gebräuchlicheren Lösung des border-Properties hat man damit allerdings deutlich mehr Gestaltungmöglichkeiten.

text-decoration-skip soll für bessere Lesbarkeit sorgen

Man kann also mit dem text-decoration-Property schon eine ganze Menge anfangen. In Zukunft soll der Umgang mit unterstrichenem Text allerdings durch ein neues (und bisher noch in keinem Browser implementiertes) Sub-Property verbessert werden. So soll text-decoration-skip künftig einerseits dafür sorgen, Unterlängen zu überspringen, um die Lesbarkeit zu erhöhen. Andererseits sollen auch bestimmte inline-Elemente und Whitespace übersprungen und die Kontrolle der Ränder kontrolliert werden können.

Das klingt nun alles auf den ersten Blick ganz nett, nun kommt aber der Haken: der Browser-Support. Bei dem sieht es, sieht man mal von text-decoration ab, nämlich eher weniger gut aus, vor allem was den Support ohne zusätzliches Präfix angeht. Einzig Firefox unterstützt das text-decoration-style-Property ab Firefox 36 ohne Präfix; Chrome immerhin, wenn die experimentellen Web-Plattform-Features aktiviert sind. Mehr Informationen dazu finden sich im CSS Almanac unter dem jeweiligen Sub-Property-Namen.

Aufmacherbild: blank slate blackboard with a single white chalk line von Shutterstock / Urheberrecht: marekuliasz

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -