みなさん、こんにちは。どんぶラッコです。
HTML/CSSでページを作成している時の最大の敵。それは Internet Explorer です。
＼こんにちは／
私も直近の案件で苦しみました。。
こんな悲劇を繰り返さないためにも、IE対応をする中で特に注意するべきポイントをまとめておこうと思います！
まさに苦しんでいる方、一緒に頑張りましょう！！
目次
object-fit: cover; が適用されない…
object-fit: cover とは、これを適用すると画像を中央寄せにしていい感じにしてくれる、便利すぎるやつです。
しかし、こいつは残念ながら Internet Explorer 非対応です。
＼すまんの／
そんな時は、 object-fit-images ポリフィルを使います。
CDNを使う場合は、
<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.js"></script>を読み込んだ上で、JavaScriptで
// object-fit IE 対応
objectFitImages()を読み込みます。
こうすることで、object-fitプロパティが適用されるようになります。
変数 var() (カスタムプロパティ)が使えない…
これも対応作業をする中で知ったのですが、CSSの便利機能の一つであるカスタムプロパティが使えないのです。
＼すまんの／
カスタムプロパティを使うと、色や線幅など、複数回使う値を共通化できるので、ベースカラーの定義や、複数人で開発する時などに便利ですね！
私も独自コンポーネントを作るときによく用いています。
しかし、これが使えない…。
というとで、この場合は css-vars-ponyfill 先輩に頼りましょう。
こちらも使い方は簡単。
<script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2"></script>を読み込んだ上で、
// CSS変数 IE 対応
cssVars({
rootElement: document
});をJavaScriptに記述するだけです。
Selectorの矢印が appearance:noneで消えない…
selectorを自前でデザインしたいとき、 appearance:none を使って実装することがあります。
しかし、これもIE先輩対応していません。
そこで、こんな記述が追加で必要になります。
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* IE対応 */
select::-ms-expand {
display: none;
}-ms-expandはCSSの擬似要素の一つで、Microsoft向けの拡張機能です。
標準化予定はないと明言されていますが、Selectorのワークアラウンドはこの擬似要素を使って実装されることが多いようです。
ES6の文法が使えない…
ES6の文法で書かれているJavaScriptが動きません。
私の場合、
- テンプレートリテラル ( バッククォート
`と${ }で記述できるコメント形式のやつ ) - アロー関数 (
() => {}形式で記述する関数 )
で弾かれてしまいました。
ということで、これらを使わないようにコードを実装する必要があります。
どのES6の文法が弾かれるのか、まとめている方がいらっしゃったので共有します！
border-set: outset がうまくかない…
私の場合、吹き出しを作るために線を変形すべくborder-set: outset を使っていたのですが、IEで表示すると真っ黒に。border-color:white を指定しても灰色になってしまいました。
これに対しては、
border-style: solid; に変更してあげると解決します。
まだまだ案件として存在するIE対応。今後も新しい情報があったら更新していきます♪
