Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。
なお当Blogでは、Web標準に関する疑問や質問を募集しています。Webコンテンツ実装プロセスにまつわるお悩みでも結構ですので、お気軽に電子メールでstandards@mitsue.co.jp宛にお送りください。
2010年06月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-decorationやborder-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) }
:visitedにtransparentもしくは不透明度が0 (例: rgba(r, g, b, 0)) をもつ値が指定された場合、RGBの指定も無視されて:linkと同じ色になるようです（とはいえ、こういった指定をするケースはほとんどないと思います）。
不透明度をリンクに指定するケースが多いとはあまり思えませんが、お気をつけください。
DOMからの取得も不可能に
さて、もともとの問題となっている、DOM側の取得にも制限がかかります。すべてのリンクが未訪問として扱われるため、Selectors APIのquerySelector, querySelectorAllやgetComputedStyleから:visitedなリンクを取得しようとしても、それができなくなります。
このDOMの挙動については、Internet Explorer 8のIE8標準モードでも同様の処理がすでに行われています（プロパティの制限はありません）。
未訪問・既訪問でtext-decorationを変更するものや、background-imageで異なる画像を表示させるWebサイトは一定数存在します。レイアウトが著しく崩れるといったものはそこまでないと予想しますが、未訪問と既訪問の区別を色以外で行っていたばあい、訪問者はその区別をつけられなくなってしまいます。カンプのデザイン段階から、未訪問と既訪問のスタイルについて確認することが一層重要になってきそうです。
コメント
コメントする
この記事のトラックバックURL:
http://standards.mitsue.co.jp/cgi-bin/mt/mt-tb.cgi/460
