小粋空間  -  a cheap joke and a play on words site

「a:visited」のプロパティが配色系のものだけに限定された件について

Webデザインに携わっている方はすでにご存知と思われますが、「a:visited」に設定可能なプロパティが配色系のものだけに限定された件について情報展開します。

認識誤り等ありましたらご指摘ください。

１．事象

CSSの擬似クラス「:visited」に設定したスタイルが適用されないケースがあります。

そのページをIEの開発者ツール（F12を押下）のコンソールで見ると、

:visited と :link スタイルは、色のみを変更できます。 一部のスタイルは :visited に適用されませんでした。

という警告が出ていると思います（下）。

スタイルが適用されないのはIE以外のブラウザでも同じです。ただし古いバージョンでは挙動が異なるかもしれません。

２．原因

この警告は、スタイルシートの「a:visited」に色属性以外のプロパティ（赤色部分）を設定している場合に発生します。

<style>
a:visited {
    color: #00f;
    text-decoration: none;
}
</style>

３．経緯

このような警告が出るようになった経緯は、ブラウザの挙動が変更されたことによるものです。理由は、スタイルを監視することでユーザーの履歴を取得されるのを防ぐためです。

CSS によるブラウザ履歴の漏えいを防ぐ取り組み

訪問済みリンクを未訪問リンクと区別するのに使用できるスタイルの種類を制限します。具体的には、訪問済みリンクは、文字、背景、アウトライン、ボーダー、SVG の線と塗りといった、配色のみ変えられるようにします。その他のスタイルの変更はいずれも、背景画像を読み込んだりページ上のスタイル付けされたコンテンツの位置やサイズを変えたりすることで、リンクが訪問済みかどうかを分かるようにするものですが、これらは訪問済みリンクを判別し特定するのに利用されるおそれがあります。

「:visited」に設定可能な主なプロパティは以下です（参考サイトより）。

• color
• background-color
• border-*-color
• outline-color

厳密にはもう少し細かい動作が規定されているようですが、おおざっぱには上記以外のプロパティは適用されないと思っておけばいいようです。

「:visited」自体は特に危険ではないようですが、JavaScriptのgetComputedStyle()と組み合わせることで悪用される可能性があるようで、この関数の挙動も変更されているようです。

４．参考サイト

• CSS によるブラウザ履歴の漏えいを防ぐ取り組み
• CSS の :visited に行われるプライバシー対策
• F12 ツールのコンソール エラー コード
• getComputedStyle とは！？
• Internet Explorer 9 RCの変更点