Probleme mit Pseudoelementen

[nickriviera]

hallo,

ein Kunde hätte gerne, dass seine Links grob dargestellt wie folgt angezeigt werden:

link: blau, unterstrichen, normal
hover:  blau, unterstrichen, bold
visited: blau, unterstrichen, bold

die Umschaltung von font-weight funktioniert zwar, wenn ich mit der Maus über den Link fahre ( hover ), aber nicht, wenn der Link besucht wurde. Die einzigen Styles, die mit visited funktionieren, sind color und background.

Beim weiteren Experimentieren ist mir aufgefallen, dass alle Styles, die mit fonts zu tun haben ( font-size, font-weight, text-decoration etc. ) bei visited von link übernommen werden. Wenn ich bei :link z.B. font-weight:bold eintrage, wird auch :visited fett dargestellt.

Um auszuschließen, dass es an meiner eigenen Blödheit oder der Umgebung liegt ( ist eine TYPO3-Seite ), habe ich eben das Beispiel zu Pseudoformaten aus selfhtml in eine Datei kopiert, und in :link den Style font-weight auf normal gesetzt. Auch diese Datei verhält sich so, dass bis auf Textfarbe und Hintergrund die Styles für :visited aus :link übernommen werden.

Probiert habe ich es im IE8 und im Firefox 8.0 - in beiden verhält sich die Datei gleich ( falsch ).

Bin ich jetzt zu blöd, oder gibt es eine plausible Erklärung für dieses Phänomen. Was mir aufgefallen ist, dass in fast allen Pseudoelement-Beispielen, die ich gefunden habe ( auch in meinen Büchern ), immer nur mit dem Style color gearbeitet wird, und auf weitere Erläuterungen verzichtet wird.

Für jeden Tip bin ich dankbar.

Gruß Frank

[Alex]

Hallo!

link: blau, unterstrichen, normal
hover:  blau, unterstrichen, bold
visited: blau, unterstrichen, bold

die Umschaltung von font-weight funktioniert zwar, wenn ich mit der Maus über den Link fahre ( hover ), aber nicht, wenn der Link besucht wurde. Die einzigen Styles, die mit visited funktionieren, sind color und background.

1. Die Reihenfolge. Wenn ein Link sowohl besucht ist als auch gehovert wird, treffen beide Pseudoklassen zu, und die untenstehende gewinnt. Empfohlene Reihenfolge: link, visited, focus, hover, active.
2. Dass manche Eigenschaften trotzdem in der Reihenfolge funktionieren, liegt daran, dass bei :visited aus Sicherheitsgründen einige deaktiviert sind (sonst lässt sich z.B. durch Nachladen eines Hintergrundbildes ausspähen, wo der User vorher schon war).

Viele Grüße,
Alexander

[suit]

1. Die Reihenfolge. Wenn ein Link sowohl besucht ist als auch gehovert wird, treffen beide Pseudoklassen zu, und die untenstehende gewinnt.

Der Vollständigkeit halber:
Die mit der höheren Spezifiät "gewinnt", nur bei gleicher Spezifität "gewinnt" die später angeführte.

[Gunnar Bittersmann]

@@nickriviera:

nuqneH

ein Kunde hätte gerne, dass seine Links grob dargestellt wie folgt angezeigt werden:

link: blau, unterstrichen, normal
hover:  blau, unterstrichen, bold
visited: blau, unterstrichen, bold

Das sollstest du deinem Kunden ausreden. (Soll heißen: ihn beraten.)

Besuchte Links stärker hervorzuheben als unbesuchte halte ich für Unsinn.

Problematisch ist auch, die Schriftstärke beim Hovern zu ändern, denn dadurch nimmt der Linktext mehr Platz ein. Was vorher in ein eine Zeile gepasst hat, benötigt jetzt zwei und das ganze Layout springt wild herum. Das sollte man unbedingt vermeiden.

die Umschaltung von font-weight funktioniert zwar, wenn ich mit der Maus über den Link fahre ( hover ), aber nicht, wenn der Link besucht wurde. Die einzigen Styles, die mit visited funktionieren, sind color und background.

Browser unterstützen nicht alle CSS-Eigenschaften zur Unterscheidung von besuchten und unbesuchten Links, um die Privatsphäre des Nutzers zu schützen. Würde font-weight unterstützt werden (was Opera übrigens (noch) tut), könnte per JavaScript ausgelesen werden, wieviel Platz der Text benötigt und der Seitenbetreiber würde erfahren, ob der Nutzer den Link schon besucht hat.

Für jeden Tip bin ich dankbar.

Du plenkst. Nach der öffnenden und vor der schließenden Klammer steht kein Leerzeichen.

Qapla'

[Steel]

Hi!

Um auszuschließen, dass es an meiner eigenen Blödheit oder der Umgebung liegt ( ist eine TYPO3-Seite ), habe ich eben das Beispiel zu Pseudoformaten aus selfhtml in eine Datei kopiert, und in :link den Style font-weight auf normal gesetzt. Auch diese Datei verhält sich so, dass bis auf Textfarbe und Hintergrund die Styles für :visited aus :link übernommen werden.

Probiert habe ich es im IE8 und im Firefox 8.0 - in beiden verhält sich die Datei gleich ( falsch ).

Das kann ich allerdings nicht nachvollziehen. <http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm@title=Dieses Beispiel> funktioniert wunderbar. Auch wenn ich an font-weight drehe, wird mir der visited link so angezeigt wie im CSS angegeben.

[Matthias Apsel]

Om nah hoo pez nyeetz, nickriviera!

Um auszuschließen, dass es an meiner eigenen Blödheit oder der Umgebung liegt ( ist eine TYPO3-Seite ), habe ich eben das Beispiel zu Pseudoformaten aus selfhtml in eine Datei kopiert, und in :link den Style font-weight auf normal gesetzt. Auch diese Datei verhält sich so, dass bis auf Textfarbe und Hintergrund die Styles für :visited aus :link übernommen werden.

history-stealing?

Matthias

[nickriviera]

noch ein paar Bemerkungen :

Die richtige Reihenfolge der Pseudoformate habe ich in der html-Datei natürlich eingehalten, auch wenn sie in meiner Problembeschreibung vielleicht verkehrt stehen.

Wenn ich das selfhtml-Beispiel 1:1 in eine Datei kopiere, und bei :link für font-weight normal eintrage, funktioniert es auch nicht. Besuchte links werden dann ebenfalls mit font-weight normal dargestellt, auch wenn der style bei :visited als bold angegeben ist - ich habe es gerade noch mal ausprobiert.

Generell ist es meiner meinung nach eine Unsitte in Foren, wenn jemand eine inhaltliche Frage stellt, und sich anschließend Leute melden, die den Sinn in Frage stellen und an der Rechtschreibung rumnölen . Das mit dem Sinn habe ich mit dem Kunden bereits diskutiert, im Moment lassen wir es einfach schon deshalb sein, weil es ja nicht funktioniert. Mich interessiert die Frage aber generell - wieso funktionieren bestimmte Styles bei :visited, und andere nicht, obwohl sie bei :hover einwandfrei funktionieren ?

Zum Nachvollziehen kann jeder das folgende Beispiel in eine html-Datei kopieren ( Originalbeispiel aus selfhtml ) :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>:link, :visited, :focus, :hover, :active</title>
<style type="text/css">
a:link { font-weight:bold; color:blue; text-decoration:none; }
a:visited { font-weight:bold; color:silver; text-decoration:none; }
a:focus { font-weight:bold; color:red; text-decoration:underline; }
a:hover { font-weight:bold; color:green; text-decoration:none; }
a:active { font-weight:bold; color:lime; text-decoration:underline; }

h1:focus { background-color:red; }
h1:hover { background-color:silver; }
h1:active { background-color:green; }
</style>
</head><body>

<h1>Bekannte Suchdienste</h1>
<p>
<a href="http://de.yahoo.com/">Yahoo! (Verzeichnis)</a><br>
<a href="http://www.google.de/">Google (Suchmaschine)</a><br>
<a href="http://web.de/">Web.de (Verzeichnis)</a><br>
<a href="http://www.multimeta.de/">Multimeta (Meta-Suchmaschine)</a>
</p>

</body></html>

Bei diesem Beispiel werden die Link-Texte wunderschön fett dargestellt, weil sie alle als bold angegeben sind .

Ändert man jetzt bei a:link den Style font-weight auf normal , funktioniert hover weiterhin einwandfrei , visited wird aber dargestellt wie link , nämlich normal . Dies gilt auch für andere Styles wie font-size oder text-decoration . Sicher funktioniert nur color und background .

So, ich hoffe, ich habe mich jetzt etwas verständlicher ausgedrückt.

Danke für Eure Hilfe und Gruß Frank

[Gunnar Bittersmann]

@@nickriviera:

nuqneH

Generell ist es meiner meinung nach eine Unsitte in Foren, wenn jemand eine inhaltliche Frage stellt, und sich anschließend Leute melden, die den Sinn in Frage stellen und an der Rechtschreibung rumnölen .

Das ist hier Sitte. Und das ist auch gut so.

Mich interessiert die Frage aber generell - wieso funktionieren bestimmte Styles bei :visited, und andere nicht, obwohl sie bei :hover einwandfrei funktionieren ?

Deine Frage wurde zur genüge beantwortet. Auch von mir.

Qapla'

[Steel]

Hi!

Ich habe Dir bereits geantwortet, dass dieses Beispiel bei mir sehr wohl funktioniert. Zur Ergaenzung: IE8

Ich kann mit font-weight anstellen was ich will. Es wird immer angezeigt wie eingestellt.

Andere Browser verhalten sich gern mal anders. Historystealing ist bei den Herstellern ja nun auch angekommen.

[Der Martin]

Hallo,

Generell ist es meiner meinung nach eine Unsitte in Foren, wenn jemand eine inhaltliche Frage stellt, und sich anschließend Leute melden, die den Sinn in Frage stellen und an der Rechtschreibung rumnölen .

nein, das ist ein Qualitätsmerkmal.

Das mit dem Sinn habe ich mit dem Kunden bereits diskutiert, im Moment lassen wir es einfach schon deshalb sein, weil es ja nicht funktioniert. Mich interessiert die Frage aber generell - wieso funktionieren bestimmte Styles bei :visited, und andere nicht, obwohl sie bei :hover einwandfrei funktionieren ?

Das wurde auch schon (mehrfach) beantwortet.

Übrigens: Du plenkst immer noch.

Ciao,
 Martin

[MudGuard]

Hi,

am Rande sei erwähnt:

:link, :visited,, :focus, :hover, :active sind keine Pseudo-Elemente, sondern Pseudo-Klassen.

Pseudo-Elemente sind z.B. :before und :after.

Für jeden Tip bin ich dankbar.

Bitte, gern geschehen.

cu,
Andreas

[suit]

Pseudo-Elemente sind z.B. :before und :after.

::before und ::after

[Gunnar Bittersmann]

@@suit:

nuqneH

Pseudo-Elemente sind z.B. :before und :after.

::before und ::after

:before und ::after

Qapla'

[MudGuard]

Hi,

Pseudo-Elemente sind z.B. :before und :after.
::before und ::after

die auch - und weil ich keine vollständige Liste gemacht habe, hab ich extra "z.B." hingeschrieben.

cu,
Andreas