Heim > Web-Frontend > CSS-Tutorial > Wann vermeiden Sie das SMS-Kurzeigeneignis

Wann vermeiden Sie das SMS-Kurzeigeneignis

Jennifer Aniston
Freigeben: 2025-03-14 09:17:08
Original
668 Leute haben es durchsucht

Wann vermeiden Sie die Textabteilung 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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

Idealerweise haben die Kurzfunktionen von text-decoration die Kurzform:

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

Header: Any-Link: Hover {
  Textdekoration: unterstreicht 0,08EM;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage