In letzter Zeit hab ich des Öfteren über die Kennzeichnung der von mir bisher eher als Randgruppe betrachteten Gruppe von :visited - Links nachgedacht. Besonders für Seiten, die sehr viel verlinken kann es wichtig sein zu zeigen, welche Links vom Benutzer schon besucht wurden. Es gibt verschiedene Möglichkeiten das zu erreichen. Eine wäre das schlichte ändern der Farbe, aber ganz so einfach will ich es mir nicht machen.
:after Pseudoelement
Das :after Pseudoelement schien mir hierfür sehr geeignet, da ich da in letzter Zeit ein wenig damit rumprobiert hab, aber dazu in einem der nächsten Einträge mehr. Die Kennzeichnung schon besuchter Links per Pseudoelement und content wird jedoch vom IE nicht interpretiert und kann daher von gut 70% der Internetgemeinde nicht genutzt werden. Ich vertrete inzwischen die Meinung, wie einige andere auch, dass einen das im Herbst 2005 nicht mehr aufhalten sollte neues, innovatives auszuprobieren und voranzutreiben.
Schreibweise beachten
Die CSS-Eigenschaft content ist nicht kompliziert, jedoch muss man bei der Schreibweise des eingefügten Inhalts ein paar Sachen beachten. So wird bspw. durch:
a:visited:after {
content: “»”;
}
leider nicht » ausgegeben. Um Entities per content auszugeben ist der Unicode in hexadezimaler Form notwendig. Für den genannten Fall wäre das:
a:visited:after {
content: “\00BB”;
}
Damit wird hinter die besuchten Links ein » gesetzt. Noch etwas suboptimal, da das ein wenig “rangeklatscht” wirkt. Man könnte nun:
a:visited:after {
content: ” \00BB”;
}
probieren und wird feststellen, dass unter Windows alles soweit ok ist, aber wenn man auf andere Systeme wechselt wird das einfache Leerzeichen nicht interpretiert. Das heißt man sollte auch dafür den hexcode verwenden:
a:visited:after {
content: “\00A0\00BB”;
}
bringt dann das gewünschte Ergebnis. Und siehe da man hat eine sehr schicke Kennzeichnung der schon besuchten Links. Wie gesagt leider funktioniert das nicht unter IE/win, dafür rendern es standardkonforme Browser einwandfrei.
Verwandte Links
Als ich begann mit content und den Pseudoelementen herumzuspielen, dachte ich mir schon, dass ich da nicht unbedingt der Erste war, darum hier noch ein paar Links, die ich zum Thema gefunden habe.
Sehr schön finde ich auch, hinter einen besuchten Link einen Haken (abgehakt …) zu setzen. Das habe ich in letzter Zeit öfters mal gesehen, ist meiner Meinung nach noch aussagekräftiger als ein ».
Wenn du dafür kein Icon verwenden willst, kannst du ja das Wurzelzeichen (8730) mißbrauchen. Semantisch ists nicht relevant, da eh im CSS notiert.
Das mit dem nicht-interpretierten Leerzeichen auf Nicht-Windows-Systemen wußte ich auch noch nicht.
Jep das “radic” kenn ich, nur ist das in anderen Beispielen schon oft genutzt worden, ich wollte ein anderes nutzen, dass es passendere gibt als raquo ist klar.
Das Problem ist noch, dass wenn man es direkt hinter den eigentlichen Link setzt das :after Zeichen mit unterstrichen wird als gehöre es zum Link ich werde denke ich in den nächsten Tagen eine Lösung “präsentieren”, wie man das etwas eleganter lösen kann.
Für einen solchen Haken gibt es ✓ und ✔.
Das sieht aber wahrscheinlich in den meisten Fällen nicht sonderlich schön aus.
Ressource
Jep, denn das “richtige” Check Mark wird unter Windows zumeist nicht unterstützt.
[…] Besuchte Links […]