Wann man die Kurzschreibweise text-decoration vermeiden sollte

In meinem letzten Artikel über CSS-Unterstreichungsfehler in Chrome habe ich text-decoration-thickness und text-underline-offset diskutiert, zwei relativ neue und weit verbreitete CSS-Eigenschaften, die uns mehr Kontrolle über die Gestaltung von Unterstreichungen geben.

Lassen Sie mich die Nützlichkeit von text-decoration-thickness anhand eines einfachen Beispiels demonstrieren. Die Ubuntu Web-Schriftart hat eine ziemlich dicke Standardunterstreichung. Wir können diese Unterstreichung wie folgt dünner machen

:any-link {
  text-decoration-thickness: 0.08em;
}

/Erklärung Im gesamten Artikel werde ich den Selektor :any-link anstelle des a-Elements verwenden, um Hyperlinks abzugleichen. Das Problem mit dem a-Tag als Selektor ist, dass er alle <a>-Elemente abgleicht, auch die, die kein href-Attribut haben und somit keine Hyperlinks sind. Der Selektor :any-link gleicht nur <a>-Elemente ab, die Hyperlinks sind. Webbrowser verwenden auch :any-link anstelle von a in ihren User-Agent-Stylesheets.

Hover-Unterstreichungen

Viele Websites, darunter Google Search und Wikipedia, entfernen Unterstreichungen von Links und zeigen sie nur an, wenn der Benutzer mit der Maus über einen Link fährt. Das Entfernen von Unterstreichungen von Links im Fließtext ist keine gute Idee, kann aber dort sinnvoll sein, wo Links weiter auseinander liegen (Navigation, Fußzeile usw.). Mit diesem Vorbehalt hier ist eine einfache Implementierung von Hover-Unterstreichungen für Links im Header der Website

header :any-link {
  text-decoration: none;
}

header :any-link:hover {
  text-decoration: underline;
}

Aber es gibt ein Problem. Wenn wir diesen Code in einem Browser testen würden, würden wir feststellen, dass die Unterstreichungen im Header die Standarddicke haben und nicht den dünneren Stil, den wir zuvor deklariert haben. Warum hat text-decoration-thickness aufgehört zu funktionieren, nachdem wir Hover-Unterstreichungen hinzugefügt haben?

Betrachten wir noch einmal den vollständigen CSS-Code. Fällt Ihnen ein Grund ein, warum die benutzerdefinierte thickness nicht auf die Hover-Unterstreichung angewendet wird?

:any-link {
  text-decoration-thickness: 0.08em;
}

header :any-link {
  text-decoration: none;
}

header :any-link:hover {
  text-decoration: underline;
}

Der Grund für dieses Verhalten ist, dass text-decoration eine Kurzschreibweise und text-decoration-thickness deren zugehörige Langschreibweise ist. Das Setzen von text-decoration auf none oder underline hat den Nebeneffekt, die anderen drei Textdekorationskomponenten (thickness, style und color) neu zu initialisieren. Dies ist im CSS Text Decoration-Modul definiert.

Die Eigenschaft text-decoration ist eine Kurzschreibweise zum Festlegen von text-decoration-line, text-decoration-thickness, text-decoration-style und text-decoration-color in einer Deklaration. Ausgelassene Werte werden auf ihre Anfangswerte gesetzt.

Dies können Sie in den Browser-Entwicklertools bestätigen, indem Sie einen der Hyperlinks im DOM-Inspektor auswählen und dann die Eigenschaft text-decoration im CSS-Bereich erweitern.

Damit text-decoration-thickness bei Hover-Unterstreichungen funktioniert, müssen wir den obigen CSS-Code geringfügig ändern. Es gibt tatsächlich mehrere Möglichkeiten, dies zu erreichen. Wir könnten

• text-decoration-thickness nach text-decoration setzen,
• die Dicke in der Kurzschreibweise text-decoration deklarieren oder
• text-decoration-line anstelle von text-decoration verwenden.

Die beste Textdekorationsoption auswählen

Unser erster Gedanke könnte sein, die Deklaration text-decoration-thickness einfach im :hover-Zustand zu wiederholen. Das ist eine schnelle und einfache Lösung, die tatsächlich funktioniert.

/* OPTION A */

header :any-link {
  text-decoration: none;
}

header :any-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.08em; /* set thickness again */
}

Da text-decoration jedoch eine Kurzschreibweise und text-decoration-thickness die zugehörige Langschreibweise ist, sollte es eigentlich keinen Grund geben, beide gleichzeitig zu verwenden. Als Kurzschreibweise ermöglicht text-decoration, sowohl die Unterstreichung selbst als auch die Dicke der Unterstreichung in einer einzigen Deklaration festzulegen.

/* OPTION B */

header :any-link {
  text-decoration: none;
}

header :any-link:hover {
  text-decoration: underline 0.08em; /* set both line and thickness */
}

Wenn Ihnen dieser Code unbekannt vorkommt, könnte das daran liegen, dass die Idee, text-decoration als Kurzschreibweise zu verwenden, relativ neu ist. Diese Eigenschaft wurde erst später im CSS Text Decoration-Modul zu einer Kurzschreibweise gemacht. In den Zeiten von CSS 2 war text-decoration eine einfache Eigenschaft.

Leider hat Safari diese Änderungen noch nicht vollständig übernommen. In der WebKit-Browser-Engine bleibt die Kurzschreibweise von text-decoration mit Präfix (-webkit-text-decoration) und unterstützt noch keine thickness-Werte. Siehe WebKit Bug 230083 für weitere Informationen.

Dies schließt die Kurzschreibweisen-Syntax von text-decoration aus. Der obige Code funktioniert in Safari nicht, selbst wenn wir den -webkit--Präfix hinzufügen würden. Glücklicherweise gibt es eine weitere Möglichkeit, die Wiederholung der Deklaration text-decoration-thickness zu vermeiden.

Als text-decoration zu einer Kurzschreibweise gemacht wurde, wurde eine neue Langschreibweise text-decoration-line eingeführt, um ihre alte Aufgabe zu übernehmen. Wir können diese Eigenschaft verwenden, um die Unterstreichung ein- und auszublenden, ohne die anderen drei Textdekorationskomponenten zu beeinträchtigen.

/* OPTION C */

header :any-link {
  text-decoration-line: none;
}

header :any-link:hover {
  text-decoration-line: underline;
}

Da wir nur die line-Komponente des text-decoration-Werts aktualisieren, bleibt die zuvor deklarierte thickness erhalten. Ich denke, das ist die beste Methode, um Hover-Unterstreichungen zu implementieren.

Seien Sie sich der Kurzschreibweisen bewusst

Beachten Sie, dass beim Setzen einer Kurzschreibweise, z. B. text-decoration: underline, alle fehlenden Teile des Werts neu initialisiert werden. Aus diesem Grund werden Stile wie background-repeat: no-repeat auch rückgängig gemacht, wenn Sie danach background: url(flower.jpg) setzen. Sehen Sie sich den Artikel „Accidental CSS Resets“ für weitere Beispiele dieses Verhaltens an.