: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サイトは一定数存在します。レイアウトが著しく崩れるといったものはそこまでないと予想しますが、未訪問と既訪問の区別を色以外で行っていたばあい、訪問者はその区別をつけられなくなってしまいます。カンプのデザイン段階から、未訪問と既訪問のスタイルについて確認することが一層重要になってきそうです。