Web制作では、まだまだInternet Explorerに対応しなければいけない案件が多いですね。
しかしIEでは未対応のCSSプロパティがあったり、表示が崩れたりといった問題がよく起こります…。
そんな時に使える、ブラウザがIEの時のみにスタイルを指定できるメディアクエリを紹介します！
JavaScriptは一切不要で、CSSだけで対応できるので便利ですね。
【CSS】IE10・11を指定するメディアクエリの書き方
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10・11に指定するスタイルを記入 */
}この記述をすることで、IE10・11にのみスタイルを適用することができます。
さらにmax-widthやmin-widthなどの条件を付け足したい場合は、以下のように記述してください。
@media all and (max-width: 600px), (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10・11に指定するスタイルを記入 */
}これでIE10・11のみ＆画面の最大幅が600pxの場合にのみ適用されるようになりました。
メディアクエリが適用されているかを、IEを含む5つのブラウザでチェック
以下に、IEのみ文字色を赤に、それ以外のブラウザでは文字色を黒にするCSSコードを用意しました。
h1 {
color: black;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
h1 {
color: red;
}
}IE11, Edge, Google Chrome, Safari, Firefoxで見た目をチェックしていきます。
IE11の場合
指定通り、IEでは文字色が赤になりましたね。
Edgeの場合
Google Chromeの場合
Safariの場合
Firefoxの場合
検証結果：IEにのみスタイルが適応されている
- IE…赤
- Edge…黒
- Chrome…黒
- Safari…黒
- Firefox…黒
IEでは文字が赤色、それ以外のブラウザでは黒色になっていましたね。
これでメディアクエリがしっかり適用されていることがわかりました。
Sassの@mixinを使用して記述を簡潔にする
Sassを使用している方は、@mixinを使用することでコード量を格段に減らすことができます。
/* mixinを定義 */
@mixin ie {
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
@content;
}
}まずは上記のようにIE専用メディアクエリの@mixinを定義します。
@include ie {
/* IE10・11に指定するスタイルを記入 */
}あとは@includeで呼び出してあげるだけで、何度でも使い回すことが可能です。
Sassの@mixinを使用した場合と、CSSで書く場合のコード量を比べてみましょう。
/* ======== @mixinを使用した場合 ======== */
@include ie {
h1 {
color: red;
}
}
/* ========= CSSで記述する場合 ========= */
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
h1 {
color: red;
}
}このように、コードの記述量がかなり減っていますね。
このメディアクエリを使用する回数が多ければ多いほど、その差は大きくなります。
Sassを使用している方は、@mixinで効率的に記述しましょう。
以下の記事では、自分が実際にSassを独学したときに使用した教材を紹介していますので、興味がある方はぜひ参考にしてみてください。
IE9以下には、HTMLの条件付きコメントを使用する
先程紹介したメディアクエリは、IE10以降にしか対応できません。
IE5〜IE9に特定のスタイルを指定するには、HTMLの条件付きコメントを使用します。
<head>
<!--[if IE]>
ここにIE5~IE9に適用するコードを記述
<![endif]-->
</head>headタグ内で<!--[if IE]>と<![endif]-->で囲うことで、IE5~IE9のみに適用するコードを書くことができます。
IE5~IE9専用のスタイルシートを読み込むときに、以下のようにして使えますね。
<head>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->
</head>この条件付きコメントはIE10以降には対応していないので、最初に紹介したCSSメディアクエリを使用しましょう。
【まとめ】IE10・11にはCSSメディアクエリを、それ以外はHTMLの条件付きコメントで対応可能！
以上で、IE10・11にのみ専用のスタイルを適用するメディアクエリの書き方と、IE9以下に対応する方法を紹介しました。
もう一度それぞれのコードを載せておきます。
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10・11に指定するスタイルを記入 */
}<head>
<!--[if IE]>
IE5~IE9に指定するコードを記入
<![endif]-->
</head>IEに対応させる場合は役に立つかと思いますので、ぜひこれらを利用してみてください。
コメント