Text-Dekoration-Skip-Ink - CSS-Tricks

Anonim

text-decoration-skip-inkist eine Eigenschaft, die das Verhalten von underlineund overline(aber nicht line-through) steuert, wenn die Linie durch einen Teil eines Zeichens / Glyphen verläuft. Auf diese Weise können Sie genau steuern, wie Unterstreichungen oder Überstriche mit den Zeichen interagieren, die sich über dem oberen Rand oder unter dem unteren Rand einer Zeile befinden.

Früher wurde dies über die text-decoration-skip: ink;Kombination aus Eigenschaft und Wert erledigt. Nach Diskussionen darüber, wie das Problem des Kaskadierens von Stilen mit unbeabsichtigtem Überschreiben von Stilen mit niedrigerer Priorität (aufgrund der Anzahl der verfügbaren Optionen text-decoration-skip) behandelt werden kann, werden die einzelnen Eigenschaften in neue Eigenschaften aufgeteilt ähnlich wie text-decoration-skip-ink. Weitere Informationen und Beispiele dazu, warum dies geändert wurde, finden Sie in dieser GitHub-Diskussion und im Protokoll der CSS-Arbeitsgruppe, in dem die Eigenschaften erläutert werden.

Standardmäßig "überspringen" Browser Bereiche, in denen die "Tinte" eines Zeichens eine Unterstreichung kreuzt, wie folgt:

Sie können dieses Verhalten ändern, um die Unterstreichung / Überstreichung zu zwingen, durch das Zeichen zu gehen, indem Sie text-decoration-skip-inkauf setzen none.

.line-of-text-thats-already-underlined ( text-decoration-skip-ink: none; )

Dies führt dazu, dass die Linie direkt durch die Zeichen schneidet:

Syntax

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

Werte

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

  • auto ist der Standardwert und überspringt Unter- / Überstriche beim Durchlaufen eines Zeichens.
  • none schneidet diese Unterstreichung / Überstreichung direkt durch Ihre baumelnden ys und großen t's.

Beispiel

Siehe das Beispiel für Text-Dekoration-Überspringen-Tinte
von CSS-Tricks (@ css-Tricks) auf CodePen.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
91 87 Nein 88 TP

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 14.0-14.4 *

verbunden

  • text-decoration-skip
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-style

Ressourcen

  • MDN-Dokumentation
  • Styling unterstreicht im Web
  • Legastheniker und Skip-Ink unterstreichen