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

文：Lana Kovacevic（Builder AU） 翻訳校正：石橋啓一郎
2008-04-08 08:00:00
  • このエントリーをはてなブックマークに追加

　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は、ユーザーがその要素の上にマウスを移動させた時、特定のスタイルを適用する。以下の例では、

要素の背景色を青に設定している。そして、マウスカーソルをこのパラグラフ上に移動させると、背景色が赤色に変化する。

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

各ブラウザでの:hoverの実装状況

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

  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]