Besuchte Links mit reinem CSS "Häkchen" versehen

Webbrowser wissen, welche Links auf einer Seite von einem Benutzer besucht wurden (bis der Cache gelöscht wird, versteht sich). Es liegt an Ihnen als Designer, diese Kenntnis des Webbrowsers zu nutzen, wenn Sie dies wünschen. Ich bin sicher, Sie müssen nicht raten, dies geschieht alles mit CSS. Wenn Sie keine Formatierung auf Links (<a>-Elemente oder "Anker"-Elemente) anwenden, haben die meisten Browser Standardformatierungen, die angewendet werden. Typischerweise blau mit Unterstreichung. In Firefox werden besuchte Links lila mit Unterstreichung.

Sie können die Formatierung dieser Anker-Elemente in Ihrem CSS steuern, indem Sie sie mit Pseudoklassen ansprechen. Das Ziel dieses Tutorials ist es, ein Häkchen vor besuchte Links zu setzen, um eine nette visuelle Anzeige zu erhalten. Sie können ein Beispiel davon live auf Mike Davidsons Blog sehen. Wir werden die Pseudoklasse a:visited ansprechen, aber ich werde später in diesem Artikel Informationen zu den anderen Anker-Pseudoklassen einfügen.

Das perfekte Szenario für eine Pseudo-Pseudo-Klasse

Da das Ziel darin besteht, das Häkchen vor die Links zu setzen, ist dies ein perfektes Szenario für die "before"- oder "after"-Pseudoklassen in CSS. Diese Klassen ermöglichen es Ihnen, Seitenelemente buchstäblich zu spezifizieren und Inhalte direkt aus dem CSS hinzuzufügen. Hier ist ein Beispiel

blockquote:before {
    content: "From the article: ";
}

Dies fügt buchstäblich den Text "Aus dem Artikel: " vor jedem einzelnen Blockquote auf Ihrer Seite ein. Vermischt dies die Trennung von Design und Inhalt? Nun... vielleicht ein wenig. Aber nicht wirklich. Denken Sie einfach nicht an diese Inhaltszusätze als Inhalt, denken Sie an sie als Flair, ein kleines Extra für Ihr Webdesign. Da dies ausschließlich in Ihrem CSS existiert, ist dies kein Inhalt, den Screenreader sehen oder der in Ihren RSS-Feed aufgenommen wird.

Sehen Sie, worauf ich mit diesem Pseudo-Pseudo-Ding hinauswill?

a:visited:before {
   content:  "";
}

Wir können besuchte Links ansprechen und dann Inhalte davor mit dieser CSS-Anweisung hinzufügen. Jetzt müssen wir nur noch ein Häkchen in diesen Inhalt bekommen. Das ist nicht ganz so intuitiv. Sie können hier keine normalen Glyphen verwenden, wie Sie es in HTML können. Zum Beispiel funktioniert die Eingabe von &reg; in den meisten Browsern nicht. Sie sehen dann tatsächlich diese Zeichenkette anstelle des Registrierungszeichens. Stattdessen verwenden Sie einen Schrägstrich und den ASCII-Code für das Zeichen. 2713 ist der Code für ein Häkchen. Also haben wir

a:visited:before {
   content:  "\2713 ";
}

Tada! Fertig! Dies funktioniert perfekt in Firefox, Opera, Safari und... Oh, Moment...

Internet Explorer 6 unterstützt keine Nicht-Anker-Pseudoklassen

Awww, das ist Mist. Hier müssen Sie sich fragen, ob es Ihnen wichtig ist oder nicht. Ich habe mir Mikes Blog angesehen, um zu sehen, ob er das IE6-Problem behandelt hat. Nein, seine Links werden einfach grau und unterstrichen, wenn sie besucht wurden, aber auf das Häkchen wird verzichtet. Dies ist eine völlig akzeptable Form der Vorwärtsentwicklung im Design. Sie verwenden einen guten Browser? Gut für Sie, Sie erhalten zusätzliche nette Funktionen. Sie verwenden einen alten, beschissenen Browser? Das ist in Ordnung, die Seite wird trotzdem gut aussehen und lesbar sein.

Aber ich habe jetzt mein Herz darauf gesetzt, lasst uns das erledigen! Wir können das ohne die :before- oder :after-Selektoren machen, wir verwenden einfach das normale a:visited (das IE6 versteht), und formatieren es so, dass es das Häkchen enthält. Es wird kein Text sein, aber wir machen dieses Häkchen zu einer Grafik und fügen es auf diese Weise ein, seht es euch an

a:visited {
     padding-left: 14px;
     background: url(images/checkmark.gif) left no-repeat;
}

Jetzt können wir uns wirklich freuen. Hurra! Das funktioniert gut in allen Browsern. Schauen Sie sich die Beispielseite an.

Die anderen Anker-Pseudoselektoren

• a:link – Dieser wird nicht sehr oft verwendet, da er etwas redundant ist. Wenn es sich um ein Anker-Element handelt, ist es bereits ein Link. Der Grund, warum er existiert, ist für die Spezifität. Sie können hier Stile deklarieren, die nicht auf andere Anker-Stile übertragen werden, wie es der Fall wäre, wenn Sie nur das a-Element allein formatieren würden.
• a:visited – Diesen kennen Sie nun schon. Dies ist das, was Sie verwenden, um besuchte Links zu gestalten, wie von Ihrem Browser entschieden.
• a:hover – Dies ist der häufigste. Verwenden Sie dies, um den Rollover-Zustand Ihrer Links zu gestalten
• a:active – Ich muss zugeben, dass ich damit lange Zeit verwirrt war. Dies ist der beste Weg, um es zu erklären. Der aktive Zustand ist das, was Sie sehen, wenn Sie auf einen Link **klicken und halten**. Typischerweise werden Sie den aktiven Zustand nicht sehr lange sehen, da die Seite Sie wahrscheinlich zu einer anderen Seite weiterleitet. Ich finde es jedoch für ein wenig Flair ganz nett. Manchmal ist nur eine Farbänderung im aktiven Zustand eine schöne kleine Geste.

Hier ist eine schöne Art, sich die Anker-Pseudoklassen zu merken.