DuckDuckGoでは、検索結果に出てきたページが訪問済みかどうかをわかりやすくアイコンで表示してくれる。Googleではトリッキーなことはせずに、色を変えるだけだ。もちろん色を変えるのが簡単だが、色を増やさずに訪問済みかどうかを示すことも不可能ではないようだ。まずはテスト実装ということで擬似要素がユニバーサル・セレクターにはマッチしないことを利用して考えることにした。
Demo: Show :visited Status
デモ・ページでは訪問済みのリンクであった場合に「訪問済み」という文字列を赤で表示するようになっている。「訪問済み」という文字列の代わりにアイコン・フォントを使えばこのインジケーターをDuckDuckGoのそれに似たようなものにできるのではないかと思う。その場合は「訪問済み」とかいう妙な文字列をクローラーに拾われなくなり、より良い実装となりうる。
:visited擬似クラスでは特定のCSSプロパティーしか利用できない。仕組みそのものは単純だが、いくつかCSSの独特の仕組みを利用しており、実装は少しややこしくなる。
a要素のcolorプロパティーを背景色と同じにするa:visited擬似クラスのcolorプロパティーでインジケーターの前景色を指定するa:before擬似要素でインジケーターになる文字列を仕込むa > *のcolorプロパティーでリンクの前景色を指定する
本来は1か2で指定した前景色がすべての子要素へ適用されることになるが、実際にリンクを張った文字列の前景色は4での指定により上書きされる。ただし4のセレクターは擬似要素にマッチしないので、擬似要素だけは1か2での指定が適用される。ということで訪問済みの場合のみ文字列が見えるようになるという仕組みだ。
<li>
<a href="https://example.com/">
<span>Example</span>
</a>
</li>デモ・ページではこのようなマークアップに依存している。必要な条件を単純化するとa要素の直下がなんらかの要素ですべて括られていれば良いということになる。つまり以下のようなマークアップでもうまくいく。
<a href="https://example.com/">
<section>
<h1>Example</h1>
</section>
</a>利用を想定している箇所はこのようなセクション全体にリンクを張るパターンなので、概ね問題なさそうだ。
訪問済みかどうかの表示はユーザーの不安感を煽るとも考えられる。多用は……というよりも、ユーザーのメリットが明らかでない場合は利用するべきではないだろう。しかしながらいざ必要となった時にアイディアがまったくないというのも芸がないので、このような工夫は常に数個ストックしておきたい。