CSSハックとは？
CSSハックとは特定のブラウザでのみCSSを適用させる技術のことで、ブラウザ間で互換性がないCSSプロパティを記述する際に必要となるテクニックです。
特にCSSハックのテクニックが必要となるのが、IE(Internet Explorer)系ブラウザで、最新のIE11ですらCSSハックが必要な場面が多々あります。
例えばIE11では以下のようなCSSに対応していません。
- display:filex
- usetプロパティ
- CSS変数
今ではよく使われるものですが、残念ながらIE11のみ全く動作しないため何らかの策を取る必要があります。
ほかにもbefore・afterなどの疑似要素内のプロパティも組み合わせによっては動作しないことも少なくありません。
今回はこのような場面のために、CSSをIE11だけに適用する方法を紹介します。
CSSをIE11のみ適用する方法
それでは早速CSSをIE11にのみ適用する方法を見ていきましょう。
IE11にのみ適用したいCSSがあった場合は、@mediaでCSS適用条件を絞り込んだ上で、IDやClassなどセレクタ名の前に「*::-ms-backdrop」を記述します。
@mediaでCSS適用条件を絞り込んでいるカッコ内のCSSは、条件を満たしたブラウザ(今回であればIE)でのみ適用されるため、特定のブラウザでのみCSSを適応させたい場合にとても便利です。
ただし、複数セレクタに対してCSSプロパティを与えたい場合は、個別に「*::-ms-backdrop」を記述した上でCSSを書くようにしてください。
以下のサンプルのように、まとめて書くことはできないようになっています。
CSS記述が多くなってファイル容量が気になってくるかもしれませんが、仕様上仕方ないので諦めるようにしてください。
IE10など古いバージョンでは問題ないけど、IE11でのみデザインが崩れた場合はこの記述を取るようにしましょう。
【おまけ】CSSをIEのみ適用する方法
IE11だけでなく、ほかのバージョンを含めたIEに適用させたい場合は以下のように記述します。
簡単に言うと、セレクタ名の前につけていた「*::-ms-backdrop」がなくなっただけであり、難しいことは何もありません。
この方法ではセレクト名の前に記述しなければならないものがないため、複数セレクタをカンマで区切ってまとめてCSSを適用することが可能です。
Chromeなどのほかの対応ブラウザでは問題ないけど、IEだとどのバージョンでもデザイン・レイアウトがおかしくなるという場合は上記の書き方でCSSを追記するようにしてください。