Smart Communication Design Company
ホーム > ナレッジ > Blog > Web標準Blog > 2010年6月 > :visitedの挙動変更がSafari 5に反映

Web標準Blog

Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。

2010年6月14日

:visitedの挙動変更がSafari 5に反映

フロントエンド・エンジニア 矢倉

先週火曜にリリースされたSafari 5ですが、以前お伝えした:visited疑似クラスに関する挙動の変更が適用されたことがわかりました。

以前このBlogで取り上げたときには、「同じ対策がWebKitでも行われている」段階でしたが、その後コードがチェックインされ、Safari 5で反映されたようです。

同じWebKitを利用するChromeですが、先日安定版となったChrome 5ではこの変更は反映されていません。しかし、開発版であるChrome 6では反映されていることから、挙動が変更されることは確実とみてよいでしょう。

というわけで、今回はいま一度、どのような影響があるのかを確認してみましょう。

利用出来るプロパティ

:visitedでも指定が適用されるプロパティは、color, background-color, border-*-color, outline-color, column-rule-color といった色関連のプロパティに限定されます。borderなど色指定を含むショートハンドプロパティの場合は、色のみが適用されるようになります。

その他のプロパティは適用されませんので、text-decorationborder-style, background-imageなどを:visitedに利用している場合、今後はそのスタイルが適用されなくなります(:linkと同じスタイルになります)。

また、rgba(), hsla(), opacityについては、不透明度の指定が:linkの不透明度になります。

ですから、次のように異なる不透明度が状態によって指定されているとします。

:link { color: rgba(0, 0, 255, .8) }
:visited { color: rgba(255, 0, 255, .3) }


これは次のコードを指定したものと同じ効果になるでしょう。

:link { color: rgba(0, 0, 255, .8) }
:visited { color: rgba(255, 0, 255, .8) }


:visitedtransparentもしくは不透明度が0 (例: rgba(r, g, b, 0)) をもつ値が指定された場合、RGBの指定も無視されて:linkと同じ色になるようです(とはいえ、こういった指定をするケースはほとんどないと思います)。

不透明度をリンクに指定するケースが多いとはあまり思えませんが、お気をつけください。

DOMからの取得も不可能に

さて、もともとの問題となっている、DOM側の取得にも制限がかかります。すべてのリンクが未訪問として扱われるため、Selectors APIのquerySelector, querySelectorAllgetComputedStyleから:visitedなリンクを取得しようとしても、それができなくなります。

このDOMの挙動については、Internet Explorer 8のIE8標準モードでも同様の処理がすでに行われています(プロパティの制限はありません)。

未訪問・既訪問でtext-decorationを変更するものや、background-imageで異なる画像を表示させるWebサイトは一定数存在します。レイアウトが著しく崩れるといったものはそこまでないと予想しますが、未訪問と既訪問の区別を色以外で行っていたばあい、訪問者はその区別をつけられなくなってしまいます。カンプのデザイン段階から、未訪問と既訪問のスタイルについて確認することが一層重要になってきそうです。