Styling -Links mit echten Untersteinen

Bevor Sie diskutieren, wie Sie den Unterstrich stylen können, sollten wir zunächst eine Frage nachdenken: Sollten wir Unterstriche verwenden?

Im Grafikdesign werden Unterstriche häufig als unzureichend genug angesehen. Es gibt bessere Möglichkeiten, den Fokus zu betonen, Hierarchien aufzubauen und Titel zu unterscheiden.

Buttericks "praktische Artensett" hat klare Vorschläge:

Wenn Sie Unterstriche verwenden möchten, verwenden Sie stattdessen fett oder kursiv. In besonderen Fällen wie dem Titel können Sie auch in Betracht ziehen, alle Hauptstädte, kleine Hauptstädte oder die Schriftgröße zu ändern. Glauben Sie es immer noch nicht? Ich schlage vor, Sie finden ein Buch, eine Zeitung oder eine Zeitschrift, um festzustellen, ob ein unterstrichener Text vorliegt. Dieser Stil ist hauptsächlich mit Supermarkt -Boulevardzeitungen verbunden.

Die Netzwerkumgebung ist jedoch anders. Hyperlinks sind die definierenden Merkmale des Internets. Sie sind seit der Geburt des Internets unterstrichen. Dies ist eine allgemein verstandene Konvention, und seine Bedeutung ist sehr klar - unterstrichen, um Links anzuzeigen .

Viele beliebte Websites haben jedoch bereits Un-Onscore: beispielsweise die New York Times, das New York Magazine, die Washington Post, Bloomberg, Amazon, Apple, Github, Twitter und Wikipedia. Jon Wiley, der Chefdesigner von Google, erklärte 2014, dass das Entfernen des Unterstrichs der Suchergebnisse einen saubereren Look erstellen kann. Es ist erwähnenswert, dass die meisten dieser Websites ein etwas anderes hellblau (#0000ee) behalten, das seit der Geburt des Webs die Standardeinstellung für Browser war. Dies bietet den meisten Benutzern visuelle Tipps, aber es reicht möglicherweise nicht aus, den Compliance -Test der WCAG -Barrierefreiheit zu bestehen.

Farbe kann nicht als einziges visuelles Mittel verwendet werden, um Informationen zu vermitteln, Aktionen anzuzeigen, fordern und visuelle Elemente unterscheiden. - WCAG 2.1

WCAG benötigt keine Unterstriche für Links, empfiehlt dies jedoch. Farbblinde Benutzer müssen in der Lage sein, Links zu erkennen. Sie können sie auf andere Weise unterscheiden, z. B. die Verwendung von fettem Schriftart. Oder Sie können diese seit langem etablierte visuelle Assist-Funktion beibehalten. Aber wenn wir Unterstriche verwenden würden, wollten wir, dass sie hübsch aussehen . Der mittlere Designer Marcin Wichar beschreibt den perfekten Unterstrich wie:

[…] Sichtbar, aber nicht übermäßig auffällig - die Menschen erkennen, welcher Inhalt klickbar ist, aber nicht übermäßig Aufmerksamkeit auf sich zieht. Es sollte in der richtigen Entfernung vom Text sein, bequem unter dem Text, und sogar der absteigende Körper nimmt den gleichen Raum ein.

Traditionell erfordert das Erreichen eines CSS -Tricks .

Tipps, die wir in der Vergangenheit verwendet haben

Dies ist ein Trick, mit dem alle Entwickler vertraut sind: border-bottom . Durch die Verwendung von border-bottom , um Unterstriche zu simulieren, können wir Farbe und Dicke steuern. Es gibt ein Problem mit diesen Pseudo-Aborscores: Der Abstand vom Text ist zu groß. Sie befinden sich unter dem Briefabkommen. Sie können dieses Problem durch die Verwendung von line-height lösen, dies führt jedoch zu seinen eigenen Problemen. Ähnliche Technologien verwenden box-shadow . Marcin Wichary war Pionier der komplexesten Technologie und verwendete background-image , um Unterstriche zu simulieren. Dies sind alles nützliche Tipps, aber nicht mehr benötigt.

Setzen Sie einen echten Unterstil -Stil

Letztendlich können wir dank zwei neuer CSS -Eigenschaften Links unterscheiden, ohne Stile zu beeinträchtigen.

• text-underline-offset steuert die Position der Unterstreichung.
• text-decoration-thickness steuert die Dicke von Unterstrichen, Überständen und Schlägen.

Laut Webkit -Blog:

Sie können auch für beide Eigenschaften from-font angeben, wodurch die relevanten Metrikwerte aus der verwendeten Schriftart selbst extrahiert werden.

Die UX -Agentur ClearLeft verwendet mutig (Pseudo), um die Menschen auf Links mit farbenfrohen Stilen aufmerksam zu machen. Hier ist ein Beispiel für einen Pseudo-Aborscore:

 <code>a { text-decoration: none; border-bottom: #EA215A 0.125em solid; }</code>

Beachten Sie, dass sich dieser Pseudo-Aborscore deutlich unter dem absteigenden Körper des Buchstabens "Y" befindet:

Hier finden Sie denselben Absatz, in dem Devtools mithilfe der neuen CSS -Eigenschaft den gleichen Stil auf den wahren Unterstrich anwendet:

 <code>a { text-decoration-color: #EA215A; text-decoration-thickness: .125em; text-underline-offset: 1.5px; }</code>

Sie werden feststellen, dass ich die EM -Einheit im Beispielcode verwendet habe. Die Spezifikation empfiehlt dringend, sie anstelle von Pixeln zu verwenden, damit die Dicke mit der Schriftart skaliert.

Diese Eigenschaften wurden in Safari veröffentlicht und werden in Firefox 70 erscheinen.

Wenn Microsoft Edge Browser zu Chrommaterial migriert, erhalten wir schließlich den Cross-Browser-Unterstützung für text-decoration-style , die die folgenden Optionen bietet: solide (Standard), doppelt, gepunktet, gepunktet und wellige Linien. Die Verwendung dieser neuen Eigenschaften in Kombination eröffnet eine Reihe von Möglichkeiten.

Die vielleicht größte Verbesserung des Unterstrichs im Web ist jedoch, dass er erreicht werden kann, ohne dass die Entwickler etwas tun. In der Vergangenheit wurde das absteigende Gefühl rücksichtslos von Unterstrichen abgeschnitten, was alles andere als Gnade ist. Entwickler lösem diesen Nachteil, indem sie Textschatten anwenden, die der Hintergrundfarbe entsprechen. text-decoration-skip-ink bietet eine bessere Möglichkeit, den Abstiegskörper Platz zu lassen.

Bequem ist es auf den neuen Standardwert für Unterstriche eingestellt. Dies bedeutet, dass das Erscheinen von Unterstrichen verbessert wurde und die meisten Webentwickler die Existenz dieser Eigenschaft immer noch nicht bewusst sind. Wenn Sie möchten, dass der Unterstrich den Glyphen überspannt, können Sie diese Eigenschaft auf none festlegen.

Das obige ist der detaillierte Inhalt vonStyling -Links mit echten Untersteinen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!