【実務プロジェクトvol.3】教訓「IE/Safariブラウザ対応」

フロントエンド

今日は、初めてのお仕事を終えて教訓となった「IE/Safari対応」についてまとめます。同じく初めて案件をこなす方のご参考になればうれしいです。

こんにちは。駆け出しコーダーのharuです。

*わたしについて*
2歳0歳の育児をしながら、22時〜2時にプログラミングを独学しています。
2020.5.11~学習スタート
2020.8.10~実務でコーディング
現時点、HTML/CSS(SCSS)/javascript(jQuery) のよわよわです。これからもっと知識をつけていきたく、インプット・アウトプットを続けています。

普段から学習していてわかったことや、気付きをログに残しています。

教訓「IE/Safariブラウザ対応」

あきらさん(@akira0727x)にいただいた初仕事の修正を経て、「IE/safariブラウザ対応」が大きな教訓となりました。

わたしの他ブラウザに対する知識が甘く、修正回数がひとつ増えてしまったのです。もっと知識があればと後悔し、そして深く反省しました。

・自分の学びを整理するため
・これから初案件をとる人に向けて

IEやSafariに対応させるってどういうこと?をわかりやすくまとめたいと思います(*・ᴗ・*)و

※認識の間違っている箇所があれば、ご教授いただけるとうれしいです!

日本のWebブラウザシェア率(2020.7月時点)

日本国内での、Webブラウザのシェア率が気になり、調べてみました。


(画像引用:WebブラウザシェアランキングTOP10(日本国内・世界)

わたしも使用しているChromeは、各バージョン合わせて44.19%

それについで、IE9%Safari7.26%。とつづいていきます。

よく対応させるか否かという議論になっているIEのシェアは、年々落ちてきているもののまだまだ対策は必要そうです…。ということで、IEやSafariへの対応についてまとめていきます。

コーディングが完成したら他ブラウザで確認

完成したコーディングや模写のサイトがChromeで完璧でも、IEやSafariで同じように表示されるとは限りません。(どこか崩れたり、挙動がおかしくなっているのでは…?)

「IEやSafariに対応させる」ということは、それらのブラウザで実際にどのように表示されているかを確認する必要があるわけです。

ここでは、実際にどのように確認したらよいのかをまとめます。

(元ツイート↓)

 

【Macの場合】

Safariを開いて、環境設定→「メニューバーに”開発”メニューを表示」にチェック

開発→ユーザーエージェントから他ブラウザを選びます。 

これをみてわかるように、最新ブラウザだと、すでにIEは切り捨てられてしまっています。

Microsoft EdgeやFirefoxはここから確認することができます。

なので、IEの確認はやはりWindowsの実機から…ということになってしまいます(;ω;)

 

【Windowsの場合】

Microsoft Edge または Internet Explorer を開きます。

fnキー + F12キー でデベロッパーツール を開き、エミューションタブからIE8~11を選択することができます。

(画像引用:MacやWindowsでWebブラウザごとやIEのあらゆるバージョンの動作や表示を確認する

IE以外にも、ChromeやFirefoxも確認することができます。

以上の確認方法は、こちらを参考にしました↓

 

今回わたしは、Mac/windowsの確認方法を組み合わせて

・Chrome
・Safari
・IE8~11

に最終的に対応させました。。Windowsの実機持ちです。

何も対策していないと、IEはびっくりするほど崩れるので驚きました(´;ω;`)

CSSハック:他ブラウザで崩れている部分を修正

他ブラウザで崩れていることを確認したら、それらを修正していきます。

たとえば「IEでみたときにletter-spacingの幅が広すぎて、意図しないところで改行されている」としましょう。

そのような時は、IEでの表示のときだけletter-spacingの幅を変更したいわけです。大元のCSSをいじってしまうと、当たり前ですがChromeでの表示も変更されてしまいます。

そこで使用されるのがCSSハックと呼ばれる独自のタグです。

CSSハックを使うことで、指定したブラウザのみにCSSを適用させることができます。以下にCSSハックの一覧を載せます。

IE11のみに適用させる

_:-ms-lang(x)::-ms-backdrop, p{
    letter-spacing:0.05em;
}

セレクタpの前に、_:-ms-lang(x)::-ms-backdrop,をつけることでIE11のみに、指定のプロパティを適用することができます。もちろんセレクタはp以外でも指定のもので!

IE10のみに適用させる

@media all and (-ms-high-contrast:none) {
    p {
        letter-spacing:0.05em;
    }
}

Microsoft Edgeのみに適用させる

@supports (-ms-ime-align:auto) {
    p {
        letter-spacing:0.05em;
    }
}

Chromeのみに適用させる

@media screen and (-webkit-min-device-pixel-ratio:0){
    p {
        letter-spacing:0.05em;
    }
}

Firefoxのみに適用させる

@-moz-document url-prefix(){
    p {
        letter-spacing:0.05em;
    }
}

Safariのみに適用させる

@media screen and (-webkit-min-device-pixel-ratio:0) {
    _::-webkit-full-page-media, _:future, :root p {
        letter-spacing:0.05em;
    }
}

 

CSSハックはこちらで勉強しました。

IEで注意が必要なタグやプロパティ

IEに対応していないタグや、注意が必要なプロパティもあります。

<main>タグ

今回の案件で勉強になったのは、<main>タグです。

X

こちらのツイートにもあるように、IEでは<main>‪タグが「mainという名の見知らぬ要素」として認識されてしまいます(そんなぁぁ…)=inline要素になってしまう。

そのため<main>で囲ったコンテンツがIEでセンタリングされないというバグに直面しました。

対策
1. <main>を使わない(笑
2. mainにdisplay:block;を指定してブロック要素にする
3. <main>直下を<div>で囲み、divをセンタリング

下記の記事では2の解決方法が書かれていましたが、 なぜか効かず、わたしは3で対応しました;

 注意が必要なプロパティ

display:flex

IE10で使う場合は接頭辞が必要です。

//いつもの記述
display: flex;
justify-content: space-between;
align-items: center;  
//IE10
display: -ms-flexbox;
-ms-flex-pack: justify;
-ms-flex-line-pack: center;

object-fit

画像のトリミングなどに使われるこちらのプロパティは、IE11非対応です。

JSのCDNファイルで対策することが可能です。

①</body>前に記述・・CDNファイルの読み込み

<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.3/ofi.js"></script>
<script>objectFitImages();</script>

②適応セレクタに、以下のプロパティを追加

//IE11対応
font-family: 'object-fit:cover;';

値は、実際の値と合わせること (coverの部分)

 

他にも対策が必要なCSSプロパティがあります。

HTMLタグやCSSプロパティがIE対応なのか調べる方法

こちらはフォロワーさんのRTで知ることができました。

https://twitter.com/rabenao_dev/status/1298906641027366912?s=20

Can I useというサイトです。

こちらで調べたいタグやプロパティを入力すると、ブラウザ対応状況を調べることができます!試しに「object-fit」プロパティを調べてみます。

IEは赤い表示になっているので非対応です。対策が必要だとわかります。

緑→対応
黄緑→一部対応
赤→未対応

 

 

あとがき

他にも、IE対応に関する知識が増えたら、更新していきたいと思います🙇‍♀️

次のお仕事からは、確実にIE対応できるように努めます(自戒)

今日は以上です。

 

 

Thanks:師匠「もりけんさん」(@terrace_tec)

もりけんさんのHPはこちら