CSSハックとは？ブラウザ差異への対処方法と最新CSS対応まとめ

CSSハックとは、ブラウザごとのCSS実装の違いやバグを回避するために使われてきたテクニックです。Webサイト制作では、同じCSSを書いていてもブラウザによって表示結果が異なることがあります。その差異を調整するために、特定のブラウザだけにスタイルを適用する方法としてCSSハックが使われてきました。

CSSハックとは
Webサイト作成の際にWebブラウザ間で異なるCSSの実装状況の違いやバグなどを吸収し、極力各ブラウザでの表示を同一にするためのテクニックの一つ

LINK：CSSハック – Wikipedia

ただし現在はブラウザの標準化が進み、昔ほどCSSハックを使う場面は多くありません。特にInternet Explorerのサポート終了により、IE専用のハックはほとんど不要になりました。

それでも古いサイトの保守や特殊な表示問題を解決する際にCSSハックが役立つことがあります。基本的な仕組みを知っておくと、トラブル対応の引き出しとして活用できます。

関連記事：「読み方のわからないHTMLタグとCSSプロパティ」ベスト5！正しい読み方は？

CSSハックが必要だった時代

かつてのWeb制作では、ブラウザごとの仕様差が非常に大きく、CSSハックは日常的に使われていました。特にInternet Explorerはバージョンごとの挙動差が大きく、IE専用のCSSを書くケースが多かったのです。

代表的な問題としては次のようなものがあります。

• ボックスモデルの解釈違い
• floatレイアウトの挙動差
• marginやpaddingの表示バグ
• positionの処理違い

そのため、ブラウザごとにCSSを分岐させるためのハックが多く生まれました。

昔よく使われていたCSSハック一覧

現在はほとんど使われませんが、かつてよく使われていたCSSハックをいくつか紹介します。

アンダースコアハック（IE6）

.hack {
	_color : #FFFFFF;
}

アスタリスクハック（IE7）

.hack {
	*color :#FFFFFF;
} 

\9ハック（IE8）

.hack {
	color : #FFFFFF\9;
}

これらはInternet ExplorerのCSS解析の仕様を利用したハックです。ただし現在はIEがサポート終了しているため、新規制作で使う機会はほとんどありません。

現在のブラウザ差異の対処方法

現在のフロントエンド開発では、CSSハックではなく標準仕様やツールを使った方法が主流です。

代表的な方法は次の通りです。

• normalize.cssなどのCSSリセットを使う
• Autoprefixerでベンダープレフィックスを自動付与する
• FlexboxやGridなどの標準レイアウトを使う
• ブラウザのFeature Queriesを利用する

特にAutoprefixerを使えば、ベンダープレフィックスの管理を自動化できるため、手動でブラウザ対応を書く必要がほとんどなくなります。

@supportsを使ったモダンCSS対応

現在のWeb制作では、ブラウザごとのハックではなく「機能対応」でCSSを分岐する方法が使われています。その代表が@supportsです。

@supports (display: grid) {
.layout { display: grid; }
}

この書き方を使えば、CSS Gridに対応しているブラウザだけにスタイルを適用できます。ブラウザ名ではなく「機能」を基準に分岐するため、将来的な互換性も高くなります。

CSSハックを使う前に確認したいこと

CSSハックは便利なテクニックですが、使いすぎるとCSSが複雑になり、後からメンテナンスしにくくなります。そのため、次の順番で問題を解決するのがおすすめです。

• HTML構造を見直す
• CSSの標準仕様で対応できないか確認する
• ブラウザバグの可能性を調査する
• どうしても必要な場合のみCSSハックを使う

現在のブラウザ環境では、CSSハックが必要になる場面はかなり減っています。まずは標準仕様での解決を試し、どうしても対応できない場合の最終手段としてCSSハックを使うようにすると安全です。