IE、Firefox、Safari、OperaのCSSに関する互換性

　CSSが導入された初期の頃から、ブラウザ間の互換性の問題は存在した。現在の状況を見てみるために、最新版のInternet Explorer、Firefox、Safari、そしてOperaに対し、CSSの疑似クラスから一部を選んでいくつかのテストを行った。

　疑似クラスを使うと、要素に対して一定の振る舞いを指定することができる。疑似クラスは多くあるが、人気のあるブラウザでそれらすべてがサポートされているわけではない。一定の疑似クラスは動的、構造、否定に分類される。動的疑似クラスは、要素に対し状態によって異なるスタイルを適用することで、ウェブサイト上での双方向性を実現するものだ。構造疑似クラスは、ドキュメントツリーに対しスタイルを選択するものであり、否定疑似クラスは一定のスタイルを適用しない要素を指定するものだ。

　ここでテストするクラスは、:hover、:focus、:enabledと:disabled、:root、および:notだ。テストに使ったブラウザのバージョンは、Internet Explorer 8 Beta 1、Firefox 3 Beta 4、Safari 3.1、Opera 9.26である。

:hover

　:hoverは、ユーザーがその要素の上にマウスを移動させた時、特定のスタイルを適用する。以下の例では、<div>要素の背景色を青に設定している。そして、マウスカーソルをこのパラグラフ上に移動させると、背景色が赤色に変化する。

　このページはFirefox、Safari、Operaでは期待通りに動作したが、IEでは動作しなかった。以下の画像は、各ブラウザでこのパラグラフ上にマウスを移動させた時にどのように動作したかを示したものだ。

　注：IEはリンクでのみ:hoverをサポートしている。