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

文：Lana Kovacevic（Builder AU） 翻訳校正：石橋啓一郎
2008-04-08 08:00:00
  • このエントリーをはてなブックマークに追加
最新特集【一覧】
アドビ、Photoshopの機能追加を含めCreative Cloudをアップデート
システム担当者がより楽しめる「007 スカイフォール」の見方--MI6が遭遇する手痛いピンチは、こうすれば防げた？
Javaエバンジェリストが語る「JavaOne 2012 San Francisco」の見どころ ～築き上げられる『未来のJavaの姿』～

　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をサポートしている。

  • 新着記事
  • 特集
  • ブログ