ブラウザの動向とCSSハック

2008年には、ざっとあげるだけでも次のようなブラウザ動向が予想されます。

• Netscapeの開発・サポート終了（2月1日→3月1日まで延長）
• Internet Explorer 7日本語版の自動更新配布（2月13日）
• Internet Explorer 8のリリース
• Safari 3 Windows版の正式リリース（現在、パブリックベータ版）
• Firefox 3のリリース
• Opera 9.5 / 10のリリース

これまでのCSSハックの知識とともに、これら新バージョンへの対応も考えておかなければなりません。一部には「ブラウザのCSSサポートがいっそう進むことで、CSSハックは不要になる」という声もありますが、そこまで楽観視はできないでしょう。

というのも、たとえばボーダー幅「thin」「medium」「thick」という値について、それぞれどのぐらいの太さにするかはブラウザに任されています。これはほんの一例であって、このようなブラウザ任せの部分はけっこう存在します。つまり、CSSのサポート不足という「実装不備」は少なくなってきているとしても、「実装差異」は将来にわたってずっと残りつづけるのです。

現在、よく利用されるCSSハックを、ブラウザのバージョン別にあげてみましょう。クロスブラウザ表示の一助にしてください。それぞれ「#header」を対象にしています。

・Internet Explorer 7用

［新規CSSルール］ダイアログボックスを開いて、 　［詳細設定（IDおよび疑似クラスセレクタ）］をクリックした状態。 　［セレクタ］には、「*:first-child+html #header」を入力する。

・Internet Explorer 6以前用

［新規CSSルール］ダイアログボックスを開いて、 　［詳細設定（IDおよび疑似クラスセレクタ）］をクリックした状態。 　［セレクタ］には、「* html #header」を入力する。

・Safari 3用

［新規CSSルール］ダイアログボックスを開いて、 　［詳細設定（IDおよび疑似クラスセレクタ）］をクリックした状態。 　［セレクタ］には、「body:first-of-type #header」を入力する。

・Safari 2用

［新規CSSルール］ダイアログボックスを開いて、 　［詳細設定（IDおよび疑似クラスセレクタ）］をクリックした状態。 　［セレクタ］には、「html[xmlns*=""] body:last-child #header」を入力する。

Opera 9用

［新規CSSルール］ダイアログボックスを開いて、 　［詳細設定（IDおよび疑似クラスセレクタ）］をクリックした状態。 　［セレクタ］には、「;;body #header」を入力する。

Firefoxは基準ブラウザ（作業のベースとするブラウザ）として利用することが多く、CSSハックでの調整作業は必要のないケースが一般的といってよいでしょう。

なお、Internet Explorer系の実装不備をカバーするJavaScriptライブラリ「IE7.js」の登場が話題になっています。いまのところ、セレクタやプロパティのバグフィックスにはつかえそうですが、レイアウトのズレや崩れを瞬時に解決してくれる効果はないようです。今後の展開に期待、といったところでしょうか。

JavaScriptライブラリ「IE7.js」

まとめ

CSSデザインは、2007年でかなり「高み」に達したといえます。フォントサイズ変更にあわせてコンテンツ全体の幅と高さを伸縮させる「エラスティックレイアウト」、モバイル、テレビ、プリンタなどでのデザインを最適化する「マルチデバイスCSS」、CSSにうまく「JavaScriptライブラリ」を組み合わせてリッチなインタラクションを志向するなど、新たな手法が一般化しつつあります。

「CSSによってユーザー体験（ユーザーエクスペリエンス）をさらに向上させる」という意識をもつことが、いっそう大切になるでしょう。さまざまな新しいテクニックにチャレンジしつつも、ユーザーとクライアントに対して「より価値の高いWebサイトを提供する」という視点を忘れないようにしましょう。

ページ 3 / 3

前のページ