CSS-Kurs / Linkzustände und sichtbarer Tastaturfokus

Formatieren Sie Link-Zustände mit Pseudoklassen wie :link, :visited, :hover und :focus-visible, während die Links erkennbar bleiben. Tastaturbenutzer benötigen einen sichtbaren Fokusanzeiger, und nur Hover-Styling kann nicht jeden interaktiven Zustand vermitteln.

Machen Sie Links erkennbar

a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

Der Link wird mit einem a-Element erstellt, das href enthält. Nur den Text blau zu färben, macht ihn nicht zu einem tatsächlichen Link. Unterstreichen informiert außerdem Leser, die Schwierigkeiten haben, Farben zu unterscheiden, darüber, welche Textstellen Links sind. text-underline-offset bestimmt den Abstand zwischen Text und Unterstreichung. Hier basiert em auf der Schriftgröße des Links.

Verwenden Sie einen Namen, der die Verbindung beschreibt, wie zum Beispiel „Besucherinformationen“, anstatt ein unbekanntes Ziel, wie „Klicken“. Bevor Sie einen normalen Link wie eine Schaltfläche aussehen lassen, müssen Sie unterscheiden, ob es sich um Navigation oder Aktion handelt. Links eignen sich für Elemente, die zu einem anderen Dokument führen, und Schaltflächen eignen sich normalerweise für Elemente, die Aktionen auf dem aktuellen Bildschirm ausführen.

Vergleichen Sie Link-Zustände und Quellreihenfolge

a:link { color: #1756a9; }

a:visited { color: #6b438c; }

a:hover { color: #b53239; }

a:active { color: #8a2630; }

Ein Link kann mehrere Zustände gleichzeitig erfüllen: ein besuchter Link unter dem Zeiger erfüllt sowohl :visited als auch :hover. Bei gleicher Spezifität und ansonsten gleichen Regeln der Kaskade gewinnt die spätere Deklaration für dieselbe Eigenschaft. Die Reihenfolge link → visited → hover → active macht die Hover- und gedrückten Farben sichtbar, unabhängig davon, ob das Ziel besucht wurde oder nicht. Siehe CSS-Kombinatoren und Pseudo-Klassen.

Diese Reihenfolge hat keinen pauschalen Vorrang vor anderen CSS-Regeln. Wenn Sie spezifischere Selektoren oder andere Kaskadenbedingungen haben, werden die Ergebnisse anders sein. Wenn sich die Farbe nicht ändert, prüfen Sie in den Entwicklertools, welche Farbangabe angewendet wird. :active kennzeichnet die Aktivierung und nicht dauerhaft die aktuell geöffnete Seite. Wenn Sie das aktuelle Seitenmenü anzeigen müssen, ziehen Sie eine separate Klasse oder eine semantische Anzeige wie aria-current in Betracht.

Halten Sie den Tastaturfokus sichtbar

a:focus-visible {
  outline: 3px solid #9b5d00;
  outline-offset: 3px;
}

Fokus bezieht sich auf das Objekt, das Tastatureingaben erhält. Wenn der aktuelle Ort beim Navigieren zu einem Link mit Tab nicht sichtbar ist, ist es für den Benutzer schwer zu wissen, wo er die Eingabetaste drücken soll. :focus-visible gilt in Situationen, in denen der Browser bestimmt, dass das Anzeigen des Fokus notwendig ist. Es erscheint normalerweise bei Tastaturbewegungen, aber nicht alle Klick-/Eingabesituationen lassen sich einfach in zwei Typen einteilen. Für Fokus und Zustände von Eingabefeldern vergleichen Sie Formularzustände: Fokus, Validierung, disabled und readonly .

outline zeichnet die Fokus-Markierung, und outline-offset trennt sie vom Element. Entfernen Sie das Standardanzeigezeichen mit outline: none nicht, es sei denn, Sie bieten einen angemessenen Ersatz an. Dieses Beispiel behält sowohl die Link-Unterstreichung als auch eine dunkelorange Fokus-Markierung bei. Die Linienfarbe ist für einen weißen Seitenhintergrund gewählt; prüfen Sie den Kontrast neu, wenn Sie den Hintergrund ändern. Siehe MDN: :focus visible.

Erstellen Sie das Zwei-Dateien-Beispiel

Erstellen Sie links.html und visit.html im selben Ordner. Speichern Sie den ersten Code als links.html und den nächsten Code als visit.html im UTF-8-Format. Der erste Link führt Sie zur tatsächlichen separaten Datei, und der zweite Link führt zu der Überschrift der Öffnungszeiten innerhalb der aktuellen Seite.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Link states exercise</title>
  <style>
    body { margin: 24px; font: 1rem/1.7 sans-serif; color: #333; }
    main { max-width: 65ch; }
    a { text-decoration: underline; text-underline-offset: 0.15em; }
    a:link { color: #1756a9; }
    a:visited { color: #6b438c; }
    a:hover { color: #b53239; }
    a:active { color: #8a2630; }
    a:focus-visible { outline: 3px solid #9b5d00; outline-offset: 3px; }
    nav li + li { margin-block-start: 0.7em; }
  </style>
</head>
<body>
  <main>
    <h1>Small Garden visitor information</h1>
    <nav aria-label="Instruction link"><ul>
      <li><a href="visit.html">Visitor information on a separate page</a></li>
      <li><a href="#hours">Opening hours on this page</a></li>
    </ul></nav>
    <h2 id="hours">Opening hours</h2>
    <p>Plant care takes place in the morning. These times are fictional sample content, not information about a real facility.</p>
    <p>Hover over the links or press Tab to check their colors and outlines.</p>
  </main>
</body>
</html>

<!doctype html>

<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Visitor Information</title></head>

<body><h1>Visitor information page</h1><p>This separate document is opened by the first link.</p><p><a href="links.html">Return to the link exercise</a></p></body></html>

Testen Sie die Links mit Maus und Tastatur

1. Öffnen Sie links.html und fahren Sie mit der Maus über den ersten Link. Überprüfen Sie, ob er rot wird. Wenn Sie die Maustaste gedrückt halten, sehen Sie eine dunkelrote Farbe. Da sich die Seite in dem Moment bewegt, in dem Sie loslassen, bleibt die aktive Farbe nach dem Klick nicht erhalten.
2. Öffnen Sie den ersten Link und kehren Sie dann mit der Zurück-Taste des Browsers zurück. Bewegen Sie den Zeiger vom Link weg und überprüfen Sie die Besuchsfarbe. Die Ergebnisse können unter neuen Profilen, privaten Fenstern oder nach dem Löschen des Verlaufs variieren, und Adressen, die bereits besucht wurden, können von Anfang an als besucht angezeigt werden.
3. Platzieren Sie den Zeiger außerhalb des Links und tabben Sie zum ersten Link. Stellen Sie sicher, dass die dunkelorange Umrandung erscheint, und tabben Sie dann erneut zum nächsten Link. Shift+Tab bewegt sich in der entgegengesetzten Reihenfolge.
4. Fokussieren Sie auf den ersten Link und drücken Sie Enter. Stellen Sie sicher, dass visit.html geöffnet wird. Wenn Sie zurückkehren, aktivieren Sie den zweiten Link mit Enter, und er sollte Sie zur Überschrift der Öffnungszeiten führen.

Die Anzeige von besuchten Links unterliegt Datenschutzbeschränkungen. Bestimmte Farbeigenschaften wie color, können verwendet werden, aber Größe, Bild usw. können nicht frei geändert werden, um festzustellen, ob ein Besuch stattgefunden hat. Der Browser kann die besuchten Farben in getComputedStyle() usw. möglicherweise nicht direkt anzeigen, also beurteilen Sie die Besuchshistorie nicht allein anhand des berechneten Stilwerts. Detaillierte Beschränkungen werden in :visited auf dem der MDN-Referenz zu :visited und Datenschutz beschrieben.

Prüfen Sie fehlende Zustandsänderungen

• Wenn der Link sein Ziel nicht öffnet, überprüfen Sie den Dateinamen von href und den Speicherort von visit.html. Überprüfen Sie zuerst, ob Sie beide Dateien im gleichen Ordner abgelegt haben.
• Wenn Sie nur die Hover-Farbe statt der Besuchsfarbe sehen, bewegen Sie den Zeiger vom Link weg. Wenn Hover in den Entwicklertools erzwungen eingeschaltet ist, schalten Sie es aus.
• Wenn der Link mit Tab nicht erreichbar ist, überprüfen Sie, ob es sich um einen echten Link mit href handelt. Die Tastaturnavigations-Einstellungen Ihres Browsers/Betriebssystems können ebenfalls Einfluss haben.
• Wenn die Fokuslinie abgeschnitten wird, überprüfen Sie den Overflow des übergeordneten Elements und den umliegenden Raum. Auf mobilen Touch-Geräten kann sich Hover anders verhalten als auf dem Desktop, sodass wichtige Informationen nicht nur beim Hover angezeigt werden.

Nachdem Sie geübt haben, die Reihenfolge der Regeln zu ändern, bringen Sie sie wieder in ihre ursprüngliche Reihenfolge zurück. CSS, das in den Entwicklertools vorübergehend geändert wurde, wird beim Aktualisieren auf den in der Datei gespeicherten Wert zurückgesetzt, aber der Browserverlauf wird nicht allein durch das Aktualisieren zurückgesetzt.