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

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

Posted at May 1,2012 1:55 AM
Tag:[]

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

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

1.事象

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

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

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

という警告が出ていると思います(下)。

警告

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

2.原因

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

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

3.経緯

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

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

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

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

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

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

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

4.参考サイト

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)