“ローハック時代”のブラウザー間調整術
サイバーガーデンの益子貴寛氏
Internet Explorer（IE）／Firefox／Safari／Opera／Google Chrome……「新たなブラウザー戦争勃発」と言われるほどWebブラウザー間の競争が激化している。ブラウザーの“Web標準”への対応は以前に比べればだいぶ進んだとはいえ、表示差が残っているのには変わりない。サイバーガーデンの益子貴寛氏は「CSSデザインのブラウザ調整」と題して、クロスブラウザー対応のための手順を解説した。
ブラウザー間の表示を調整するには、まず「ターゲットブラウザーを決めること」（益子氏）。当然だが、ターゲットを決めないことには調整もできない。ターゲットを決めたら、それに合うテスト環境を整える。マルチOS環境を作るには「Parallels Desktop」のような仮想化ソフトを使ってもいいし、古いIEのチェックには「IEtester」（関連記事）のようなエミュレーターも使える。では、どのブラウザーを基準にチェックしていけばいいか？
益子氏は「CSSサポートのよいブラウザーをターゲットにするのが基本」と言う。「正しく書いたコードを正しく表示してくれるブラウザーで作業して、その後でCSSサポートの悪いブラウザーに合わせていく。最初からCSSサポートが悪いブラウザーを使うと無駄に時間を使ってしまう」。原状では、Firefoxをベースに作業を進める制作者が多いという。「Firebug」「Web Developer」のようなデバッグ用の機能拡張が充実しているのも、その理由だ。
CSSハックの際にはCSSファイルを分割すると便利だ。削るのも足すのも楽になる
古いIEなど、どうしても正しく表示されない場合には、“CSSハック”を使うことになる。CSSハックとはブラウザーのバグや解釈の違いを利用してブラウザー間の表示の差を埋める作業。たとえば、IE 6にだけ適用させたいCSSは「* html セレクタ {}」と書く、といった具合に特定の記述方法によって、狙ったブラウザーにだけ違うスタイルを適用させる。ハックを使う場合はCSSファイルを分割しておき、ブラウザーごとにハック用のファイルを読み込ませる。
便利に聞こえるCSSハックだが、「安易なハックの多様は控えるべき」（益子氏）と言う。「CSSハックは一種の“薬”。たくさん飲んでも体質改善はしない。どうしても使わないといけない最終手段として使うもの」（益子氏）。ハックを多用すれば、せっかくWeb標準に合わせてマークアップしたメリットが失われてしまう。「ひととおり調整が終わったら、ハックを使わなくても解決できないか見直すことも大切だ」（益子氏）。
