◆当ページにはプロモーションが含まれています

JavaScript

【CSS & JS】IE対応するときにはここを気を付けろ! – よくある失敗と対処法

みなさん、こんにちは。どんぶラッコです。

HTML/CSSでページを作成している時の最大の敵。それは Internet Explorer です。

\こんにちは/

IEでYoutubeが見れない・再生できない場合の原因と対処法まとめ! | Aprico

私も直近の案件で苦しみました。。

こんな悲劇を繰り返さないためにも、IE対応をする中で特に注意するべきポイントをまとめておこうと思います!

まさに苦しんでいる方、一緒に頑張りましょう!!

object-fit: cover; が適用されない…

object-fit: cover とは、これを適用すると画像を中央寄せにしていい感じにしてくれる、便利すぎるやつです。

名無しさん
名無しさん
便利すぎて笑いが止まらない

しかし、こいつは残念ながら Internet Explorer 非対応です。

\すまんの/

IEでYoutubeが見れない・再生できない場合の原因と対処法まとめ! | Aprico

そんな時は、 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の便利機能の一つであるカスタムプロパティが使えないのです。

\すまんの/

IEでYoutubeが見れない・再生できない場合の原因と対処法まとめ! | Aprico

カスタムプロパティを使うと、色や線幅など、複数回使う値を共通化できるので、ベースカラーの定義や、複数人で開発する時などに便利ですね!

私も独自コンポーネントを作るときによく用いています。

https://proglearn.com/2020/08/06/%e3%80%90%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%e3%81%82%e3%82%8a%e3%80%91%e3%82%a4%e3%82%b1%e3%81%a6%e3%82%8b%e7%9f%a2%e5%8d%b0%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%92%e5%ae%9f%e8%a3%85%ef%bc%81-%e6%a3%92/

しかし、これが使えない…。

というとで、この場合は 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対応。今後も新しい情報があったら更新していきます♪

エンジニアにおすすめ転職サイト

マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!

レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!

JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
一緒によく読まれている記事

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です