Wann vermeiden Sie das SMS-Kurzeigeneignis

In meinem jüngsten Artikel über Chromes CSS unterstreichen die Probleme text-decoration-thickness und text-underline-offset , leistungsstarke, weit verbreitete CSS-Eigenschaften, die eine feinere Untersteuerung bieten.

Lassen Sie uns text-decoration-thickness veranschaulichen. Ubuntus Standard -Unterstreichung ist ziemlich dick. Wir können es verfeinern:

 : Any-Link {
  Textdekoration Dickheit: 0,08EM;
}

Hinweis: Ich benutze :any-link statt von<a></a> Nur um tatsächliche Hyperlinks zu zielen (diejenigen mit href -Attributen). Die Stylesheets von Browserns User Agent auch bevorzugen :any-link .

Schweber unterstreicht: eine subtile Fallstricke

In vielen Websites (wie Google Search und Wikipedia) werden schwebende Untersteinern verwendet - unterstrahlen nur auf Mouseover. Obwohl dieser Ansatz im Allgemeinen nicht ratsam für In-Text-Links ist, passt dieser Ansatz verteilte Links (Navigation, Fußzeilen). Hier ist ein Header -Beispiel:

 Header: Any-Link {
  Textdekoration: Keine;
}

Header: Any-Link: Hover {
  Textdekoration: Unterstreichung;
}

Die Unterstreichung der Schwebeplätze kehrt jedoch auf die Standarddicke zurück und ignoriert unsere frühere Einstellung text-decoration-thickness . Warum?

Das Problem beruht auf text-decoration als Kurzeigeneigenschaft und text-decoration-thickness seines langen Gegenstücks. Setzen Sie text-decoration auf none oder underline andere Textdekorationskomponenten (Dicke, Stil, Farbe). Das CSS -Textdekorationsmodul gibt Folgendes an: Die ausgelassenen Werte werden zu ihren Anfangszuständen zurückgekehrt.

Browser Devtools bestätigen Folgendes: Überprüfen Sie einen Hyperlink und erweitern Sie die Eigenschaft text-decoration um die Komponentenwerte anzuzeigen.

Um bei schwebem Schwebe eine benutzerdefinierte Dicke beizubehalten, benötigen wir Anpassungen. Es gibt mehrere Lösungen:

• text-decoration-thickness in der :hover -Staat neu deklarieren.
• Dicke direkt in die Kurzschrift text-decoration einbeziehen.
• Verwenden Sie text-decoration-line anstelle von text-decoration .

Optimale Strategien text-decoration

Einfach text-decoration-thickness in den :hover STAATS-Werken wiederholen, aber es ist überflüssig:

 / * Option a */
Header: Any-Link {
  Textdekoration: Keine;
}

Header: Any-Link: Hover {
  Textdekoration: Unterstreichung;
  Textdekoration Dickheit: 0,08EM;
}

Idealerweise haben die Kurzfunktionen von text-decoration die Kurzform:

 / * Option B *//
Header: Any-Link {
  Textdekoration: Keine;
}

Header: Any-Link: Hover {
  Textdekoration: unterstreicht 0,08EM;
}

Hinweis: Dieser Kurzansatz ist relativ neu; Ältere CSS -Versionen fehlten diese Funktionalität. Die Webkit-Engine von Safari verwendet weiterhin die vorangestellte -webkit-text-decoration und fehlt die Unterstützung der Dicke (siehe Webkit-Bug 230083). Dies macht Option B Safari-inkompatible.

Der beste Ansatz verwendet text-decoration-line , die neben der Kurzschrift eingeführt wird:

 / * Option C *//
Header: Any-Link {
  Textdekorationslinie: Keine;
}

Header: Any-Link: Hover {
  Textdekorationslinie: Unterstreichung;
}

Dies modifiziert nur die line und bewahrt die zuvor festgelegte Dicke. Dies ist die robusteste und kreuzbrowser kompatible Lösung.

Überlegungen zur Kurzform im Eigentum

Denken Sie daran: Kurzeigenschaften (wie text-decoration , background ), die die Werte auf ihre Standardeinstellungen zurücksetzen. Dies erklärt, warum Stile wie background-repeat: no-repeat durch einen nachfolgenden background: url(flower.jpg) Deklaration. Weitere Einzelheiten "Unbeamte CSS Resets" finden Sie.

Das obige ist der detaillierte Inhalt vonWann vermeiden Sie das SMS-Kurzeigeneignis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!