text-decoration-skip-ink

text-decoration-skip-ink ist eine Eigenschaft, die das Verhalten von underline und overline (aber nicht von line-through) steuert, wenn die Linie durch einen Teil eines Zeichens/Glyphen verläuft. Dies gibt Ihnen eine feine Kontrolle darüber, wie Unter- oder Oberstriche mit den Zeichen interagieren, die über den oberen oder unter den unteren Rand einer Linie hinausragen.

Zuvor wurde dies über die Eigenschaft/Wert-Kombination text-decoration-skip: ink; gehandhabt. Nach Diskussionen darüber, wie das Problem von kaskadierenden Stilen gehandhabt werden soll, die unbeabsichtigt Stile mit niedrigerer Priorität überschreiben (aufgrund der Anzahl der verfügbaren Optionen für text-decoration-skip), werden die einzelnen Eigenschaften in neue Eigenschaften wie text-decoration-skip-ink aufgeteilt. Weitere Kontexte und Beispiele, warum dies geändert wurde, finden Sie in dieser GitHub-Diskussion und in den Protokollen der CSS Working Group, die die Eigenschaften diskutieren.

Standardmäßig "überspringen" Browser Bereiche, in denen die "Tinte" eines Zeichens einen Unterstrich kreuzt, wie hier:

Text with underline not cutting through characters

Sie können dieses Verhalten ändern, um zu erzwingen, dass der Unter- oder Oberstrich durch das Zeichen verläuft, indem Sie text-decoration-skip-ink auf none setzen.

.line-of-text-thats-already-underlined {
  text-decoration-skip-ink: none;
}

Dies führt dazu, dass die Linie genau durch die Zeichen schneidet.

Text with underline cutting through characters

Syntax

text-decoration-skip-ink: auto | none;

Werte

text-decoration-skip-ink akzeptiert die folgenden Werte:

auto ist der Standardwert und "überspringt" Unter- oder Oberstriche, wenn sie durch ein Zeichen laufen.
none schneidet diesen Unter- oder Oberstrich genau durch Ihre hängenden y's und hohen t's.

Beispiel

Browser-Unterstützung

Diese Daten zur Browserunterstützung stammen von Caniuse, wo Sie weitere Details finden. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version und aufwärts unterstützt.