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
.
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.text-decoration
einbeziehen.text-decoration-line
anstelle von text-decoration
.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.
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!