【保存版】IE11で崩れない！CSSフレームワーク＆ライブラリ活用術
IE11向けのCSSハックの書き方
IE11 向けのCSSハックを書くには、以下の2つの主要な方法があります。
条件付きコメントは、HTMLコメントを使用して、特定のブラウザまたはブラウザのバージョンに対してのみコードを適用する方法です。IE11向けのCSSハックを記述するには、以下の構文を使用します。
例:
このコードは、IE11でのみ .example 要素の文字色を赤色に設定します。
/* 標準的なCSSプロパティ */
.example {
color: blue;
}
/* IE11向けのベンダープレフィックス付きプロパティ */
.example {
-ms-color: red; /* IE11 */
}
.example {
color: blue;
}
.example {
-ms-color: red; /* IE11 */
}
注意事項:
- CSSハックは、古いブラウザとの互換性を維持するためにのみ使用するべきです。新しいCSS機能を使用できる場合は、できるだけそれを利用するようにしましょう。
- CSSハックは、コードを冗長化し、メンテナンス性を悪化させる可能性があります。できるだけ sparingly 使用するようにしましょう。
- @supportsやCSS Modulesなどの、よりモダンな方法でブラウザ互換性を処理する方法もあります。
上記以外にも、IE11向けのCSSハックに関する情報は多数存在します。詳しくは、以下のリソースを参照してください。
例1：ベンダープレフィックスを使用する
この例では、border-radius プロパティを使用して要素に丸みを付けますが、IE11でのみ丸みを非表示にします。
.element {
border-radius: 5px;
}
.element {
-webkit-border-radius: 5px; /* Chrome, Safari, Opera */
-moz-border-radius: 5px; /* Firefox */
-ms-border-radius: 0; /* IE11 */
border-radius: 5px; /* 標準ブラウザ */
}
例2：条件付きコメントを使用する
この例では、margin プロパティを使用して要素のマージンを設定しますが、IE11でのみマージンを0にします。
<div class="element">要素</div>
例3：CSSフレームワークを使用する
BootstrapなどのCSSフレームワークには、IE11向けのCSSハックが組み込まれている場合があります。これらのフレームワークを使用すると、CSSハックを手動で記述する必要がなくなります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSハックの例</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="element">要素</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]6.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
これらの例はほんの一例です。CSSハックを使用してIE11でのみ要素のスタイルを変更するには、さまざまな方法があります。
注意事項
IE11互換性対策：CSSハック以外の方法
IE11との互換性を確保する方法は、CSSハック以外にもいくつかあります。以下に、いくつか例を挙げます。
ベンダープレフィックスは、CSSプロパティの新しいバージョンがまだ標準化されていない場合に、特定のブラウザでそのプロパティをサポートするために使用されます。
例えば、border-radius プロパティは、すべての主要なブラウザでサポートされていますが、Internet Explorer 9 以前ではサポートされていませんでした。以下のコードは、すべてのブラウザで要素に丸みを付けますが、Internet Explorer 9 以前では丸みを非表示にします。
.element {
border-radius: 5px;
}
.element {
-webkit-border-radius: 5px; /* Chrome, Safari */
-moz-border-radius: 5px; /* Firefox */
-ms-border-radius: 5px; /* IE9+ */
border-radius: 5px; /* 標準ブラウザ */
}
Autoprefixerは、ベンダープレフィックスを自動的に追加してくれるツールです。これにより、手動でベンダープレフィックスを追加する必要がなくなり、コードをより簡潔に保つことができます。
Autoprefixerは、PostCSSプラグインとして、またはGulpやGruntなどのタスクランナーの一部として使用することができます。
プリプロセッサを使用する
SassやLessなどのCSSプリプロセッサは、ベンダープレフィックスを含むさまざまな機能を提供しています。これらのプリプロセッサを使用すると、CSSコードをより記述的でメンテナンスしやすいものにすることができます。
@supportsルールは、ブラウザが特定のCSS機能をサポートしているかどうかを確認してからCSSルールを適用するために使用されます。これにより、古いブラウザに古いコードを提供し、新しいブラウザに新しいコードを提供することができます。
例えば、以下のコードは、flexbox レイアウトをサポートしているブラウザでのみ要素をフレックスコンテナにします。
@supports (display: flex) {
.element {
display: flex;
}
}
Polyfillは、古いブラウザで新しいCSS機能をシミュレートするために使用されるJavaScriptライブラリです。
例えば、Promise APIのpolyfillを使用すると、古いブラウザでも非同期処理をサポートすることができます。
古いブラウザのサポートを放棄する
場合によっては、古いブラウザのサポートを放棄することが最善の方法もあります。古いブラウザのユーザー数は減少しており、これらのブラウザをサポートするために多くの労力を費やす価値がない場合があります。
IE11との互換性を確保するには、CSSハック以外にもいくつかの方法があります。これらの方法を組み合わせて使用することで、よりモダンでメンテナンスしやすいコードを書くことができます。
css css-selectors internet-explorer-11
