a:visitedの対応状況

質問

bloggerでcssを書いているのですが、
li.archivedate a{
background:url('./hiyoko_close.gif') no-repeat;
padding-left:1em;　}
li.archivedate a:visited{
background:url('./hiyoko_open.gif') no-repeat;
padding-left:1em;　}
↑いまここです。
visitedをきちんと表示させたいのですが、Macのchrome8とMac Safari5では色は変わるのですが、backgroundの画像がaのまま(hiyoko_close.gif)です。
winではIE6.0 FF3.6で確認したところ、意図したとおりに表示されてはいるのですが、WinChromeとWinSafariではどうなんでしょうか？

また、
li.archivedate a:visited:before{
content:url('./hiyoko_open.gif') no-repeat;
padding-left:0em;　}
などとして行頭の文字だけアイコンで置き換えることは不可能でしょうか？
visitedとbeforeを両方指定するのはむりですか？(:beforeはIE6は非対応のようですが）

回答No.5

DrFell · ベストアンサー

＃4です。

いや、悩ましいって問題ではなく、

ご質問の「色は変わるのですが、backgroundの画像がaのまま」って部分が

「CSS で背景画像が変わらない？
また、制作面では今回の変更で :visited に指定できるプロパティが大きく制限されています。
その中で特に影響がありそうな部分の1つに :visited に background-image などが指定できなくなる、ということがあります。
」（1つめのリンク内から引用）

ってことです。rftghyju さんが悩まなくても、ブラウザが対応していっていますので、今回の質問になったのでは？
そしてこれから先、Firefoxも続きますよってお話です。

回答No.4

DrFell

visitedのイメージ画像を変更することに、セキュリティ上の問題があることがわかり、visitedの画像は使えなくなるブラウザが増えています。使われないことをお勧めします。

●Safari 5 で :visited の挙動が変更に
http://safarirealized.com/archives/51496726.html

●CSS によるブラウザ履歴の漏えいを防ぐ取り組み
https://dev.mozilla.jp/2010/04/plugging-the-css-history-leak/

お礼

たしかにvisitedを調べれば履歴が分かってしまいますね
いま、言われて始めて気づきました。
利便性とセキュリティは相反するってやつですね。
悩ましい。

回答No.3

naokita

NO.2です。
失礼　誤×
＞padding-left:0; でOKなのでは？

padding-left:1em;　　これ必要ですね・・・

お礼

しかしリンク済みのvisitedはちゃんと効いてるんですよ。
色が変化してますから。

回答No.2

naokita

NO.1さんの回答で、良いと思いますが、
あ、url('./hiyoko_open.gif') に置換えですが・・・
-------------------

「a:visited:before」 は 全て「a:visited＋アイコン」ですよね？
それなら、hiyoko_open.gif と アイコンを１枚に加工して
padding-left:0; でOKなのでは？

または、
a:link時には隠し画像で、<img>を配置し、visibility:hidden; にするとか。

補足

ええと、hiyoko_open.gifがアイコンなのですが、１枚に加工するとはどういうことでしょうか？

回答No.1

metametamu

共通部分はli.archivedate aで指定し、変化させたい部分はli.archivedate a:linkで指定されてはどうでしょうか。

li.archivedate a{
background-repeat:no-repeat;
padding-left:1em;　}

li.archivedate a:link{
background-image:url('./hiyoko_close.gif');　}

li.archivedate a:visited{
background-image:url('./hiyoko_close.gif');　}

a:visited:beforeは:beforeに対応しているブラウザでも一部対応していないものがあったはずです。
指定は問題ありません。

補足

visitedはhiyoko_openですよね。
でもやはりこれでは訪問済みリンクでもhiyoko_close.gifのままです。
MacChrome8.0