CSS text-decoration-skip-ink Eigenschaft
Verwende die CSS-Eigenschaft text-decoration-skip-ink, um festzulegen, wie Unterstreichungen und Überstreichungen gezeichnet werden. Werte und Beispiele.
Die Eigenschaft text-decoration-skip-ink steuert, wie Unterstreichungen und Überstreichungen sich verhalten, wenn sie durch Buchstabenteile verlaufen, die unter die Grundlinie ragen (Unterlängen, wie die Schwänze von „g", „y", „p") oder darüber hinausragen (Oberlängen). Anstatt die Linie gerade durch diese Striche zu ziehen, kann der Browser kleine Lücken lassen, sodass die Linie die Farbe des Glyphen „überspringt" — daher der Name.
Dies ist eine Funktion zur besseren Lesbarkeit. Eine durchgehende Unterstreichung, die ein „g" oder „j" durchschneidet, kann den Text schwerer lesbar machen; das Überspringen der Farbe hält die Unterstreichung optisch sauber. Moderne Browser aktivieren dieses Verhalten standardmäßig (auto), daher wird diese Eigenschaft hauptsächlich verwendet, um es auszuschalten (none), wenn eine durchgehende, ununterbrochene Linie gewünscht wird.
text-decoration-skip-ink betrifft nur die Werte underline und overline der Eigenschaft text-decoration-line. Der Wert line-through verläuft in der Mitte des Textes und kreuzt keine Unterlängen, daher ist er davon nicht betroffen.
Die Eigenschaft text-decoration-skip-ink ist Teil der umfassenderen Kurzschreibweise text-decoration und steht neben text-decoration-line, text-decoration-color und text-decoration-style.
| Initial Value | auto |
|---|---|
| Applies to | Alle Elemente. |
| Inherited | Ja. |
| Animatable | Nein. |
| Version | CSS Text Decoration Module Level 4 |
| DOM Syntax | object.style.textDecorationSkipInk = "none"; |
Syntax
CSS text-decoration-skip-ink Werte
text-decoration-skip-ink: auto | none | initial | inherit;Die Kurzschreibweise akzeptiert auch die globalen Schlüsselwörter initial und inherit. Da die Eigenschaft vererbt wird und standardmäßig auto ist, muss sie selten explizit gesetzt werden — außer um das Überspringen der Farbe zu deaktivieren.
Beispiel der text-decoration-skip-ink Eigenschaft
Das folgende Beispiel zeigt beide Zustände nebeneinander: Der erste Absatz erzwingt eine durchgehende Unterstreichung (none), während der zweite dem Browser erlaubt, die Farbe um Unterlängen zu überspringen (auto). Vergleiche das Verhalten der Linie unter Buchstaben wie „p".
CSS text-decoration-skip-ink Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.ex1 {
margin: 0;
font-size: 2em;
text-decoration: underline #1c87c9;
text-decoration-skip-ink: none;
}
.ex2 {
margin: 0;
font-size: 2em;
text-decoration: underline #1c87c9;
text-decoration-skip-ink: auto;
}
</style>
</head>
<body>
<h2>
Text-decoration-skip-ink property example
</h2>
<h3>
Text-decoration-skip-ink: none;
</h3>
<p class="ex1">
Lorem ipsum is simply dummy text
</p>
<h3>
Text-decoration-skip-ink:auto;
</h3>
<p class="ex2">
Lorem ipsum is simply dummy text
</p>
</body>
</html>Ergebnis
Werte
| Wert | Beschreibung |
|---|---|
| auto | Unterstreichungen und Überstreichungen werden nur dort gezeichnet, wo sie einen Glyphen nicht berühren oder sich ihm nicht stark annähern. Dies ist der Standardwert der Eigenschaft. |
| none | Unterstreichungen und Überstreichungen werden für alle Textinhalte gezeichnet, einschließlich Teile, die Unterlängen und Oberlängen eines Glyphen kreuzen. |
| initial | Setzt die Eigenschaft auf ihren Standardwert. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Wann zu verwenden
- Den Standard beibehalten (
auto) für Fließtext und Links. Es erzeugt sauberere, besser lesbare Unterstreichungen, die Benutzer erwarten, mit automatisch platzierten Lücken um Unterlängen. noneverwenden, wenn ein Design eine durchgehende, ununterbrochene Linie erfordert — zum Beispiel eine bewusst kräftige Unterstreichung als stilistisches Akzent, oder wenn kleine Lücken bei einer bestimmten Schriftgröße wie Rendering-Fehler aussehen.
Ein gängiges Muster ist das Zurücksetzen auf einen bekannten Wert, damit das Rendering in allen Browsern einheitlich ist, die zuvor standardmäßig durch Glyphen gezeichnet haben:
a {
text-decoration-line: underline;
text-decoration-skip-ink: auto; /* explicitly opt in to skipping */
}Browser-Unterstützung
text-decoration-skip-ink wird von allen modernen Browsern unterstützt (Chrome, Edge, Firefox und Safari). Da die Eigenschaft bei fehlender Unterstützung einfach auf eine normale Unterstreichung zurückfällt, ist kein Fallback erforderlich — ältere Browser zeichnen die Linie einfach gerade durch die Glyphen, was immer noch vollkommen lesbar ist.