プライバシーと :visited セレクター

ちょっとした善意の嘘

ユーザーのプライバシーを保護するために、Firefox や他のブラウザーは特定の状況下でウェブアプリケーションに嘘をつきます。

• window.getComputedStyle メソッドや、 element.querySelector などの類似の関数は、ユーザーがページ上のリンクを訪れたことがないことを示す値を常に返します。
• :visited + span のような兄弟結合子を使用した場合、隣接する要素（この例では span）は、リンクが未訪問であるかのようにスタイル付けされます。
• 稀なケースですが、入れ子になったリンク要素を使用していて、一致している要素が履歴の中の存在がテストされているリンクとは異なる場合、要素はリンクが未訪問であるかのようにレンダリングされます。

訪問済みリンクスタイルの制限

訪問済みリンクの視覚的なスタイルづけを行うことはまだできますが、使えるスタイルは制限されています。訪問済みリンクに用いることができるのは以下のプロパティだけです。

• color
• background-color
• border-color （およびそのサブプロパティ）
• column-rule-color
• outline-color
• text-decoration-color
• text-emphasis-color
• fill および stroke プロパティの色の部分

さらに、上記のスタイルであっても、未訪問リンクと訪問済みリンクの透過率の違いは適用されません。この制限により、さまざまな <color> 関数や transparent キーワードを使用して、2 つの状態を判別することができなくなります。

制限内でスタイルづけをする方法を、次の例で示します。

:link {
  outline: 1px dotted blue;
  background-color: white;
  /* background-color の既定値は `transparent` です。異なる値を指定しないと
     :visited での変更が適用されません。 */
}
:visited {
  outline-color: orange; /* 訪問したリンクはオレンジ色の概要で表示されます */
  background-color: green; /* 訪問したリンクは緑色の背景で表示されます */
  color: yellow; /* 訪問したリンクは黄色で表示されます */
}

ウェブ開発者への影響度

サイトを開発する際には、次の点を考慮するとよいでしょう。

• リンクの訪問状態に基づいて background-image の値を変更しても、訪問したリンクのスタイル設定には色しか使用できないため、動作しません。
• それ以外の透明な色は、 :visited セレクター内でスタイル付けした場合には表示されません。

関連情報

• Preventing attacks on a user's history through CSS :visited selectors (2010)