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では動作しなかった。以下の画像は、各ブラウザでこのパラグラフ上にマウスを移動させた時にどのように動作したかを示したものだ。
注:IEはリンクでのみ:hoverをサポートしている。
folllow builer on
twitter
- 新着記事
- 特集
- ブログ
- 企画特集
-
デジタルを当たり前と言えるか?
-
ビッグデータ最前線!
-
連載!プロが語るストレージ戦略
-
モバイルデバイスもターゲットに!
-
さあ、クラウドで解決しよう。
-
特集:IT最適化への道
-
講演の見どころを紹介
-
連載!プロが語るストレージ戦略
-
利便性とセキュリティの両立
-
内部不正や不注意をどう防ぐ?
-
幸せ?不幸?ひとり情シス座談会
-
現場主導の業務変革のポイント
-
明日からではもう遅い?!
-
連載!プロが語るストレージ戦略
-
DXができない企業が滅びる理由
-
企業DXのキモはクラウドにあり
-
Kubernetesの認定制度が開始
-
中小企業でのひとり情シスIT運用術
-
ゼロトラストに不可欠なID管理
-
セキュリティの今を知る
-
次の一手はこれだ!
-
常識を疑え!
-
話題のセキュリティ事故体験ゲーム
-
漫画で解説!運用管理のコツ
-
いままさに社会にとっての転換点